/* Premium seasonal & holiday themes — full UI skin (no particle overlay) */

/* ── Seasonal theme selector ───────────────────────────────────────────── */
html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) {
    /* marker for seasonal-ui.js */
}

/* ── Particle canvas mount ────────────────────────────────────────────── */
#ch-seasonal-fx {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

#ch-seasonal-fx canvas {
    position: absolute;
    inset: 0;
}

/* ── Page ambient (static) ───────────────────────────────────────────── */
html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--seasonal-page-bg);
    opacity: 0.92;
}

html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) body > * {
    position: relative;
    z-index: 1;
}

/* ── Section icons (JS injects badge) ─────────────────────────────────── */
.section-head__icon.seasonal-icon {
    position: relative;
    background: var(--seasonal-icon-bg, var(--color-primary-soft));
    box-shadow: none;
}

.section-head__icon.seasonal-icon > svg {
    opacity: 0;
}

.seasonal-icon__badge {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    line-height: 1;
    pointer-events: none;
}

/* ── Shared seasonal UI surfaces ─────────────────────────────────────── */
html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .panel {
    background: var(--seasonal-panel-bg, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-primary) 10%, var(--color-border));
    box-shadow: none;
}

html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .section-head__title {
    text-shadow: none;
}

html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .partner,
html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .offer {
    border-color: color-mix(in srgb, var(--color-primary) 12%, var(--color-border));
    box-shadow: none;
}

html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .partner::before,
html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .offer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 32%;
    height: 32%;
    border-top: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
    border-radius: var(--radius-lg) 0 0 0;
    opacity: 0.35;
    pointer-events: none;
    z-index: 2;
}

html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .partner--premium {
    border-color: color-mix(in srgb, var(--color-coin) 40%, var(--color-border));
    box-shadow: none;
    animation: none;
}

html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .partner__glow {
    opacity: 0.18;
}

html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .partner--premium .partner__glow {
    opacity: 0.28;
    animation: none;
}

html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .partner--premium:after {
    animation: none;
    opacity: 0;
}

html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .partner:hover,
html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .partner--premium:hover {
    box-shadow: var(--shadow-sm);
}

html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .partner--premium .partner__rate-value {
    text-shadow: none;
}

html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .partner__bar > span {
    background: linear-gradient(90deg, var(--color-primary-active), var(--color-primary));
}

html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .card--glass,
html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .hero-featured__card {
    box-shadow: none;
}

html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .hero__bg {
    background: var(--grad-hero), var(--color-bg-2);
}

html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .navitem--active {
    background: var(--grad-primary);
    color: var(--color-on-primary);
    box-shadow: var(--glow-primary), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .navitem--active .icon {
    color: var(--color-on-primary);
    opacity: 1;
}

html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .bottom-nav__item--active .bottom-nav__icon-wrap::before {
    box-shadow: var(--seasonal-nav-glow, var(--glow-primary));
}

html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .btn--primary {
    background: var(--grad-primary);
    box-shadow: var(--glow-primary);
}

html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .badge--primary {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
}

html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .earn-header__title {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .topbar {
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 10%, var(--color-border));
    box-shadow: none;
}

/* ── Spring Bloom ──────────────────────────────────────────────────────── */
[data-theme="spring"] {
    color-scheme: light;
    --color-primary: #4ade80;
    --color-primary-hover: #22c55e;
    --color-primary-active: #16a34a;
    --color-primary-soft: rgba(74, 222, 128, 0.18);
    --color-primary-softer: rgba(74, 222, 128, 0.09);
    --color-on-primary: #0f2b1b;
    --color-bg: #eefaf3;
    --color-bg-2: #e4f6ec;
    --color-surface: #ffffff;
    --color-surface-2: #f6fdf8;
    --color-surface-3: #eaf8ef;
    --color-elevated: #ffffff;
    --color-border: rgba(26, 53, 35, 0.1);
    --color-border-strong: rgba(26, 53, 35, 0.18);
    --color-text: #173022;
    --color-text-muted: #5f7a6a;
    --color-text-subtle: #8aa091;
    --color-text-on-accent: #ffffff;
    --color-success: #16a34a;
    --color-warning: #f59e0b;
    --color-danger: #e11d48;
    --color-info: #0ea5e9;
    --color-accent2: #f472b6;
    --color-success-soft: rgba(22, 163, 74, 0.14);
    --color-warning-soft: rgba(245, 158, 11, 0.14);
    --color-danger-soft: rgba(225, 29, 72, 0.14);
    --color-coin: #f472b6;
    --color-coin-deep: #db2777;
    --shadow-sm: 0 1px 2px rgba(31, 59, 42, 0.08);
    --shadow-md: 0 10px 24px -12px rgba(57, 102, 76, 0.22);
    --shadow-lg: 0 22px 48px -20px rgba(57, 102, 76, 0.28);
    --shadow-glow: 0 0 0 1px rgba(74, 222, 128, 0.35), 0 12px 36px -12px rgba(244, 114, 182, 0.28);
    --glow-primary: 0 12px 36px -12px rgba(74, 222, 128, 0.42);
    --glow-coin: 0 12px 36px -12px rgba(244, 114, 182, 0.36);
    --grad-primary: linear-gradient(135deg, #4ade80, #f472b6);
    --grad-hero: radial-gradient(120% 90% at 80% -10%, rgba(74, 222, 128, 0.38) 0%, transparent 60%), radial-gradient(90% 70% at 5% 0%, rgba(244, 114, 182, 0.26) 0%, transparent 55%);
    --grad-coin: linear-gradient(140deg, #f9a8d4, #f472b6);
    --overlay-scrim: linear-gradient(180deg, transparent, rgba(238, 250, 243, 0.94));
    --seasonal-accent: 0 0 24px -4px rgba(244, 114, 182, 0.35);
    --seasonal-page-bg: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(74, 222, 128, 0.2), transparent 60%), radial-gradient(ellipse 60% 40% at 90% 80%, rgba(244, 114, 182, 0.12), transparent 55%);
    --seasonal-panel-bg: color-mix(in srgb, var(--color-surface) 94%, #4ade80);
    --seasonal-panel-border: color-mix(in srgb, #4ade80 28%, var(--color-border));
    --seasonal-icon-bg: color-mix(in srgb, #4ade80 22%, var(--color-surface));
    --seasonal-icon-ring: color-mix(in srgb, #f472b6 40%, transparent);
    --seasonal-card-border: color-mix(in srgb, #4ade80 32%, var(--color-border));
    --seasonal-card-accent: 0 0 20px -6px rgba(74, 222, 128, 0.35);
    --seasonal-nav-glow: 0 0 20px rgba(74, 222, 128, 0.45);
    --seasonal-motif: "🌸";
}

/* ── Summer Sun ────────────────────────────────────────────────────────── */
[data-theme="summer"] {
    color-scheme: light;
    --color-primary: #0ea5e9;
    --color-primary-hover: #0284c7;
    --color-primary-active: #0369a1;
    --color-primary-soft: rgba(14, 165, 233, 0.18);
    --color-primary-softer: rgba(14, 165, 233, 0.09);
    --color-on-primary: #ffffff;
    --color-bg: #edf7ff;
    --color-bg-2: #e3f2fc;
    --color-surface: #ffffff;
    --color-surface-2: #f5fbff;
    --color-surface-3: #eaf4fb;
    --color-elevated: #ffffff;
    --color-border: rgba(15, 60, 90, 0.1);
    --color-border-strong: rgba(15, 60, 90, 0.18);
    --color-text: #123142;
    --color-text-muted: #5a7380;
    --color-text-subtle: #839aa5;
    --color-text-on-accent: #ffffff;
    --color-success: #0f9f6e;
    --color-warning: #eab308;
    --color-danger: #ef4444;
    --color-info: #0284c7;
    --color-accent2: #14b8a6;
    --color-success-soft: rgba(15, 159, 110, 0.14);
    --color-warning-soft: rgba(234, 179, 8, 0.14);
    --color-danger-soft: rgba(239, 68, 68, 0.14);
    --color-coin: #facc15;
    --color-coin-deep: #eab308;
    --shadow-sm: 0 1px 2px rgba(12, 58, 82, 0.08);
    --shadow-md: 0 10px 24px -12px rgba(14, 165, 233, 0.24);
    --shadow-lg: 0 22px 48px -20px rgba(14, 165, 233, 0.3);
    --shadow-glow: 0 0 0 1px rgba(14, 165, 233, 0.32), 0 12px 36px -12px rgba(250, 204, 21, 0.3);
    --glow-primary: 0 12px 36px -12px rgba(14, 165, 233, 0.42);
    --glow-coin: 0 12px 36px -12px rgba(250, 204, 21, 0.36);
    --grad-primary: linear-gradient(135deg, #38bdf8, #22c55e);
    --grad-hero: radial-gradient(120% 90% at 80% -10%, rgba(56, 189, 248, 0.4) 0%, transparent 60%), radial-gradient(90% 70% at 5% 0%, rgba(250, 204, 21, 0.28) 0%, transparent 55%);
    --grad-coin: linear-gradient(140deg, #fde047, #facc15);
    --overlay-scrim: linear-gradient(180deg, transparent, rgba(237, 247, 255, 0.94));
    --seasonal-accent: 0 0 28px -4px rgba(250, 204, 21, 0.4);
    --seasonal-page-bg: radial-gradient(ellipse 70% 45% at 75% -5%, rgba(250, 204, 21, 0.22), transparent 55%), radial-gradient(ellipse 80% 50% at 20% 100%, rgba(56, 189, 248, 0.14), transparent 60%);
    --seasonal-panel-bg: color-mix(in srgb, var(--color-surface) 94%, #0ea5e9);
    --seasonal-panel-border: color-mix(in srgb, #0ea5e9 28%, var(--color-border));
    --seasonal-icon-bg: color-mix(in srgb, #38bdf8 22%, var(--color-surface));
    --seasonal-icon-ring: color-mix(in srgb, #facc15 45%, transparent);
    --seasonal-card-border: color-mix(in srgb, #0ea5e9 32%, var(--color-border));
    --seasonal-card-accent: 0 0 20px -6px rgba(14, 165, 233, 0.35);
    --seasonal-nav-glow: 0 0 20px rgba(56, 189, 248, 0.45);
    --seasonal-motif: "☀️";
}

/* ── Autumn Harvest ────────────────────────────────────────────────────── */
[data-theme="autumn"] {
    color-scheme: dark;
    --color-primary: #f97316;
    --color-primary-hover: #fb923c;
    --color-primary-active: #ea580c;
    --color-primary-soft: rgba(249, 115, 22, 0.2);
    --color-primary-softer: rgba(249, 115, 22, 0.11);
    --color-on-primary: #2c1304;
    --color-bg: #110b08;
    --color-bg-2: #17100c;
    --color-surface: #1d1511;
    --color-surface-2: #251b15;
    --color-surface-3: #30231b;
    --color-elevated: #211711;
    --color-border: rgba(255, 219, 180, 0.12);
    --color-border-strong: rgba(255, 219, 180, 0.22);
    --color-text: #faf5ef;
    --color-text-muted: #c3b2a4;
    --color-text-subtle: #8e7d70;
    --color-text-on-accent: #2c1304;
    --color-success: #65a30d;
    --color-warning: #fbbf24;
    --color-danger: #f87171;
    --color-info: #60a5fa;
    --color-accent2: #ef4444;
    --color-success-soft: rgba(101, 163, 13, 0.18);
    --color-warning-soft: rgba(251, 191, 36, 0.18);
    --color-danger-soft: rgba(248, 113, 113, 0.18);
    --color-coin: #fbbf24;
    --color-coin-deep: #f59e0b;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 10px 24px -12px rgba(0, 0, 0, 0.56);
    --shadow-lg: 0 24px 50px -20px rgba(0, 0, 0, 0.65);
    --shadow-glow: 0 0 0 1px rgba(249, 115, 22, 0.38), 0 12px 36px -12px rgba(251, 191, 36, 0.22);
    --glow-primary: 0 12px 36px -12px rgba(249, 115, 22, 0.48);
    --glow-coin: 0 12px 36px -12px rgba(251, 191, 36, 0.34);
    --grad-primary: linear-gradient(135deg, #fb923c, #b45309);
    --grad-hero: radial-gradient(120% 90% at 80% -10%, rgba(249, 115, 22, 0.38) 0%, transparent 60%), radial-gradient(90% 70% at 5% 0%, rgba(251, 191, 36, 0.2) 0%, transparent 55%);
    --grad-coin: linear-gradient(140deg, #fcd34d, #f59e0b);
    --overlay-scrim: linear-gradient(180deg, transparent, rgba(17, 11, 8, 0.94));
    --seasonal-accent: 0 0 24px -4px rgba(249, 115, 22, 0.4);
    --seasonal-page-bg: radial-gradient(ellipse 90% 55% at 50% 110%, rgba(249, 115, 22, 0.16), transparent 55%), radial-gradient(ellipse 50% 35% at 10% 20%, rgba(251, 191, 36, 0.1), transparent 50%);
    --seasonal-panel-bg: color-mix(in srgb, var(--color-surface) 92%, #f97316);
    --seasonal-panel-border: color-mix(in srgb, #f97316 35%, var(--color-border));
    --seasonal-icon-bg: color-mix(in srgb, #f97316 25%, var(--color-surface-2));
    --seasonal-icon-ring: color-mix(in srgb, #fbbf24 45%, transparent);
    --seasonal-card-border: color-mix(in srgb, #f97316 38%, var(--color-border));
    --seasonal-card-accent: 0 0 22px -6px rgba(249, 115, 22, 0.4);
    --seasonal-nav-glow: 0 0 22px rgba(249, 115, 22, 0.5);
    --seasonal-motif: "🍂";
}

/* ── Winter Frost ──────────────────────────────────────────────────────── */
[data-theme="winter"] {
    color-scheme: dark;
    --color-primary: #60a5fa;
    --color-primary-hover: #93c5fd;
    --color-primary-active: #3b82f6;
    --color-primary-soft: rgba(96, 165, 250, 0.2);
    --color-primary-softer: rgba(96, 165, 250, 0.11);
    --color-on-primary: #081a30;
    --color-bg: #071018;
    --color-bg-2: #0b1521;
    --color-surface: #111c29;
    --color-surface-2: #162231;
    --color-surface-3: #1f2d3f;
    --color-elevated: #13202e;
    --color-border: rgba(216, 233, 255, 0.12);
    --color-border-strong: rgba(216, 233, 255, 0.22);
    --color-text: #f5f9ff;
    --color-text-muted: #afbdd3;
    --color-text-subtle: #7f8da3;
    --color-text-on-accent: #081a30;
    --color-success: #34d399;
    --color-warning: #c4b5fd;
    --color-danger: #fb7185;
    --color-info: #7dd3fc;
    --color-accent2: #c4b5fd;
    --color-success-soft: rgba(52, 211, 153, 0.18);
    --color-warning-soft: rgba(196, 181, 253, 0.18);
    --color-danger-soft: rgba(251, 113, 133, 0.18);
    --color-coin: #c4b5fd;
    --color-coin-deep: #a78bfa;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 10px 24px -12px rgba(0, 0, 0, 0.56);
    --shadow-lg: 0 24px 50px -20px rgba(0, 0, 0, 0.65);
    --shadow-glow: 0 0 0 1px rgba(96, 165, 250, 0.38), 0 12px 36px -12px rgba(196, 181, 253, 0.24);
    --glow-primary: 0 12px 36px -12px rgba(96, 165, 250, 0.45);
    --glow-coin: 0 12px 36px -12px rgba(196, 181, 253, 0.34);
    --grad-primary: linear-gradient(135deg, #93c5fd, #8b5cf6);
    --grad-hero: radial-gradient(120% 90% at 80% -10%, rgba(96, 165, 250, 0.34) 0%, transparent 60%), radial-gradient(90% 70% at 5% 0%, rgba(196, 181, 253, 0.22) 0%, transparent 55%);
    --grad-coin: linear-gradient(140deg, #ddd6fe, #a78bfa);
    --overlay-scrim: linear-gradient(180deg, transparent, rgba(7, 16, 24, 0.95));
    --seasonal-accent: 0 0 28px -4px rgba(147, 197, 253, 0.35);
    --seasonal-page-bg: radial-gradient(ellipse 100% 60% at 50% -20%, rgba(147, 197, 253, 0.14), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%);
    --seasonal-panel-bg: color-mix(in srgb, var(--color-surface) 92%, #60a5fa);
    --seasonal-panel-border: color-mix(in srgb, #93c5fd 30%, var(--color-border));
    --seasonal-icon-bg: color-mix(in srgb, #60a5fa 22%, var(--color-surface-2));
    --seasonal-icon-ring: color-mix(in srgb, #c4b5fd 40%, transparent);
    --seasonal-card-border: color-mix(in srgb, #60a5fa 32%, var(--color-border));
    --seasonal-card-accent: 0 0 22px -6px rgba(96, 165, 250, 0.35);
    --seasonal-nav-glow: 0 0 22px rgba(147, 197, 253, 0.45);
    --seasonal-motif: "❄️";
}

/* ── Halloween Night ───────────────────────────────────────────────────── */
[data-theme="halloween"] {
    color-scheme: dark;
    --color-primary: #f97316;
    --color-primary-hover: #fb923c;
    --color-primary-active: #ea580c;
    --color-primary-soft: rgba(249, 115, 22, 0.2);
    --color-primary-softer: rgba(249, 115, 22, 0.11);
    --color-on-primary: #1a0a00;
    --color-bg: #0c0612;
    --color-bg-2: #120818;
    --color-surface: #18101f;
    --color-surface-2: #1f1428;
    --color-surface-3: #2a1a35;
    --color-elevated: #1a1022;
    --color-border: rgba(168, 85, 247, 0.16);
    --color-border-strong: rgba(168, 85, 247, 0.28);
    --color-text: #faf0ff;
    --color-text-muted: #c4a8d8;
    --color-text-subtle: #8b6fa8;
    --color-text-on-accent: #1a0a00;
    --color-success: #84cc16;
    --color-warning: #fbbf24;
    --color-danger: #ef4444;
    --color-info: #a855f7;
    --color-accent2: #a855f7;
    --color-success-soft: rgba(132, 204, 22, 0.18);
    --color-warning-soft: rgba(251, 191, 36, 0.18);
    --color-danger-soft: rgba(239, 68, 68, 0.18);
    --color-coin: #a855f7;
    --color-coin-deep: #7c3aed;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 10px 24px -12px rgba(88, 28, 135, 0.45);
    --shadow-lg: 0 24px 50px -20px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 0 1px rgba(168, 85, 247, 0.35), 0 12px 40px -12px rgba(249, 115, 22, 0.28);
    --glow-primary: 0 12px 40px -12px rgba(249, 115, 22, 0.45);
    --glow-coin: 0 12px 40px -12px rgba(168, 85, 247, 0.38);
    --grad-primary: linear-gradient(135deg, #f97316, #a855f7);
    --grad-hero: radial-gradient(120% 90% at 80% -10%, rgba(168, 85, 247, 0.32) 0%, transparent 60%), radial-gradient(90% 70% at 5% 0%, rgba(249, 115, 22, 0.22) 0%, transparent 55%);
    --grad-coin: linear-gradient(140deg, #c084fc, #7c3aed);
    --overlay-scrim: linear-gradient(180deg, transparent, rgba(12, 6, 18, 0.95));
    --seasonal-accent: 0 0 32px -4px rgba(168, 85, 247, 0.42);
    --seasonal-page-bg: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(88, 28, 135, 0.28), transparent 55%), radial-gradient(ellipse 60% 40% at 20% 0%, rgba(249, 115, 22, 0.12), transparent 50%);
    --seasonal-panel-bg: color-mix(in srgb, var(--color-surface) 90%, #a855f7);
    --seasonal-panel-border: color-mix(in srgb, #a855f7 35%, var(--color-border));
    --seasonal-icon-bg: color-mix(in srgb, #a855f7 25%, var(--color-surface-2));
    --seasonal-icon-ring: color-mix(in srgb, #f97316 45%, transparent);
    --seasonal-card-border: color-mix(in srgb, #a855f7 38%, var(--color-border));
    --seasonal-card-accent: 0 0 24px -6px rgba(168, 85, 247, 0.4);
    --seasonal-nav-glow: 0 0 24px rgba(168, 85, 247, 0.5);
    --seasonal-motif: "🎃";
}

/* ── Christmas Joy ─────────────────────────────────────────────────────── */
[data-theme="christmas"] {
    color-scheme: dark;
    --color-primary: #22c55e;
    --color-primary-hover: #4ade80;
    --color-primary-active: #16a34a;
    --color-primary-soft: rgba(34, 197, 94, 0.2);
    --color-primary-softer: rgba(34, 197, 94, 0.11);
    --color-on-primary: #052e16;
    --color-bg: #061008;
    --color-bg-2: #0a1610;
    --color-surface: #0f1f14;
    --color-surface-2: #142818;
    --color-surface-3: #1a3220;
    --color-elevated: #122018;
    --color-border: rgba(187, 247, 208, 0.12);
    --color-border-strong: rgba(187, 247, 208, 0.22);
    --color-text: #f0fdf4;
    --color-text-muted: #a7c4b0;
    --color-text-subtle: #6b8f78;
    --color-text-on-accent: #052e16;
    --color-success: #4ade80;
    --color-warning: #fbbf24;
    --color-danger: #ef4444;
    --color-info: #38bdf8;
    --color-accent2: #ef4444;
    --color-success-soft: rgba(74, 222, 128, 0.18);
    --color-warning-soft: rgba(251, 191, 36, 0.18);
    --color-danger-soft: rgba(239, 68, 68, 0.18);
    --color-coin: #ef4444;
    --color-coin-deep: #dc2626;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 10px 24px -12px rgba(34, 197, 94, 0.28);
    --shadow-lg: 0 24px 50px -20px rgba(0, 0, 0, 0.65);
    --shadow-glow: 0 0 0 1px rgba(34, 197, 94, 0.35), 0 12px 40px -12px rgba(239, 68, 68, 0.22);
    --glow-primary: 0 12px 40px -12px rgba(34, 197, 94, 0.42);
    --glow-coin: 0 12px 40px -12px rgba(239, 68, 68, 0.34);
    --grad-primary: linear-gradient(135deg, #22c55e, #ef4444);
    --grad-hero: radial-gradient(120% 90% at 80% -10%, rgba(34, 197, 94, 0.3) 0%, transparent 60%), radial-gradient(90% 70% at 5% 0%, rgba(239, 68, 68, 0.18) 0%, transparent 55%);
    --grad-coin: linear-gradient(140deg, #f87171, #dc2626);
    --overlay-scrim: linear-gradient(180deg, transparent, rgba(6, 16, 8, 0.95));
    --seasonal-accent: 0 0 28px -4px rgba(34, 197, 94, 0.35);
    --seasonal-page-bg: radial-gradient(ellipse 70% 45% at 30% -10%, rgba(34, 197, 94, 0.16), transparent 55%), radial-gradient(ellipse 50% 35% at 80% 90%, rgba(239, 68, 68, 0.12), transparent 50%);
    --seasonal-panel-bg: color-mix(in srgb, var(--color-surface) 92%, #22c55e);
    --seasonal-panel-border: color-mix(in srgb, #22c55e 32%, var(--color-border));
    --seasonal-icon-bg: color-mix(in srgb, #22c55e 22%, var(--color-surface-2));
    --seasonal-icon-ring: color-mix(in srgb, #ef4444 40%, transparent);
    --seasonal-card-border: color-mix(in srgb, #22c55e 35%, var(--color-border));
    --seasonal-card-accent: 0 0 22px -6px rgba(34, 197, 94, 0.35);
    --seasonal-nav-glow: 0 0 22px rgba(34, 197, 94, 0.45);
    --seasonal-motif: "🎄";
}

/* ── Valentine Love ────────────────────────────────────────────────────── */
[data-theme="valentine"] {
    color-scheme: dark;
    --color-primary: #fb7185;
    --color-primary-hover: #f472b6;
    --color-primary-active: #e11d48;
    --color-primary-soft: rgba(251, 113, 133, 0.2);
    --color-primary-softer: rgba(251, 113, 133, 0.11);
    --color-on-primary: #ffffff;
    --color-bg: #140810;
    --color-bg-2: #1a0c14;
    --color-surface: #221018;
    --color-surface-2: #2a1420;
    --color-surface-3: #351a28;
    --color-elevated: #24121a;
    --color-border: rgba(251, 113, 133, 0.16);
    --color-border-strong: rgba(251, 113, 133, 0.28);
    --color-text: #fff1f2;
    --color-text-muted: #d4a0ab;
    --color-text-subtle: #9a6b78;
    --color-text-on-accent: #ffffff;
    --color-success: #4ade80;
    --color-warning: #fbbf24;
    --color-danger: #f43f5e;
    --color-info: #f472b6;
    --color-accent2: #f472b6;
    --color-success-soft: rgba(74, 222, 128, 0.18);
    --color-warning-soft: rgba(251, 191, 36, 0.18);
    --color-danger-soft: rgba(244, 63, 94, 0.18);
    --color-coin: #f472b6;
    --color-coin-deep: #ec4899;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 10px 24px -12px rgba(251, 113, 133, 0.28);
    --shadow-lg: 0 24px 50px -20px rgba(0, 0, 0, 0.65);
    --shadow-glow: 0 0 0 1px rgba(251, 113, 133, 0.35), 0 12px 40px -12px rgba(244, 114, 182, 0.28);
    --glow-primary: 0 12px 40px -12px rgba(251, 113, 133, 0.45);
    --glow-coin: 0 12px 40px -12px rgba(244, 114, 182, 0.38);
    --grad-primary: linear-gradient(135deg, #fb7185, #f472b6);
    --grad-hero: radial-gradient(120% 90% at 80% -10%, rgba(251, 113, 133, 0.32) 0%, transparent 60%), radial-gradient(90% 70% at 5% 0%, rgba(244, 114, 182, 0.22) 0%, transparent 55%);
    --grad-coin: linear-gradient(140deg, #f9a8d4, #ec4899);
    --overlay-scrim: linear-gradient(180deg, transparent, rgba(20, 8, 16, 0.95));
    --seasonal-accent: 0 0 32px -4px rgba(251, 113, 133, 0.4);
    --seasonal-page-bg: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(251, 113, 133, 0.18), transparent 55%), radial-gradient(ellipse 60% 40% at 90% 80%, rgba(244, 114, 182, 0.12), transparent 50%);
    --seasonal-panel-bg: color-mix(in srgb, var(--color-surface) 90%, #fb7185);
    --seasonal-panel-border: color-mix(in srgb, #fb7185 35%, var(--color-border));
    --seasonal-icon-bg: color-mix(in srgb, #fb7185 25%, var(--color-surface-2));
    --seasonal-icon-ring: color-mix(in srgb, #f472b6 45%, transparent);
    --seasonal-card-border: color-mix(in srgb, #fb7185 38%, var(--color-border));
    --seasonal-card-accent: 0 0 24px -6px rgba(251, 113, 133, 0.4);
    --seasonal-nav-glow: 0 0 24px rgba(251, 113, 133, 0.5);
    --seasonal-motif: "💕";
}

/* ── Easter Pastel ─────────────────────────────────────────────────────── */
[data-theme="easter"] {
    color-scheme: light;
    --color-primary: #a78bfa;
    --color-primary-hover: #8b5cf6;
    --color-primary-active: #7c3aed;
    --color-primary-soft: rgba(167, 139, 250, 0.18);
    --color-primary-softer: rgba(167, 139, 250, 0.09);
    --color-on-primary: #ffffff;
    --color-bg: #f8f4ff;
    --color-bg-2: #f0eaff;
    --color-surface: #ffffff;
    --color-surface-2: #faf7ff;
    --color-surface-3: #f3ecff;
    --color-elevated: #ffffff;
    --color-border: rgba(88, 56, 130, 0.1);
    --color-border-strong: rgba(88, 56, 130, 0.18);
    --color-text: #2d1f42;
    --color-text-muted: #7a6b94;
    --color-text-subtle: #a394b8;
    --color-text-on-accent: #ffffff;
    --color-success: #34d399;
    --color-warning: #fbbf24;
    --color-danger: #f472b6;
    --color-info: #38bdf8;
    --color-accent2: #f9a8d4;
    --color-success-soft: rgba(52, 211, 153, 0.14);
    --color-warning-soft: rgba(251, 191, 36, 0.14);
    --color-danger-soft: rgba(244, 114, 182, 0.14);
    --color-coin: #f9a8d4;
    --color-coin-deep: #ec4899;
    --shadow-sm: 0 1px 2px rgba(88, 56, 130, 0.08);
    --shadow-md: 0 10px 24px -12px rgba(167, 139, 250, 0.22);
    --shadow-lg: 0 22px 48px -20px rgba(167, 139, 250, 0.28);
    --shadow-glow: 0 0 0 1px rgba(167, 139, 250, 0.32), 0 12px 36px -12px rgba(249, 168, 212, 0.28);
    --glow-primary: 0 12px 36px -12px rgba(167, 139, 250, 0.4);
    --glow-coin: 0 12px 36px -12px rgba(249, 168, 212, 0.36);
    --grad-primary: linear-gradient(135deg, #a78bfa, #f9a8d4);
    --grad-hero: radial-gradient(120% 90% at 80% -10%, rgba(167, 139, 250, 0.34) 0%, transparent 60%), radial-gradient(90% 70% at 5% 0%, rgba(249, 168, 212, 0.24) 0%, transparent 55%);
    --grad-coin: linear-gradient(140deg, #fbcfe8, #f9a8d4);
    --overlay-scrim: linear-gradient(180deg, transparent, rgba(248, 244, 255, 0.94));
    --seasonal-accent: 0 0 28px -4px rgba(167, 139, 250, 0.35);
    --seasonal-page-bg: radial-gradient(ellipse 70% 45% at 25% -5%, rgba(167, 139, 250, 0.18), transparent 55%), radial-gradient(ellipse 60% 40% at 85% 90%, rgba(249, 168, 212, 0.14), transparent 50%);
    --seasonal-panel-bg: color-mix(in srgb, var(--color-surface) 94%, #a78bfa);
    --seasonal-panel-border: color-mix(in srgb, #a78bfa 28%, var(--color-border));
    --seasonal-icon-bg: color-mix(in srgb, #a78bfa 22%, var(--color-surface));
    --seasonal-icon-ring: color-mix(in srgb, #f9a8d4 45%, transparent);
    --seasonal-card-border: color-mix(in srgb, #a78bfa 32%, var(--color-border));
    --seasonal-card-accent: 0 0 20px -6px rgba(167, 139, 250, 0.35);
    --seasonal-nav-glow: 0 0 20px rgba(167, 139, 250, 0.45);
    --seasonal-motif: "🐣";
}

/* ══════════════════════════════════════════════════════════════════════
   Element decoration — container-level only (no per-img glowing boxes).
   JS adds `.seasonal-deco` on cards/panels/partner/offer blocks and injects
   one corner `.seasonal-motif` badge per container.
   ══════════════════════════════════════════════════════════════════════ */

.seasonal-deco:not(.chatpanel):not(.chat-fab):not(.chat-toast) {
    position: relative;
}

/* Keep live chat fixed on seasonal themes (must not inherit position: relative). */
html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .chatpanel,
html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .chat-fab,
html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) .chat-toast {
    position: fixed;
}

/* Corner motif badge (JS injects the emoji as textContent). Kept inside the
   box (positive offsets) so overflow:hidden containers do not clip it. */
.seasonal-motif {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 4;
    font-size: 0.95rem;
    line-height: 1;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
    animation: seasonal-pop 0.35s ease both;
}

@keyframes seasonal-pop {
    from {
        transform: scale(0) rotate(-18deg);
        opacity: 0;
    }
    to {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .seasonal-motif {
        animation: none;
    }
}

/* Smaller badge on compact elements */
.seasonal-motif--sm {
    top: 2px;
    right: 2px;
    font-size: 0.6rem;
}

/* Cards / panels / hero / podium / partner / offer frame accents */
.partner.seasonal-deco,
.offer.seasonal-deco {
    border-color: color-mix(in srgb, var(--color-primary) 12%, var(--color-border));
    box-shadow: none;
}

.card.seasonal-deco,
.card--glass.seasonal-deco,
.card--hover.seasonal-deco,
.card--pad.seasonal-deco,
.panel.seasonal-deco,
.podium__card.seasonal-deco,
.hero.seasonal-deco {
    border-color: color-mix(in srgb, var(--color-primary) 10%, var(--color-border));
    box-shadow: none;
}

/* Grids: subtle seasonal tint wash */
.grid.seasonal-deco,
.democust__grid.seasonal-deco,
.avatarm__grid.seasonal-deco {
    background-image: radial-gradient(
        ellipse 70% 45% at 50% 0%,
        var(--color-primary-softer, transparent),
        transparent 70%
    );
}

/* Tables: festive top accent + seasonal row hover */
.table.seasonal-deco {
    border-top: 2px solid color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
}

.table.seasonal-deco .table__row--click:hover {
    background: var(--color-primary-softer, var(--color-surface-2));
}

/* Steps: frame + seasonal number ring (number stays; motif sits on top) */
.step.seasonal-deco {
    border-color: var(--seasonal-card-border, var(--color-border));
}

.step.seasonal-deco .step__num {
    position: relative;
    box-shadow: 0 0 0 1px var(--seasonal-icon-ring, var(--color-primary-soft));
}

.step__num .seasonal-motif {
    top: -6px;
    right: -6px;
    font-size: 0.7rem;
}

/* webp / css background blocks — tint only, no per-img box */
.hero__bg.seasonal-deco {
    box-shadow: inset 0 0 0 9999px var(--color-primary-softer, transparent);
}

/* ══════════════════════════════════════════════════════════════════════
   Small atoms — seasonal colour / ring / glow (scoped to seasonal themes,
   no JS needed). Emoji would break tiny layouts, so atoms get the seasonal
   palette treatment instead.
   ══════════════════════════════════════════════════════════════════════ */

html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) :is(.badge, .chip, .profile__levelpill, .winner__badge) {
    border: 1px solid color-mix(in srgb, var(--color-primary) 32%, var(--color-border));
}

html:is(
    [data-theme="spring"],
    [data-theme="summer"],
    [data-theme="autumn"],
    [data-theme="winter"],
    [data-theme="halloween"],
    [data-theme="christmas"],
    [data-theme="valentine"],
    [data-theme="easter"]
) :is(.btn--secondary, .btn--outline, .btn--ghost) {
    border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
}

/* Cashout modal: keep Instant badge clear of the close button */
.modal--bare:has(.cashoutm) .cashoutm__banner-top {
    padding-inline-end: calc(36px + var(--space-4) + var(--space-2));
}