/* ==========================================================================
   Seasonal themes. Two attributes on <html> drive everything:
     data-theme     the palette (brand colours swapped through the variables in app.css)
     data-theme-fx  the decorations (cobwebs, ice caps, bunting...) and the particle layer
   The server stamps both on first paint; theme.js keeps them in step and runs the particles.
   Everything decorative is pointer-events: none and respects prefers-reduced-motion.
   ========================================================================== */

/* ---------- Halloween: pumpkin orange on a moonlit purple night */
:root[data-theme="halloween"] {
  --bg-brand: radial-gradient(1100px 520px at 85% -10%, rgba(255, 122, 26, .14), transparent 60%), radial-gradient(900px 480px at -10% 110%, rgba(120, 70, 220, .14), transparent 60%);
  --bg: #0b0a10;
  --bg-2: #100e18;
  --bg-rgb: 11, 10, 16;
  --panel: #15121d;
  --panel-2: #1b1726;
  --panel-3: #241e32;
  --panel-deep: #120f1a;
  --panel-deeper: #110e18;
  --line: #2a2438;
  --line-2: #3a3150;
  --text: #f1ece4;
  --text-2: #cfc6bd;
  --muted: #8f8699;
  --accent: #ff7a1a;
  --accent-2: #ff9440;
  --accent-3: #ffad66;
  --accent-deep: #c85a0f;
  --accent-rgb: 255, 122, 26;
  --amber: #b78cff;
  --amber-rgb: 183, 140, 255;
}
:root[data-theme="halloween"] .hero h1 .hl { background: linear-gradient(90deg, #ff9440, #c99bff); -webkit-background-clip: text; background-clip: text; }

/* ---------- Christmas: festive red and gold on a deep winter night */
:root[data-theme="christmas"] {
  --bg-brand: radial-gradient(1100px 520px at 85% -10%, rgba(217, 54, 62, .13), transparent 60%), radial-gradient(900px 480px at -10% 110%, rgba(64, 160, 110, .10), transparent 60%), radial-gradient(700px 300px at 50% 0%, rgba(140, 180, 255, .05), transparent 70%);
  --bg: #070b12;
  --bg-2: #0b1019;
  --bg-rgb: 7, 11, 18;
  --panel: #0f1621;
  --panel-2: #141c29;
  --panel-3: #1b2535;
  --panel-deep: #0c121b;
  --panel-deeper: #0b1119;
  --line: #1f2a3a;
  --line-2: #2c3a4e;
  --text: #f2f4f7;
  --text-2: #c9d1dc;
  --muted: #86929f;
  --accent: #d9363e;
  --accent-2: #ef5a60;
  --accent-3: #f77b80;
  --accent-deep: #a8232a;
  --accent-rgb: 217, 54, 62;
  --amber: #f3c861;
  --amber-rgb: 243, 200, 97;
  --ok: #4ade80;
}
:root[data-theme="christmas"] .hero h1 .hl { background: linear-gradient(90deg, #ef5a60, #f3c861); -webkit-background-clip: text; background-clip: text; }

/* ---------- New Year: champagne gold and midnight black */
:root[data-theme="newyear"] {
  --bg-brand: radial-gradient(1100px 520px at 85% -10%, rgba(229, 185, 79, .13), transparent 60%), radial-gradient(900px 480px at -10% 110%, rgba(120, 120, 200, .08), transparent 60%);
  --bg: #08080c;
  --bg-2: #0d0d13;
  --bg-rgb: 8, 8, 12;
  --panel: #131319;
  --panel-2: #191921;
  --panel-3: #22222c;
  --panel-deep: #101016;
  --panel-deeper: #0f0f15;
  --line: #2a2a36;
  --line-2: #393947;
  --text: #f4f1ea;
  --text-2: #cfcac0;
  --muted: #8d8a85;
  --accent: #e5b94f;
  --accent-2: #f2cf6e;
  --accent-3: #f8dd8f;
  --accent-deep: #b58b2a;
  --accent-rgb: 229, 185, 79;
  --amber: #d9dde6;
  --amber-rgb: 217, 221, 230;
}
:root[data-theme="newyear"] .btn-primary, :root[data-theme="newyear"] .pager .pg.active, :root[data-theme="newyear"] .seg button.active, :root[data-theme="newyear"] .container-tabs button.active { color: #1a1406; }
:root[data-theme="newyear"] .btn-primary:hover { color: #1a1406; }
:root[data-theme="newyear"] ::selection { color: #1a1406; }
:root[data-theme="newyear"] .hero h1 .hl { background: linear-gradient(90deg, #f2cf6e, #ffffff); -webkit-background-clip: text; background-clip: text; }

/* ---------- Valentine's: rose and blush on a dark plum */
:root[data-theme="valentines"] {
  --bg-brand: radial-gradient(1100px 520px at 85% -10%, rgba(232, 69, 111, .15), transparent 60%), radial-gradient(900px 480px at -10% 110%, rgba(246, 165, 189, .09), transparent 60%);
  --bg: #120a0f;
  --bg-2: #170d14;
  --bg-rgb: 18, 10, 15;
  --panel: #1c1016;
  --panel-2: #23151d;
  --panel-3: #2c1b25;
  --panel-deep: #180d13;
  --panel-deeper: #170c12;
  --line: #342029;
  --line-2: #482c39;
  --text: #f6eef1;
  --text-2: #d6c6cd;
  --muted: #9b8590;
  --accent: #e8456f;
  --accent-2: #ff6b8f;
  --accent-3: #ff8aa6;
  --accent-deep: #b82f52;
  --accent-rgb: 232, 69, 111;
  --amber: #f6a5bd;
  --amber-rgb: 246, 165, 189;
}
:root[data-theme="valentines"] .hero h1 .hl { background: linear-gradient(90deg, #ff6b8f, #f6a5bd); -webkit-background-clip: text; background-clip: text; }

/* ---------- St Patrick's: emerald and gold */
:root[data-theme="stpatricks"] {
  --bg-brand: radial-gradient(1100px 520px at 85% -10%, rgba(47, 179, 92, .14), transparent 60%), radial-gradient(900px 480px at -10% 110%, rgba(242, 201, 76, .08), transparent 60%);
  --bg: #070e0a;
  --bg-2: #0b130e;
  --bg-rgb: 7, 14, 10;
  --panel: #0f1a13;
  --panel-2: #142119;
  --panel-3: #1b2b21;
  --panel-deep: #0c1610;
  --panel-deeper: #0b150f;
  --line: #1f3327;
  --line-2: #2b4635;
  --text: #eef5f0;
  --text-2: #c6d6cb;
  --muted: #86998d;
  --accent: #2fb35c;
  --accent-2: #4fd27a;
  --accent-3: #74e097;
  --accent-deep: #1e8a43;
  --accent-rgb: 47, 179, 92;
  --amber: #f2c94c;
  --amber-rgb: 242, 201, 76;
  --ok: #7ef0a6;
}
:root[data-theme="stpatricks"] .hero h1 .hl { background: linear-gradient(90deg, #4fd27a, #f2c94c); -webkit-background-clip: text; background-clip: text; }

/* ---------- Easter: lilac and pastel on a soft dusk */
:root[data-theme="easter"] {
  --bg-brand: radial-gradient(1100px 520px at 85% -10%, rgba(155, 123, 255, .14), transparent 60%), radial-gradient(900px 480px at -10% 110%, rgba(255, 176, 200, .09), transparent 60%), radial-gradient(700px 300px at 50% 100%, rgba(140, 230, 190, .06), transparent 70%);
  --bg: #0e0d14;
  --bg-2: #13121b;
  --bg-rgb: 14, 13, 20;
  --panel: #171521;
  --panel-2: #1d1b29;
  --panel-3: #262335;
  --panel-deep: #14121d;
  --panel-deeper: #13111b;
  --line: #2b2839;
  --line-2: #3b374d;
  --text: #f3f0f8;
  --text-2: #cdc8da;
  --muted: #8f8a9f;
  --accent: #9b7bff;
  --accent-2: #b49aff;
  --accent-3: #c7b3ff;
  --accent-deep: #6f52d6;
  --accent-rgb: 155, 123, 255;
  --amber: #ffe08a;
  --amber-rgb: 255, 224, 138;
}
:root[data-theme="easter"] .hero h1 .hl { background: linear-gradient(90deg, #b49aff, #ffb0c8, #ffe08a); -webkit-background-clip: text; background-clip: text; }

/* ==========================================================================
   Decorations (keyed on data-theme-fx so they work with the brand colours off)
   ========================================================================== */

/* the fixed, click-through layer theme.js draws into: particles and anything that hangs over the page */
#season { position: fixed; inset: 0; z-index: 1400; pointer-events: none; overflow: hidden; contain: strict; }
/* and the one behind it: far particles and bursts the cards pass in front of */
#season-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
#season canvas, #season-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#season .corner { position: absolute; top: 0; width: clamp(120px, 15vw, 230px); height: auto; opacity: .62; }
#season .corner.tl { left: 0; }
#season .corner.tr { right: 0; transform: scaleX(-1); }
#season .edge { position: absolute; left: 0; right: 0; top: 0; }

/* ---------- Halloween: cobwebs and a spider over the page, a moon and fog behind it */
#season .spider { position: absolute; top: 0; left: clamp(120px, 14vw, 220px); width: 2px; transform-origin: top center; animation: spider-swing 6s ease-in-out infinite; }
#season .spider .thread { display: block; width: 1px; height: 120px; margin: 0 auto; background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .08)); }
#season .spider svg { display: block; width: 22px; height: 22px; margin: -2px 0 0 -10px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
@keyframes spider-swing { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(10px); } }
:root[data-theme-fx="halloween"] {
  --bg-fx:
    radial-gradient(circle at calc(100% - 150px) 104px, #fff7dc 0 33px, rgba(255, 240, 200, .40) 35px, rgba(255, 240, 200, .12) 58px, transparent 120px),
    linear-gradient(180deg, transparent 62%, rgba(140, 100, 210, .10) 84%, rgba(160, 120, 230, .18) 100%);
}

/* ---------- Christmas: ice caps on every raised edge, string lights on the nav, snow drifts */
:root[data-theme-fx="christmas"] .card,
:root[data-theme-fx="christmas"] .stat,
:root[data-theme-fx="christmas"] .feature,
:root[data-theme-fx="christmas"] .step,
:root[data-theme-fx="christmas"] .hero-card,
:root[data-theme-fx="christmas"] .shop-card,
:root[data-theme-fx="christmas"] .srv-card,
:root[data-theme-fx="christmas"] .guild-card,
:root[data-theme-fx="christmas"] .gc,
:root[data-theme-fx="christmas"] .modal,
:root[data-theme-fx="christmas"] .cta-band { position: relative; }
:root[data-theme-fx="christmas"] .card::after,
:root[data-theme-fx="christmas"] .stat::before,
:root[data-theme-fx="christmas"] .feature::after,
:root[data-theme-fx="christmas"] .step::after,
:root[data-theme-fx="christmas"] .hero-card::after,
:root[data-theme-fx="christmas"] .shop-card::after,
:root[data-theme-fx="christmas"] .srv-card::after,
:root[data-theme-fx="christmas"] .guild-card::after,
:root[data-theme-fx="christmas"] .gc::after,
:root[data-theme-fx="christmas"] .modal::after,
:root[data-theme-fx="christmas"] .cta-band::after {
  content: "";
  position: absolute;
  left: -1px; right: -1px; top: -1px;
  height: 22px;
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  /* a snow cap with drips and short icicles, drawn once and repeated along the edge */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='22' viewBox='0 0 160 22'%3E%3Cpath fill='%23ffffff' fill-opacity='.92' d='M0 0h160v3.5c-5 0-6 5-10 5s-5-4-9-4-4 6-8 6-5-5-9-5-4 4-8 4-5-3.5-9-3.5-6 5.5-10 5.5-5-4.5-9-4.5-3 2-7 2-4-4-9-4-5 3-9 3-4-5-8-5-6 4-10 4-5-2-9-2-5 3-9 3-6-3-10-3-4 3-8 3-6-2-10-2z'/%3E%3Cpath fill='%23dbe9ff' fill-opacity='.9' d='M34 8c1 0 1.5 7 1.5 11-1 0-2.5-8-1.5-11zM78 9c1 0 1.5 5 1.5 8-1 0-2.5-6-1.5-8zM120 7c1.2 0 1.5 9 1.5 13-1 0-2.5-10-1.5-13zM147 8c1 0 1.5 4 1.5 6-1 0-2.5-5-1.5-6z'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 160px 22px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
  opacity: .95;
}
:root[data-theme-fx="christmas"] .stat::before { z-index: 3; }
:root[data-theme-fx="christmas"] .stat::after { z-index: 0; }
:root[data-theme-fx="christmas"] .gc::after { z-index: 3; }
/* string lights hung along the public nav and the sidebar brand */
:root[data-theme-fx="christmas"] #season .lights { position: absolute; top: 0; left: 0; right: 0; height: 26px; display: flex; justify-content: space-around; padding: 0 12px; }
:root[data-theme-fx="christmas"] #season .lights::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: repeating-linear-gradient(90deg, rgba(40, 60, 40, .9) 0 6px, rgba(60, 90, 60, .9) 6px 12px); opacity: .9; }
:root[data-theme-fx="christmas"] #season .lights i { position: relative; top: 6px; width: 9px; height: 14px; border-radius: 50% 50% 55% 55%; background: var(--bulb, #ff4d4d); box-shadow: 0 0 8px 2px var(--bulb, #ff4d4d), 0 0 18px 4px color-mix(in srgb, var(--bulb, #ff4d4d) 45%, transparent); animation: bulb 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); opacity: .95; }
:root[data-theme-fx="christmas"] #season .lights i::before { content: ""; position: absolute; top: -5px; left: 2px; width: 5px; height: 6px; background: #2b3a2b; border-radius: 2px 2px 0 0; }
@keyframes bulb { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(.55); } }
:root[data-theme-fx="christmas"] { --bg-fx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='90' viewBox='0 0 600 90' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='.10' d='M0 62C100 20 200 20 300 62S500 104 600 62V90H0z'/%3E%3Cpath fill='%23ffffff' fill-opacity='.14' d='M0 78C150 100 250 100 300 78S450 56 600 78V90H0z'/%3E%3C/svg%3E") left bottom / 600px 90px repeat-x; }

/* ---------- New Year: a gold shimmer across the top, a dark stage below the fireworks */
:root[data-theme-fx="newyear"] #season .edge { height: 3px; background: linear-gradient(90deg, transparent, rgba(242, 207, 110, .9), rgba(255, 255, 255, .9), rgba(242, 207, 110, .9), transparent); background-size: 200% 100%; animation: shimmer-x 4s linear infinite; }
@keyframes shimmer-x { from { background-position: 100% 0; } to { background-position: -100% 0; } }
:root[data-theme-fx="newyear"] { --bg-fx: radial-gradient(1400px 700px at 50% 120%, rgba(229, 185, 79, .08), transparent 60%); }

:root[data-theme-fx="valentines"] {
  --bg-fx:
    radial-gradient(240px 240px at 12% 20%, rgba(255, 107, 143, .12), transparent 70%),
    radial-gradient(300px 300px at 88% 70%, rgba(246, 165, 189, .10), transparent 70%),
    radial-gradient(200px 200px at 70% 15%, rgba(255, 107, 143, .08), transparent 70%),
    radial-gradient(180px 180px at 30% 85%, rgba(255, 138, 166, .08), transparent 70%);
}

/* ---------- St Patrick's: a faint rainbow rising from the corner, behind the page */
:root[data-theme-fx="stpatricks"] {
  --bg-fx:
    radial-gradient(circle at 10% 112%, transparent 36vw, rgba(255, 90, 90, .15) 36.6vw 38.2vw, rgba(255, 170, 60, .14) 38.8vw 40.4vw, rgba(255, 230, 80, .12) 41vw 42.6vw, rgba(90, 220, 120, .12) 43.2vw 44.8vw, rgba(90, 160, 255, .11) 45.4vw 47vw, rgba(170, 110, 255, .10) 47.6vw 49.2vw, transparent 49.8vw),
    radial-gradient(900px 400px at 100% 0%, rgba(242, 201, 76, .07), transparent 60%);
}

/* ---------- Easter: pastel bunting along the top */
:root[data-theme-fx="easter"] #season .edge { height: 20px; }
:root[data-theme-fx="easter"] #season .edge::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px; background: rgba(255, 255, 255, .35); }
:root[data-theme-fx="easter"] #season .edge::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14'%3E%3Cpath d='M0 0h24l-12 13z' fill='%23ffb0c8'/%3E%3Cpath d='M24 0h24l-12 13z' fill='%23ffe08a'/%3E%3Cpath d='M48 0h24l-12 13z' fill='%23b49aff'/%3E%3Cpath d='M72 0h24l-12 13z' fill='%238ce6be'/%3E%3Cpath d='M96 0h24l-12 13z' fill='%239ad0ff'/%3E%3C/svg%3E"); background-size: 120px 14px; background-repeat: repeat-x; opacity: .9; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }


/* ==========================================================================
   The logo dresses up: a hat (or ears, or a heart) pinned to the RCE Bot mark in the nav and the
   sidebar, and on the admin gallery's mini logos (.hat-<theme>) so you can see it before saving
   ========================================================================== */
.brand { position: relative; }
.brand::before, [class*="hat-"]::before { content: ""; position: absolute; width: 28px; height: 24px; background: var(--hat, none) center bottom / contain no-repeat; pointer-events: none; z-index: 2; transform: rotate(-14deg); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); display: none; }
.side .brand::before { left: 2px; top: -10px; }
.site-nav .brand::before { left: -6px; top: -12px; }
[class*="hat-"] { position: relative; display: inline-block; }
[class*="hat-"]::before { left: -6px; top: -11px; display: block; }
:root[data-theme-fx="halloween"] .brand::before, .hat-halloween::before { display: block; --hat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cellipse cx='16' cy='22' rx='15' ry='4' fill='%231b1626'/%3E%3Cpath d='M9 21L12.5 7l6.5-4 3.5 18z' fill='%23241b33'/%3E%3Cpath d='M9.5 18.5h12.5l.6 2.8H9z' fill='%238a5cff'/%3E%3Crect x='14' y='18' width='4.2' height='3.4' rx='.6' fill='%23f3c861'/%3E%3C/svg%3E"); }
:root[data-theme-fx="christmas"] .brand::before, .hat-christmas::before { display: block; --hat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cpath d='M5 20C7 10 13 4 24 3c-2 4-3 9 0 15z' fill='%23d9363e'/%3E%3Cpath d='M9 16c2-5 6-9 13-11-4 3-6 7-7 12z' fill='%23ef5a60' opacity='.7'/%3E%3Ccircle cx='25.5' cy='3.5' r='3.2' fill='%23fff'/%3E%3Crect x='2.5' y='18' width='23' height='6.5' rx='3.2' fill='%23fff'/%3E%3C/svg%3E"); }
:root[data-theme-fx="newyear"] .brand::before, .hat-newyear::before { display: block; --hat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cpath d='M16 2L27 25H5z' fill='%23e5b94f'/%3E%3Cpath d='M16 2l5.5 12h-11z' fill='%23f8dd8f'/%3E%3Cpath d='M8 19.5h16l1.6 3.4H6.4z' fill='%23fff' opacity='.55'/%3E%3Ccircle cx='16' cy='2.5' r='2.6' fill='%23fff'/%3E%3Cpath d='M3.5 25h25' stroke='%23b58b2a' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); transform: rotate(-8deg); }
:root[data-theme-fx="valentines"] .brand::before, .hat-valentines::before { display: block; width: 18px; height: 17px; --hat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30'%3E%3Cpath d='M16 28C6 20 1.5 14.5 1.5 8.5a7.2 7.2 0 0 1 14.5-1.6A7.2 7.2 0 0 1 30.5 8.5c0 6-4.5 11.5-14.5 19.5z' fill='%23ff6b8f'/%3E%3Cpath d='M7 9c0-2.6 1.6-4.3 3.8-4.4' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E"); transform: rotate(-18deg); }
:root[data-theme-fx="stpatricks"] .brand::before, .hat-stpatricks::before { display: block; --hat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cellipse cx='16' cy='23' rx='15' ry='4' fill='%231e8a43'/%3E%3Cpath d='M8 22V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v15z' fill='%232fb35c'/%3E%3Cpath d='M8 15.5h16v4.5H8z' fill='%231b1626'/%3E%3Crect x='13.8' y='15' width='4.4' height='5.5' rx='.8' fill='%23f2c94c'/%3E%3C/svg%3E"); }
:root[data-theme-fx="easter"] .brand::before, .hat-easter::before { display: block; height: 30px; --hat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 30C4.5 21 4 9 8.5 4.5c3.2-3.2 6.5 7 6.5 25.5z' fill='%23f6eef1'/%3E%3Cpath d='M10.3 26c-2.5-7-2.4-15 0-18 1.6-2 3 5 3 18z' fill='%23ffb0c8'/%3E%3Cpath d='M22 30c5.5-9 6-21 1.5-25.5-3.2-3.2-6.5 7-6.5 25.5z' fill='%23f6eef1'/%3E%3Cpath d='M21.7 26c2.5-7 2.4-15 0-18-1.6-2-3 5-3 18z' fill='%23ffb0c8'/%3E%3C/svg%3E"); transform: rotate(-6deg); }
.side .brand::before { transform-origin: bottom center; }
:root[data-theme-fx="easter"] .side .brand::before { top: -18px; }
:root[data-theme-fx="easter"] .site-nav .brand::before { top: -20px; }
:root[data-theme-fx="valentines"] .side .brand::before { left: 4px; top: -4px; }
:root[data-theme-fx="valentines"] .site-nav .brand::before { left: -4px; top: -6px; }

/* ==========================================================================
   Signature touches per season: the headline, the primary buttons, the cards
   ========================================================================== */
.hero h1 .hl { transition: filter .3s; }
:root[data-theme="halloween"] .hero h1 .hl { filter: drop-shadow(0 0 18px rgba(255, 122, 26, .35)); }
:root[data-theme="halloween"] .btn-primary { animation: pumpkin-glow 2.6s ease-in-out infinite; }
@keyframes pumpkin-glow { 0%, 100% { box-shadow: 0 6px 18px -6px rgba(255, 122, 26, .5); } 50% { box-shadow: 0 6px 28px -4px rgba(255, 140, 50, .85), 0 0 0 1px rgba(255, 160, 80, .35); } }
:root[data-theme="halloween"] .card, :root[data-theme="halloween"] .stat, :root[data-theme="halloween"] .feature { border-top-color: rgba(255, 122, 26, .28); }

:root[data-theme="christmas"] .hero h1 .hl { filter: drop-shadow(0 0 16px rgba(243, 200, 97, .3)); }
:root[data-theme="christmas"] .btn-primary { position: relative; overflow: hidden; }
:root[data-theme="christmas"] .btn-primary::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-55deg, rgba(255, 255, 255, 0) 0 10px, rgba(255, 255, 255, .14) 10px 16px); pointer-events: none; }
/* frost ferns creeping in from the top corners of every card */
:root[data-theme-fx="christmas"] .card, :root[data-theme-fx="christmas"] .feature, :root[data-theme-fx="christmas"] .step, :root[data-theme-fx="christmas"] .shop-card, :root[data-theme-fx="christmas"] .srv-card {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23dbe9ff' stroke-width='1.3' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M0 0l64 64M8 2l6 14M2 8l14 6M20 10l6 16M10 20l16 6M34 22l6 18M22 34l18 6M48 36l4 16M36 48l16 4M20 2l-2 8M2 20l8-2M38 12l-4 10M12 38l10-4M54 26l-6 10M26 54l10-6'/%3E%3Cpath d='M0 0l40 110M0 0l110 40M10 28l10 2M28 10l2 10M18 50l12 1M50 18l1 12M26 72l12-1M72 26l-1 12' opacity='.6'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23dbe9ff' stroke-width='1.3' stroke-linecap='round' opacity='.55' transform='translate(120 0) scale(-1 1)'%3E%3Cpath d='M0 0l64 64M8 2l6 14M2 8l14 6M20 10l6 16M10 20l16 6M34 22l6 18M22 34l18 6M48 36l4 16M36 48l16 4M20 2l-2 8M2 20l8-2M38 12l-4 10M12 38l10-4M54 26l-6 10M26 54l10-6'/%3E%3Cpath d='M0 0l40 110M0 0l110 40M10 28l10 2M28 10l2 10M18 50l12 1M50 18l1 12M26 72l12-1M72 26l-1 12' opacity='.6'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--panel), var(--panel-deep));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: left top, right top, 0 0;
  background-size: 110px 110px, 110px 110px, 100% 100%;
}

:root[data-theme="newyear"] .hero h1 .hl { background-image: linear-gradient(90deg, #e5b94f, #fff4c8 35%, #f2cf6e 50%, #ffffff 65%, #e5b94f); background-size: 200% 100%; animation: gold-sweep 5s linear infinite; filter: drop-shadow(0 0 16px rgba(229, 185, 79, .3)); }
@keyframes gold-sweep { from { background-position: 100% 0; } to { background-position: -100% 0; } }
:root[data-theme="newyear"] .btn-primary { position: relative; overflow: hidden; }
:root[data-theme="newyear"] .btn-primary::after { content: ""; position: absolute; top: -40%; bottom: -40%; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); animation: sheen 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes sheen { 0%, 60% { left: -60%; } 100% { left: 140%; } }
:root[data-theme="newyear"] .card, :root[data-theme="newyear"] .stat { border-top-color: rgba(229, 185, 79, .32); }

:root[data-theme="valentines"] .hero h1 .hl { filter: drop-shadow(0 0 18px rgba(255, 107, 143, .45)); }
:root[data-theme="valentines"] .btn-primary { box-shadow: 0 6px 26px -4px rgba(232, 69, 111, .7), 0 0 0 1px rgba(255, 138, 166, .25) inset; }
:root[data-theme="valentines"] .card, :root[data-theme="valentines"] .stat, :root[data-theme="valentines"] .feature { border-top-color: rgba(232, 69, 111, .3); }

:root[data-theme="stpatricks"] .hero h1 .hl { filter: drop-shadow(0 0 16px rgba(79, 210, 122, .35)); }
:root[data-theme="stpatricks"] .btn-primary { border-color: rgba(242, 201, 76, .55); box-shadow: 0 6px 22px -6px rgba(47, 179, 92, .7), 0 0 0 1px rgba(242, 201, 76, .25) inset; }
:root[data-theme="stpatricks"] .card, :root[data-theme="stpatricks"] .stat, :root[data-theme="stpatricks"] .feature { border-top-color: rgba(242, 201, 76, .3); }

:root[data-theme="easter"] .hero h1 .hl { filter: drop-shadow(0 0 16px rgba(180, 154, 255, .35)); }
:root[data-theme="easter"] .btn-primary { background: linear-gradient(135deg, #9b7bff, #ff8fb1); border-color: rgba(255, 176, 200, .5); }
:root[data-theme="easter"] .btn-primary:hover { background: linear-gradient(135deg, #ad92ff, #ffa3c0); }
:root[data-theme="easter"] .card, :root[data-theme="easter"] .stat, :root[data-theme="easter"] .feature { border-top-color: rgba(255, 176, 200, .3); }

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="halloween"] .btn-primary, :root[data-theme="newyear"] .hero h1 .hl, :root[data-theme="newyear"] .btn-primary::after { animation: none; }
}

/* ==========================================================================
   Admin page: the Seasonal Themes tab
   ========================================================================== */
.theme-status { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); margin-bottom: 16px; }
.theme-status .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; background: var(--accent-soft); color: var(--accent-2); border: 1px solid rgba(var(--accent-rgb), .3); flex: none; }
.theme-status b { font-family: var(--display); font-size: 1.15rem; text-transform: uppercase; letter-spacing: .03em; }
.theme-status .grow { flex: 1; min-width: 200px; }
/* flex, not a fixed grid: the segmented switches get the width they need instead of wrapping their last option */
.theme-controls { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: flex-start; }
.theme-controls > * { flex: 1 1 220px; min-width: 0; }
.theme-controls > :has(.seg) { flex-basis: 320px; }
.theme-controls .field { margin: 0; }
.theme-controls .seg { display: inline-flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; }
.theme-controls .switch { margin-top: 6px; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.theme-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radius); background: linear-gradient(180deg, var(--panel), var(--panel-deep)); border: 1px solid var(--line); transition: border-color .15s, transform .15s; overflow: hidden; }
.theme-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.theme-card.live { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 10px 30px -14px var(--accent-glow); }
.theme-card.chosen { border-color: var(--amber); }
.theme-card .swatches { display: flex; height: 44px; border-radius: 9px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); }
.theme-card .swatches span { flex: 1; }
.theme-card .swatches span:first-child { flex: 2; }
.theme-card .head { display: flex; align-items: center; gap: 10px; }
.theme-card .head .logo { width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.theme-card .head .logo img { width: 30px; height: 30px; object-fit: contain; }
.theme-card .head i { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .05); color: var(--sw, var(--accent-2)); font-size: 1rem; flex: none; }
.theme-card .head h3 { margin: 0; font-size: 1.05rem; }
.theme-card .when { color: var(--muted); font-size: .8rem; }
.theme-card p { margin: 0; color: var(--text-2); font-size: .86rem; }
.theme-card .actions { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; }
.theme-card .actions button { flex: 1; }
.theme-card .head { justify-content: flex-start; }
.theme-card .head .badge { margin-left: auto; }
.theme-sched { display: flex; flex-direction: column; gap: 6px; }
.theme-sched .list-row { padding: 8px 0; }
.theme-sched .list-row > span:first-child { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.theme-sched .list-row i { width: 18px; text-align: center; color: var(--sw, var(--accent-2)); }
.theme-sched .list-row.past { opacity: .5; }
.theme-sched .dates { color: var(--muted); font-size: .84rem; font-variant-numeric: tabular-nums; }
/* the floating pill while an admin previews a theme that isn't saved */
.theme-preview-pill { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2100; display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 16px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--accent); box-shadow: var(--shadow), 0 0 0 4px var(--accent-soft); font-weight: 600; animation: rise .18s ease-out; max-width: calc(100vw - 32px); }
.theme-preview-pill i { color: var(--accent-2); }
.theme-preview-pill .btn-sm { padding: 5px 10px; }
.fx-toggle.off i { opacity: .45; }
.fx-toggle.off::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; background: currentColor; transform: translate(-50%, -50%) rotate(-45deg); opacity: .8; border-radius: 2px; }
.fx-toggle { position: relative; }

/* ==========================================================================
   Motion and print
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #season canvas { display: none; }
  #season .spider, #season .lights i, #season .edge { animation: none; }
}
@media print { #season { display: none; } }
/* give the phone some air: skip the big corner pieces and the floor */
@media (max-width: 640px) {
  #season .corner { width: 120px; }
  :root[data-theme-fx="stpatricks"] { --bg-fx: linear-gradient(transparent, transparent); }
}