/* Holiday colors for the top box of a category page (renderCategories.php adds cat-head-<key>).
   Colors match the home page banner themes in css/home-themes.css. */

/* ---------- Thanksgiving: warm autumn sky, sun glow, falling leaves ---------- */
.cat-head-tg { position: relative; overflow: hidden; color: #fff; border: 0;
    background: linear-gradient(170deg, #5e230b 0%, #8f3a12 45%, #c4621f 80%, #e08a2e 100%);
    box-shadow: 0 8px 24px rgba(94, 35, 11, .28); }
.cat-head-tg > * { position: relative; z-index: 1; }
.cat-head-tg .cat-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cat-head-tg .cat-sun { position: absolute; top: -70px; left: 46%; width: 240px; height: 240px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 214, 120, .5) 0%, rgba(255, 170, 60, .18) 45%, transparent 70%);
    animation: cat-glow 6s ease-in-out infinite alternate; }
@keyframes cat-glow { to { transform: scale(1.12); opacity: .8; } }
.cat-head-tg .cat-leaves i { position: absolute; top: -40px; left: var(--x); width: var(--w); height: var(--w); opacity: .85;
    animation: cat-leaf var(--s) linear infinite; animation-delay: calc(var(--d) * -1); }
.cat-head-tg .cat-leaves svg { display: block; width: 100%; height: 100%; }
@keyframes cat-leaf { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(24px, 160px) rotate(180deg); }
    100% { transform: translate(-10px, 340px) rotate(360deg); } }

.cat-head-tg .cat-crumbs { color: #f6d58a; }
.cat-head-tg .cat-crumbs a { color: #f6d58a !important; }
.cat-head-tg h1 { color: #fff; text-shadow: 0 3px 14px rgba(0, 0, 0, .35); }
.cat-head-tg .cat-desc { color: #fbe6cf; }
.cat-head-tg .cat-more { color: #f6d58a; }
.cat-head-tg .cat-meta { color: #fbe6cf; }
.cat-head-tg .sr-sort { background: rgba(74, 31, 8, .35); }
.cat-head-tg .sr-sort a { color: #fbe6cf !important; }
.cat-head-tg .sr-sort a.on { color: #4a1f08 !important; background: #f6c453; box-shadow: 0 4px 12px rgba(246, 196, 83, .35); }
.cat-head-tg .sr-sort a:not(.on):hover { background: rgba(255, 255, 255, .12); }
.cat-head-tg .cat-feature .hp-card { box-shadow: 0 10px 26px rgba(40, 14, 3, .4); }
.cat-head-tg .hp-badge-feat { color: #4a1f08; background: #f6c453; }

/* Theme chips under the box */
.cat-themes-tg a { color: #8f3a12 !important; background: #fbe6cf; }
.cat-themes-tg a:hover { background: #f6d58a; }
.cat-themes-tg a.on { color: #fff !important; background: #c4621f; }

@media (max-width: 600px) {
    .cat-head-tg .cat-sun { left: auto; right: -40px; width: 180px; height: 180px; }
    .cat-head-tg .cat-leaves .cat-hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cat-head-tg .cat-sun, .cat-head-tg .cat-leaves i { animation: none; }
    .cat-head-tg .cat-leaves { display: none; }
}

/* ---------- Christmas: snowy night sky, blinking string of lights, falling snow ---------- */
.cat-head-xm { position: relative; overflow: hidden; color: #fff; border: 0; padding-top: 44px;
    background: radial-gradient(ellipse at 75% 15%, #1f5d8c 0%, transparent 55%), linear-gradient(180deg, #08203a 0%, #0f3557 60%, #16507a 100%);
    box-shadow: 0 8px 24px rgba(8, 32, 58, .3); }
.cat-head-xm > * { position: relative; z-index: 1; }
.cat-head-xm .cat-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cat-head-xm .cat-lights { position: absolute; top: 0; left: -1%; width: 102%; height: 40px; }
.cat-head-xm .cat-lights svg { display: block; width: 100%; height: 100%; }
.cat-head-xm .bulb { animation: cat-blink 1.8s steps(1) infinite; }
.cat-head-xm .b1 { animation-delay: -.6s; }
.cat-head-xm .b2 { animation-delay: -1.2s; }
@keyframes cat-blink { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.cat-head-xm .cat-snow i { position: absolute; top: -12px; left: var(--x); width: var(--w); height: var(--w); border-radius: 50%; background: #fff; opacity: .8;
    animation: cat-snow var(--s) linear infinite; animation-delay: calc(var(--d) * -1); }
@keyframes cat-snow { 0% { transform: translate(0, 0); } 50% { transform: translate(14px, 170px); } 100% { transform: translate(-6px, 350px); } }
.cat-head-xm .cat-drift { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; }
.cat-head-xm .cat-drift svg { display: block; width: 100%; height: 100%; }

.cat-head-xm .cat-crumbs { color: #f6c453; }
.cat-head-xm .cat-crumbs a { color: #f6c453 !important; }
.cat-head-xm h1 { color: #fff; text-shadow: 0 3px 14px rgba(0, 0, 0, .35); }
.cat-head-xm .cat-desc { color: #dceaf5; }
.cat-head-xm .cat-more { color: #f6c453; }
.cat-head-xm .cat-meta { color: #dceaf5; }
.cat-head-xm .sr-sort { background: rgba(4, 18, 34, .4); }
.cat-head-xm .sr-sort a { color: #dceaf5 !important; }
.cat-head-xm .sr-sort a.on { color: #fff !important; background: #c8102e; box-shadow: 0 4px 12px rgba(200, 16, 46, .4); }
.cat-head-xm .sr-sort a:not(.on):hover { background: rgba(255, 255, 255, .12); }
.cat-head-xm .cat-feature .hp-card { box-shadow: 0 10px 26px rgba(2, 12, 24, .45); }
.cat-head-xm .hp-badge-feat { color: #3b0a10; background: #f6c453; }

/* Theme chips under the box */
.cat-themes-xm a { color: #0f3557 !important; background: #e1ecf5; }
.cat-themes-xm a:hover { background: #cddff0; }
.cat-themes-xm a.on { color: #fff !important; background: #c8102e; }

@media (max-width: 600px) {
    .cat-head-xm { padding-top: 38px; }
    .cat-head-xm .cat-snow .cat-hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cat-head-xm .bulb { animation: none; }
    .cat-head-xm .cat-snow { display: none; }
}

/* ---------- New Year's: midnight sky, fireworks bursting, falling confetti ---------- */
.cat-head-ny { position: relative; overflow: hidden; color: #fff; border: 0;
    background: radial-gradient(ellipse at 70% 25%, #3a2a7a 0%, transparent 55%), linear-gradient(180deg, #0a0a23 0%, #181342 60%, #2a1d5c 100%);
    box-shadow: 0 8px 24px rgba(18, 15, 51, .32); }
.cat-head-ny > * { position: relative; z-index: 1; }
.cat-head-ny .cat-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cat-head-ny .cat-fw { position: absolute; width: 0; height: 0; }
.cat-head-ny .cat-fw i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c);
    opacity: 0; animation: cat-burst 3.2s ease-out infinite; animation-delay: inherit; }
@keyframes cat-burst {
    0%   { transform: rotate(var(--a)) translateY(0) scale(.6); opacity: 0; }
    8%   { opacity: 1; }
    60%  { transform: rotate(var(--a)) translateY(-40px) scale(1); opacity: .9; }
    100% { transform: rotate(var(--a)) translateY(-48px) scale(.4); opacity: 0; }
}
.cat-head-ny .cat-fw1 { top: 18%; left: 52%; animation-delay: 0s; }
.cat-head-ny .cat-fw2 { top: 14%; left: 64%; animation-delay: -1.1s; }
.cat-head-ny .cat-fw3 { top: 84%; left: 62%; animation-delay: -2.2s; }
.cat-head-ny .cat-fw4 { top: 86%; left: 46%; animation-delay: -1.6s; }
.cat-head-ny .cat-confetti i { position: absolute; top: -20px; left: var(--x); width: 6px; height: 10px; border-radius: 2px; background: var(--c); opacity: .85;
    animation: cat-fall var(--s) linear infinite; animation-delay: calc(var(--d) * -1); }
.cat-head-ny .cat-confetti i:nth-child(3n) { width: 8px; height: 8px; border-radius: 50%; }
@keyframes cat-fall { from { transform: translateY(0) rotate(0); } to { transform: translateY(360px) rotate(540deg); } }

.cat-head-ny .cat-crumbs { color: #f2c14e; }
.cat-head-ny .cat-crumbs a { color: #f2c14e !important; }
.cat-head-ny h1 { color: #fff; text-shadow: 0 3px 14px rgba(0, 0, 0, .35); }
.cat-head-ny .cat-desc { color: #e3def8; }
.cat-head-ny .cat-more { color: #f2c14e; }
.cat-head-ny .cat-meta { color: #e3def8; }
.cat-head-ny .sr-sort { background: rgba(6, 5, 24, .45); }
.cat-head-ny .sr-sort a { color: #e3def8 !important; }
.cat-head-ny .sr-sort a.on { color: #1a1446 !important; background: #f2c14e; box-shadow: 0 4px 12px rgba(242, 193, 78, .4); }
.cat-head-ny .sr-sort a:not(.on):hover { background: rgba(255, 255, 255, .12); }
.cat-head-ny .cat-feature .hp-card { box-shadow: 0 10px 26px rgba(4, 3, 18, .5); }
.cat-head-ny .hp-badge-feat { color: #1a1446; background: #f2c14e; }

/* Theme chips under the box */
.cat-themes-ny a { color: #2a1d5c !important; background: #e9e5fa; }
.cat-themes-ny a:hover { background: #d9d2f5; }
.cat-themes-ny a.on { color: #fff !important; background: #2a1d5c; }

@media (max-width: 600px) {
    .cat-head-ny .cat-hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cat-head-ny .cat-fw, .cat-head-ny .cat-confetti { display: none; }
}

/* ---------- Valentine's Day: rose-colored sky, hearts floating up, a beating heart ---------- */
.cat-head-vd { position: relative; overflow: hidden; color: #fff; border: 0;
    background: radial-gradient(ellipse at 80% 20%, #ff6f9c 0%, transparent 55%), linear-gradient(160deg, #8c1040 0%, #c2185b 55%, #e84a7f 100%);
    box-shadow: 0 8px 24px rgba(140, 16, 64, .3); }
.cat-head-vd > * { position: relative; z-index: 1; }
.cat-head-vd .cat-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cat-head-vd .cat-bigheart { position: absolute; top: 16px; left: 58%; width: 62px; height: 58px; filter: drop-shadow(0 0 16px rgba(255, 120, 160, .7));
    animation: cat-beat 1.6s ease-in-out infinite; }
@keyframes cat-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.12); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } }
.cat-head-vd .cat-hearts i { position: absolute; bottom: -36px; left: var(--x); width: var(--w); height: var(--w); opacity: .8;
    animation: cat-riseup var(--s) ease-in infinite; animation-delay: calc(var(--d) * -1); }
@keyframes cat-riseup { 0% { transform: translate(0, 0) rotate(-8deg); opacity: 0; } 10% { opacity: .85; }
    50% { transform: translate(14px, -170px) rotate(8deg); } 100% { transform: translate(-8px, -340px) rotate(-6deg); opacity: 0; } }
.cat-head-vd .cat-deco svg { display: block; width: 100%; height: 100%; }

.cat-head-vd .cat-crumbs { color: #ffd1e0; }
.cat-head-vd .cat-crumbs a { color: #ffd1e0 !important; }
.cat-head-vd h1 { color: #fff; text-shadow: 0 3px 14px rgba(0, 0, 0, .3); }
.cat-head-vd .cat-desc { color: #ffe3ec; }
.cat-head-vd .cat-more { color: #fff; }
.cat-head-vd .cat-meta { color: #ffe3ec; }
.cat-head-vd .sr-sort { background: rgba(90, 8, 40, .35); }
.cat-head-vd .sr-sort a { color: #ffe3ec !important; }
.cat-head-vd .sr-sort a.on { color: #c2185b !important; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
.cat-head-vd .sr-sort a:not(.on):hover { background: rgba(255, 255, 255, .14); }
.cat-head-vd .cat-feature .hp-card { box-shadow: 0 10px 26px rgba(90, 8, 40, .4); }
.cat-head-vd .hp-badge-feat { color: #fff; background: #c2185b; }

/* Theme chips under the box */
.cat-themes-vd a { color: #a3164a !important; background: #ffe0ea; }
.cat-themes-vd a:hover { background: #ffcadb; }
.cat-themes-vd a.on { color: #fff !important; background: #c2185b; }

@media (max-width: 600px) {
    .cat-head-vd .cat-bigheart { left: auto; right: 14px; top: 12px; width: 38px; height: 35px; }
    .cat-head-vd .cat-hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cat-head-vd .cat-bigheart { animation: none; }
    .cat-head-vd .cat-hearts { display: none; }
}

/* ---------- Birthday: evening-teal party sky (like the home Birthday banner), pennant garland, confetti, balloons ---------- */
.cat-head-bd { position: relative; overflow: hidden; color: #fff; border: 0; padding-top: 46px;
    background: radial-gradient(ellipse at 85% 10%, rgba(242, 112, 156, .5) 0%, transparent 55%), radial-gradient(ellipse at 10% 100%, rgba(155, 140, 242, .35) 0%, transparent 50%), linear-gradient(160deg, #0b3a47 0%, #11596a 55%, #1b7486 100%);
    box-shadow: 0 8px 24px rgba(11, 58, 71, .3); }
.cat-head-bd > * { position: relative; z-index: 1; }
.cat-head-bd .cat-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cat-head-bd .cat-deco svg { display: block; width: 100%; height: 100%; }
.cat-head-bd .cat-garland { position: absolute; top: 0; left: -2%; width: 104%; height: 40px; transform-origin: top center; animation: cat-swing 5s ease-in-out infinite; }
.cat-head-bd .gl-str { fill: none; stroke: #c9a46a; stroke-width: 2; }
@keyframes cat-swing { 0%, 100% { transform: rotate(-.6deg); } 50% { transform: rotate(.6deg); } }
.cat-head-bd .cat-confetti i { position: absolute; top: -20px; left: var(--x); width: 6px; height: 10px; border-radius: 2px; background: var(--c); opacity: .85;
    animation: cat-fall var(--s) linear infinite; animation-delay: calc(var(--d) * -1); }
.cat-head-bd .cat-confetti i:nth-child(3n) { width: 8px; height: 8px; border-radius: 50%; }
.cat-head-bd .cat-balloon { position: absolute; bottom: -120px; left: var(--x); width: 40px; height: 87px; opacity: .95;
    animation: cat-balloon var(--s) linear infinite; animation-delay: calc(var(--d) * -1); }
.cat-head-bd .cat-balloon svg { animation: cat-sway 3.5s ease-in-out infinite alternate; transform-origin: top center; }
.cat-head-bd .bl-str { fill: none; stroke: #b9d3da; stroke-width: 1.5; }
.cat-head-bd .bl-shine { fill: rgba(255, 255, 255, .5); }
@keyframes cat-balloon { from { transform: translateY(0); } to { transform: translateY(-480px); } }
@keyframes cat-sway { from { transform: rotate(-6deg) translateX(-5px); } to { transform: rotate(6deg) translateX(5px); } }

.cat-head-bd .cat-crumbs { color: #ffcf5c; }
.cat-head-bd .cat-crumbs a { color: #ffcf5c !important; }
.cat-head-bd h1 { color: #fff; text-shadow: 0 3px 14px rgba(0, 0, 0, .35); }
.cat-head-bd .cat-desc { color: #dff3f6; }
.cat-head-bd .cat-more { color: #ffcf5c; }
.cat-head-bd .cat-meta { color: #dff3f6; }
.cat-head-bd .sr-sort { background: rgba(5, 30, 38, .4); }
.cat-head-bd .sr-sort a { color: #dff3f6 !important; }
.cat-head-bd .sr-sort a.on { color: #0b3a47 !important; background: #ffcf5c; box-shadow: 0 4px 12px rgba(255, 207, 92, .35); }
.cat-head-bd .sr-sort a:not(.on):hover { background: rgba(255, 255, 255, .12); }
.cat-head-bd .cat-feature .hp-card { box-shadow: 0 10px 26px rgba(3, 24, 30, .45); }
.cat-head-bd .hp-badge-feat { color: #3a2a00; background: #ffcf5c; }

/* Theme chips under the box */
.cat-themes-bd a { color: #11596a !important; background: #dff3f6; }
.cat-themes-bd a:hover { background: #c9eaf0; }
.cat-themes-bd a.on { color: #fff !important; background: #11596a; }

@media (max-width: 600px) {
    .cat-head-bd { padding-top: 40px; }
    .cat-head-bd .cat-balloon { left: auto; right: 4px; width: 30px; height: 65px; }
    .cat-head-bd .cat-hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cat-head-bd .cat-garland, .cat-head-bd .cat-balloon svg { animation: none; }
    .cat-head-bd .cat-confetti, .cat-head-bd .cat-balloon { display: none; }
}

/* ---------- Fun & Games: arcade purple-to-blue sky, faint grid, tumbling die, puzzle piece, falling blocks ---------- */
.cat-head-gm { position: relative; overflow: hidden; color: #fff; border: 0;
    background: radial-gradient(ellipse at 85% 20%, #8a3fe0 0%, transparent 55%), linear-gradient(135deg, #2d1466 0%, #5b23b0 50%, #1f86d1 100%);
    box-shadow: 0 8px 24px rgba(45, 20, 102, .3); }
.cat-head-gm > * { position: relative; z-index: 1; }
.cat-head-gm .cat-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cat-head-gm .cat-deco svg { display: block; width: 100%; height: 100%; }
.cat-head-gm .cat-grid { position: absolute; inset: 0; opacity: .14;
    background-image: linear-gradient(rgba(255, 255, 255, .7) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .7) 1px, transparent 1px);
    background-size: 32px 32px; mask-image: linear-gradient(180deg, transparent, #000 70%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%); }
.cat-head-gm .cat-die { position: absolute; top: 12%; left: 60%; width: 38px; height: 38px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .3));
    animation: cat-tumble 7s ease-in-out infinite; }
@keyframes cat-tumble { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(180deg); } }
.cat-head-gm .cat-piece { position: absolute; bottom: 10%; left: 58%; width: 40px; height: 40px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .25));
    animation: cat-drift 9s ease-in-out infinite alternate; }
@keyframes cat-drift { from { transform: translate(0, 0) rotate(-12deg); } to { transform: translate(-10px, 8px) rotate(14deg); } }
.cat-head-gm .cat-block { position: absolute; top: -44px; left: var(--x); width: 48px; height: 32px; animation: cat-drop var(--s) linear infinite; animation-delay: calc(var(--d) * -1); }
@keyframes cat-drop { from { transform: translateY(0) rotate(0); } to { transform: translateY(330px) rotate(90deg); } }

.cat-head-gm .cat-crumbs { color: #ffe08a; }
.cat-head-gm .cat-crumbs a { color: #ffe08a !important; }
.cat-head-gm h1 { color: #fff; text-shadow: 0 3px 14px rgba(0, 0, 0, .35); }
.cat-head-gm .cat-desc { color: #ece4ff; }
.cat-head-gm .cat-more { color: #ffe08a; }
.cat-head-gm .cat-meta { color: #ece4ff; }
.cat-head-gm .sr-sort { background: rgba(20, 8, 50, .4); }
.cat-head-gm .sr-sort a { color: #ece4ff !important; }
.cat-head-gm .sr-sort a.on { color: #2d1466 !important; background: #ffcf3f; box-shadow: 0 4px 12px rgba(255, 207, 63, .4); }
.cat-head-gm .sr-sort a:not(.on):hover { background: rgba(255, 255, 255, .12); }
.cat-head-gm .cat-feature .hp-card { box-shadow: 0 10px 26px rgba(20, 8, 50, .45); }
.cat-head-gm .hp-badge-feat { color: #2d1466; background: #ffcf3f; }

/* Theme chips under the box */
.cat-themes-gm a { color: #4a1f99 !important; background: #ece4ff; }
.cat-themes-gm a:hover { background: #ddd0fb; }
.cat-themes-gm a.on { color: #fff !important; background: #5b23b0; }

@media (max-width: 600px) {
    .cat-head-gm .cat-die { left: auto; right: 14px; top: 12px; width: 30px; height: 30px; }
    .cat-head-gm .cat-hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cat-head-gm .cat-die, .cat-head-gm .cat-piece { animation: none; }
    .cat-head-gm .cat-block { display: none; }
}

/* ---------- Inspirational: soft pastel dawn (like the home Inspirational banner), warm sun with turning rays, a drifting cloud, a dove, sparkles ---------- */
.cat-head-in { position: relative; overflow: hidden; color: #2b2440; border: 0;
    background: linear-gradient(160deg, #fde6d4 0%, #f5e4f2 40%, #e3e3f8 70%, #d3ebf7 100%);
    box-shadow: 0 6px 20px rgba(122, 92, 184, .14); }
.cat-head-in > * { position: relative; z-index: 1; }
.cat-head-in .cat-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cat-head-in .cat-deco svg { display: block; width: 100%; height: 100%; }
.cat-head-in .cat-rays { position: absolute; top: -230px; left: calc(64% - 230px); width: 460px; height: 460px; border-radius: 50%; opacity: .5;
    background: repeating-conic-gradient(from 0deg, rgba(255, 214, 140, .55) 0deg 6deg, transparent 6deg 18deg);
    mask-image: radial-gradient(circle, #000 0%, transparent 62%); -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 62%);
    animation: cat-spin 60s linear infinite; }
@keyframes cat-spin { to { transform: rotate(360deg); } }
.cat-head-in .cat-sunball { position: absolute; top: -50px; left: calc(64% - 50px); width: 100px; height: 100px; border-radius: 50%;
    background: radial-gradient(circle, #fff7d6 0%, #ffe3a3 55%, rgba(255, 210, 140, 0) 72%); animation: cat-glow 6s ease-in-out infinite alternate; }
@keyframes cat-glow { to { transform: scale(1.12); opacity: .8; } }
.cat-head-in .cat-cloud { position: absolute; bottom: 6%; left: -140px; width: 120px; height: 50px; opacity: .85;
    filter: drop-shadow(0 4px 6px rgba(120, 100, 160, .12)); animation: cat-cloudmove 80s linear infinite; animation-delay: -30s; }
@keyframes cat-cloudmove { from { transform: translateX(0); } to { transform: translateX(1300px); } }
.cat-head-in .cat-dove { position: absolute; top: 58%; left: -70px; width: 54px; height: 29px; fill: #fff; stroke: #b7a6d8; stroke-width: 1.2;
    filter: drop-shadow(0 3px 5px rgba(90, 70, 130, .35)); animation: cat-fly 26s linear infinite; animation-delay: -9s; }
.cat-head-in .cat-dove span { display: block; width: 100%; height: 100%; animation: cat-swoop 4s ease-in-out infinite; }
.cat-head-in .cat-dove .wl, .cat-head-in .cat-dove .wr { transform-box: fill-box; animation: cat-flap .7s ease-in-out infinite alternate; }
.cat-head-in .cat-dove .wl { transform-origin: right bottom; }
.cat-head-in .cat-dove .wr { transform-origin: left bottom; }
@keyframes cat-fly { from { transform: translateX(0); } to { transform: translateX(1300px); } }
@keyframes cat-swoop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes cat-flap { from { transform: scaleY(1); } to { transform: scaleY(-.35); } }
.cat-head-in .cat-sparkles i { position: absolute; width: 12px; height: 12px; background: #f6c453;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: cat-sparkle 2.6s ease-in-out infinite; }
.cat-head-in .cat-sparkles i:nth-child(1) { top: 30%; left: 56%; }
.cat-head-in .cat-sparkles i:nth-child(2) { top: 80%; left: 62%; animation-delay: -.9s; background: #b7a6d8; }
.cat-head-in .cat-sparkles i:nth-child(3) { top: 14%; left: 94%; animation-delay: -1.7s; }
.cat-head-in .cat-sparkles i:nth-child(4) { top: 86%; left: 48%; animation-delay: -.4s; background: #b7a6d8; }
@keyframes cat-sparkle { 0%, 100% { transform: scale(.3) rotate(0); opacity: .2; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }

.cat-head-in .cat-crumbs { color: #6a4ca8; }
.cat-head-in .cat-crumbs a { color: #6a4ca8 !important; }
.cat-head-in h1 { color: #3a2d5c; }
.cat-head-in .cat-desc { color: #4a4163; }
.cat-head-in .cat-more { color: #6a4ca8; }
.cat-head-in .cat-meta { color: #4a4163; }
.cat-head-in .sr-sort { background: rgba(255, 255, 255, .65); }
.cat-head-in .sr-sort a { color: #4a4163 !important; }
.cat-head-in .sr-sort a.on { color: #fff !important; background: #7a5cb8; box-shadow: 0 4px 12px rgba(122, 92, 184, .3); }
.cat-head-in .cat-feature .hp-card { box-shadow: 0 10px 24px rgba(90, 70, 130, .2); }
.cat-head-in .hp-badge-feat { color: #fff; background: #8a6cc4; }

/* Theme chips under the box */
.cat-themes-in a { color: #5a3f96 !important; background: #ede6f8; }
.cat-themes-in a:hover { background: #e0d5f4; }
.cat-themes-in a.on { color: #fff !important; background: #7a5cb8; }

@media (max-width: 600px) {
    .cat-head-in .cat-rays { left: auto; right: -260px; }
    .cat-head-in .cat-sunball { left: auto; right: -30px; }
    .cat-head-in .cat-hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cat-head-in .cat-rays, .cat-head-in .cat-sunball, .cat-head-in .cat-sparkles i { animation: none; }
    .cat-head-in .cat-dove, .cat-head-in .cat-cloud { display: none; }
}

/* =====================================================================================================================
   Newer themes (inc/cat_themes.php CAT_THEMES_NEW): shared rules driven by variables, plus a small block per theme.
   --gap: where decorations sit, between the text and the featured card (or near the right edge without one / on phones).
   ===================================================================================================================== */
.cat-themed { position: relative; overflow: hidden; border: 0; color: var(--cat-text); background: var(--cat-bg);
    box-shadow: 0 8px 24px var(--cat-shadow, rgba(0, 0, 0, .2)); --gap: 62%; }
.cat-themed.cat-head-plain { --gap: 84%; }
.cat-themed > * { position: relative; z-index: 1; }
.cat-themed .cat-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cat-themed .cat-deco svg { display: block; width: 100%; height: 100%; }
.cat-themed .cat-crumbs { color: var(--cat-link); }
.cat-themed .cat-crumbs a { color: var(--cat-link) !important; }
.cat-themed h1 { color: var(--cat-title); text-shadow: var(--cat-title-shadow, 0 3px 14px rgba(0, 0, 0, .35)); }
.cat-themed .cat-desc, .cat-themed .cat-meta { color: var(--cat-text); }
.cat-themed .cat-more { color: var(--cat-link); }
.cat-themed .sr-sort { background: var(--cat-pill, rgba(0, 0, 0, .3)); }
.cat-themed .sr-sort a { color: var(--cat-text) !important; }
.cat-themed .sr-sort a.on { color: var(--cat-on-fg) !important; background: var(--cat-on-bg); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
.cat-themed .sr-sort a:not(.on):hover { background: var(--cat-hover, rgba(255, 255, 255, .14)); }
.cat-themed .cat-feature .hp-card { box-shadow: 0 10px 26px var(--cat-card-shadow, rgba(0, 0, 0, .35)); }
.cat-themed .hp-badge-feat { color: var(--cat-badge-fg); background: var(--cat-badge-bg); }
.cat-themed-chips a { color: var(--chip-fg) !important; background: var(--chip-bg); }
.cat-themed-chips a:hover { background: var(--chip-hover); }
.cat-themed-chips a.on { color: var(--chip-on-fg, #fff) !important; background: var(--chip-on-bg); }
/* Light themes: dark text, no glow on the title, light pill behind the sort buttons */
.cat-themed.cat-light { --cat-title-shadow: none; --cat-pill: rgba(255, 255, 255, .65); --cat-hover: rgba(255, 255, 255, .7); --cat-card-shadow: rgba(60, 50, 90, .2); }

/* Shared moving parts */
.cat-fx-fall i, .cat-fx-rise i { position: absolute; left: var(--x); width: var(--w); height: var(--w); animation-duration: var(--s);
    animation-iteration-count: infinite; animation-delay: calc(var(--d) * -1); }
.cat-fx-fall i { top: -36px; animation-name: cat-fx-fall; animation-timing-function: linear; }
.cat-fx-rise i { bottom: -36px; animation-name: cat-fx-rise; animation-timing-function: ease-in; }
@keyframes cat-fx-fall { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(18px, 170px) rotate(160deg); } 100% { transform: translate(-8px, 360px) rotate(320deg); } }
@keyframes cat-fx-rise { 0% { transform: translate(0, 0) rotate(-8deg); opacity: 0; } 10% { opacity: .9; } 50% { transform: translate(14px, -170px) rotate(8deg); }
    100% { transform: translate(-8px, -350px) rotate(-6deg); opacity: 0; } }
.cat-fx-fly { position: absolute; top: var(--y); left: -70px; width: 50px; height: 26px; animation: cat-fx-fly var(--s) linear infinite; animation-delay: calc(var(--d) * -1); }
.cat-fx-fly span { display: block; width: 100%; height: 100%; animation: cat-fx-swoop 3s ease-in-out infinite; }
.cat-fx-fly .wl, .cat-fx-fly .wr { transform-box: fill-box; animation: cat-fx-flap var(--flap, .6s) ease-in-out infinite alternate; }
.cat-fx-fly .wl { transform-origin: right center; }
.cat-fx-fly .wr { transform-origin: left center; }
@keyframes cat-fx-fly { from { left: -70px; } to { left: 105%; } }
@keyframes cat-fx-swoop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes cat-fx-flap { from { transform: scaleY(1); } to { transform: scaleY(-.35); } }
.cat-fx-dove { fill: #fff; stroke: #d9ccff; stroke-width: 1.2; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .3)); }
.cat-fx-small { width: 36px; height: 19px; }
.cat-fx-bfly { width: 34px; height: 26px; --flap: .25s; }
.cat-fx-burst { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.cat-fx-burst i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c);
    opacity: 0; animation: cat-fx-burst 3.2s ease-out infinite; animation-delay: var(--d); }
@keyframes cat-fx-burst { 0% { transform: rotate(var(--a)) translateY(0) scale(.6); opacity: 0; } 8% { opacity: 1; }
    60% { transform: rotate(var(--a)) translateY(-40px) scale(1); opacity: .9; } 100% { transform: rotate(var(--a)) translateY(-48px) scale(.4); opacity: 0; } }
.cat-fx-sparkle i { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--w); background: var(--c);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: cat-fx-sparkle 2.6s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
@keyframes cat-fx-sparkle { 0%, 100% { transform: scale(.3) rotate(0); opacity: .2; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
.cat-fx-stars { position: absolute; inset: 0 0 35% 0; background-image:
    radial-gradient(1.5px 1.5px at 8% 14%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 24% 32%, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 40% 10%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 52% 26%, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 66% 8%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 74% 34%, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 92% 12%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 97% 44%, #fff 50%, transparent 52%);
    animation: cat-fx-twinkle 3.5s ease-in-out infinite alternate; }
@keyframes cat-fx-twinkle { from { opacity: .45; } to { opacity: 1; } }
.cat-fx-rays { position: absolute; width: 420px; height: 420px; border-radius: 50%; opacity: .45;
    background: repeating-conic-gradient(from 0deg, rgba(255, 214, 140, .55) 0deg 6deg, transparent 6deg 18deg);
    mask-image: radial-gradient(circle, #000 0%, transparent 62%); -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 62%); animation: cat-fx-spin 60s linear infinite; }
@keyframes cat-fx-spin { to { transform: rotate(360deg); } }
.cat-fx-sway i { position: absolute; left: var(--x); transform-origin: bottom center; animation: cat-fx-sway 3.4s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }
@keyframes cat-fx-sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.cat-fx-bunting { position: absolute; top: 0; left: -1%; width: 102%; height: 40px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); }
.cat-fx-grass { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: linear-gradient(180deg, #7cc06a, #5aa64d); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
@keyframes cat-fx-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }
@keyframes cat-fx-glow { to { transform: scale(1.1); opacity: .85; } }

/* ---------- Halloween ---------- */
.cat-head-hw, .cat-themes-hw { --cat-bg: radial-gradient(ellipse at 66% 10%, #5a3f8f 0%, transparent 55%), linear-gradient(180deg, #1b1035 0%, #2c1a4f 55%, #432561 100%);
    --cat-title: #fff; --cat-title-shadow: 0 3px 14px rgba(255, 140, 40, .45); --cat-text: #e8defa; --cat-link: #ffcf8a; --cat-on-bg: #f28c28; --cat-on-fg: #fff;
    --cat-badge-bg: #ffb347; --cat-badge-fg: #1b1035; --chip-fg: #4a2a7a; --chip-bg: #efe6fb; --chip-hover: #e2d4f7; --chip-on-bg: #f28c28; }
.cat-head-hw .cat-hw-moon { position: absolute; top: 18px; left: calc(var(--gap) - 30px); width: 60px; height: 60px; border-radius: 50%;
    background: radial-gradient(circle at 38% 35%, #fffbe6 0%, #ffe9a8 45%, #f5c96a 100%); box-shadow: 0 0 30px 8px rgba(255, 220, 140, .35); animation: cat-fx-glow 5s ease-in-out infinite alternate; }
.cat-head-hw .cat-hw-bat { fill: #0c0618; --flap: .32s; }
.cat-head-hw .cat-hw-bat2 { width: 36px; height: 18px; }
.cat-head-hw .cat-hw-pumpkin { position: absolute; bottom: 8px; left: calc(var(--gap) - 28px); width: 56px; height: 48px; }
.cat-head-hw .pk-face { filter: drop-shadow(0 0 5px #ffb02e); animation: cat-hw-flicker 2.2s steps(1) infinite; }
@keyframes cat-hw-flicker { 0%, 100% { opacity: 1; } 40% { opacity: .65; } 45% { opacity: 1; } 70% { opacity: .8; } }

/* ---------- Veterans Day ---------- */
.cat-head-vt, .cat-themes-vt { --cat-bg: radial-gradient(ellipse at 80% 20%, #2f4a8c 0%, transparent 60%), linear-gradient(180deg, #0f1c3f 0%, #1b2f63 60%, #24407c 100%);
    --cat-title: #fff; --cat-text: #dfe6f5; --cat-link: #f6c453; --cat-on-bg: #c8102e; --cat-on-fg: #fff; --cat-badge-bg: #f6c453; --cat-badge-fg: #13224a;
    --chip-fg: #13224a; --chip-bg: #e3e9f6; --chip-hover: #d3dcf0; --chip-on-bg: #c8102e; }
.cat-head-vt { padding-top: 48px; }

/* ---------- Martin Luther King Jr. Day ---------- */
.cat-head-ml, .cat-themes-ml { --cat-bg: linear-gradient(180deg, #141a3a 0%, #2c2a5e 38%, #6b3f6e 64%, #d9785a 88%, #f6b866 100%);
    --cat-title: #fff; --cat-text: #f1ecf8; --cat-link: #f6c453; --cat-on-bg: #f6c453; --cat-on-fg: #2c2a5e; --cat-badge-bg: #f6c453; --cat-badge-fg: #2c2a5e;
    --chip-fg: #2c2a5e; --chip-bg: #ece8f6; --chip-hover: #ddd6f0; --chip-on-bg: #6b3f6e; }
.cat-head-ml .cat-ml-sun { position: absolute; bottom: -46px; left: calc(var(--gap) - 50px); width: 100px; height: 100px; border-radius: 50%;
    background: radial-gradient(circle, #fff6d8 0%, #ffd27a 48%, rgba(255, 170, 90, 0) 72%); animation: cat-fx-glow 6s ease-in-out infinite alternate; }
.cat-head-ml .cat-ml-rays { bottom: -210px; left: calc(var(--gap) - 210px); opacity: .4; }

/* ---------- St. Patrick's Day ---------- */
.cat-head-sp, .cat-themes-sp { --cat-bg: radial-gradient(ellipse at 80% 15%, #5fbf6a 0%, transparent 55%), linear-gradient(170deg, #145a2e 0%, #1f7a3f 55%, #2f9a4f 100%);
    --cat-title: #fff; --cat-text: #e2f5e2; --cat-link: #f6c453; --cat-on-bg: #f6c453; --cat-on-fg: #145a2e; --cat-badge-bg: #f6c453; --cat-badge-fg: #145a2e;
    --chip-fg: #145a2e; --chip-bg: #e4f4e6; --chip-hover: #d2ecd6; --chip-on-bg: #1f7a3f; }
.cat-head-sp .cat-sp-rainbow { position: absolute; top: 12px; left: calc(var(--gap) - 55px); width: 110px; height: 55px; opacity: .8; }
.cat-head-sp .cat-sp-coins i { position: absolute; bottom: 10px; width: 22px; height: 22px; animation: cat-fx-bob 2.6s ease-in-out infinite; }
.cat-head-sp .cat-sp-coins i:nth-child(1) { left: calc(var(--gap) - 26px); }
.cat-head-sp .cat-sp-coins i:nth-child(2) { left: calc(var(--gap) - 4px); bottom: 16px; animation-delay: -.9s; }
.cat-head-sp .cat-sp-coins i:nth-child(3) { left: calc(var(--gap) + 18px); animation-delay: -1.7s; }

/* ---------- Spring (light) ---------- */
.cat-head-sg, .cat-themes-sg { --cat-bg: linear-gradient(170deg, #d7f0ff 0%, #eaf8ff 45%, #fff3e3 100%); --cat-title: #1f3d4c; --cat-text: #3b4a52; --cat-link: #2e7d3a;
    --cat-on-bg: #4cae55; --cat-on-fg: #fff; --cat-badge-bg: #ff6f91; --cat-badge-fg: #fff; --cat-shadow: rgba(60, 120, 160, .15);
    --chip-fg: #2e7d3a; --chip-bg: #e2f4e4; --chip-hover: #d0ecd3; --chip-on-bg: #4cae55; }
.cat-head-sg .cat-sg-sun { position: absolute; top: -34px; left: calc(var(--gap) - 40px); width: 80px; height: 80px; border-radius: 50%;
    background: radial-gradient(circle, #fff7c2 0%, #ffd95a 55%, rgba(255, 210, 90, 0) 72%); animation: cat-fx-glow 6s ease-in-out infinite alternate; }
.cat-head-sg .cat-sg-rays { top: -210px; left: calc(var(--gap) - 210px); opacity: .5; }

/* ---------- Easter (light) ---------- */
.cat-head-ea, .cat-themes-ea { --cat-bg: linear-gradient(170deg, #ffe7cf 0%, #fff4e6 40%, #f0e8fb 75%, #e2f2fb 100%); --cat-title: #3a2d5c; --cat-text: #4a4163;
    --cat-link: #6a4ca8; --cat-on-bg: #7a5cb8; --cat-on-fg: #fff; --cat-badge-bg: #9b7bd6; --cat-badge-fg: #fff; --cat-shadow: rgba(122, 92, 184, .15);
    --chip-fg: #5a3f96; --chip-bg: #efe8fa; --chip-hover: #e2d7f6; --chip-on-bg: #7a5cb8; }
.cat-head-ea .cat-ea-sun { position: absolute; top: -40px; left: calc(var(--gap) - 45px); width: 90px; height: 90px; border-radius: 50%;
    background: radial-gradient(circle, #fff7d6 0%, #ffe3a3 55%, rgba(255, 210, 140, 0) 72%); animation: cat-fx-glow 6s ease-in-out infinite alternate; }
.cat-head-ea .cat-ea-rays { top: -210px; left: calc(var(--gap) - 210px); opacity: .55; }
.cat-head-ea .cat-ea-eggs i { position: absolute; bottom: 4px; width: 24px; height: 30px; transform-origin: bottom center; animation: cat-fx-bob 2.6s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
.cat-head-ea .cat-ea-eggs i:nth-child(1) { left: calc(var(--gap) - 34px); }
.cat-head-ea .cat-ea-eggs i:nth-child(2) { left: calc(var(--gap) - 8px); width: 20px; height: 25px; }
.cat-head-ea .cat-ea-eggs i:nth-child(3) { left: calc(var(--gap) + 14px); }

/* ---------- Earth Day (light) ---------- */
.cat-head-ed, .cat-themes-ed { --cat-bg: linear-gradient(175deg, #bfe5fa 0%, #e2f4fd 60%, #eaf7e6 100%); --cat-title: #1d4a32; --cat-text: #345043; --cat-link: #1f6e43;
    --cat-on-bg: #2e8b57; --cat-on-fg: #fff; --cat-badge-bg: #2e8b57; --cat-badge-fg: #fff; --cat-shadow: rgba(46, 139, 87, .15);
    --chip-fg: #1f6e43; --chip-bg: #e2f2e6; --chip-hover: #cfe8d6; --chip-on-bg: #2e8b57; }
.cat-head-ed .cat-ed-globe { position: absolute; top: 18px; left: calc(var(--gap) - 32px); width: 64px; height: 64px; overflow: hidden; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #7fd0ff 0%, #2a8fd6 60%, #1b5f9e 100%); box-shadow: inset -7px -6px 0 rgba(0, 0, 0, .15), 0 0 18px rgba(80, 170, 240, .5); }
.cat-head-ed .cat-ed-land { position: absolute; top: 0; left: 0; display: flex; width: 400%; height: 100%; animation: cat-ed-turn 18s linear infinite; }
.cat-head-ed .cat-ed-land svg { flex: 0 0 50%; height: 100%; }
@keyframes cat-ed-turn { to { transform: translateX(-50%); } }

/* ---------- Mother's Day (light) ---------- */
.cat-head-md, .cat-themes-md { --cat-bg: linear-gradient(160deg, #fde3ee 0%, #f8e7f7 45%, #ece5fb 100%); --cat-title: #5a1f3c; --cat-text: #5a4352; --cat-link: #c23a6e;
    --cat-on-bg: #d6457a; --cat-on-fg: #fff; --cat-badge-bg: #e05a8a; --cat-badge-fg: #fff; --cat-shadow: rgba(214, 69, 122, .14);
    --chip-fg: #a8336a; --chip-bg: #fbe3ee; --chip-hover: #f7d0e1; --chip-on-bg: #d6457a; }
.cat-head-md .cat-md-tulips i { bottom: -4px; width: 22px; height: 60px; }

/* ---------- Memorial Day ---------- */
.cat-head-mm, .cat-themes-mm { --cat-bg: linear-gradient(180deg, #121c3d 0%, #26346a 55%, #6d4d6b 85%, #c27a5a 100%); --cat-title: #fff; --cat-text: #e9e6f0;
    --cat-link: #e7e2d6; --cat-on-bg: #b0122b; --cat-on-fg: #fff; --cat-badge-bg: #e7e2d6; --cat-badge-fg: #1a2547;
    --chip-fg: #1a2547; --chip-bg: #e6e9f3; --chip-hover: #d6dbea; --chip-on-bg: #b0122b; }
.cat-head-mm .cat-mm-poppies i { bottom: -6px; width: 26px; height: 58px; }

/* ---------- Father's Day ---------- */
.cat-head-fd, .cat-themes-fd { --cat-bg: radial-gradient(ellipse at 80% 20%, #2f6aa6 0%, transparent 55%), linear-gradient(170deg, #102846 0%, #1b4170 55%, #23578f 100%);
    --cat-title: #fff; --cat-text: #dce8f7; --cat-link: #f6c453; --cat-on-bg: #f6c453; --cat-on-fg: #15325a; --cat-badge-bg: #f6c453; --cat-badge-fg: #15325a;
    --chip-fg: #15325a; --chip-bg: #e2ebf6; --chip-hover: #d0dff0; --chip-on-bg: #1b4170; }
.cat-head-fd .cat-fd-ties i { top: -10px; width: 26px; height: 78px; transform-origin: top center; }

/* ---------- Independence Day ---------- */
.cat-head-j4, .cat-themes-j4 { --cat-bg: radial-gradient(ellipse at 75% 30%, #27407e 0%, transparent 55%), linear-gradient(180deg, #08122e 0%, #13245a 60%, #1d2f6b 100%);
    --cat-title: #fff; --cat-text: #dfe6f5; --cat-link: #f6c453; --cat-on-bg: #c8102e; --cat-on-fg: #fff; --cat-badge-bg: #fff; --cat-badge-fg: #0e1b3d;
    --chip-fg: #0e1b3d; --chip-bg: #e3e9f6; --chip-hover: #d3dcf0; --chip-on-bg: #c8102e; }
.cat-head-j4 { padding-top: 48px; }

/* ---------- Labor Day (light) ---------- */
.cat-head-lb, .cat-themes-lb { --cat-bg: linear-gradient(180deg, #a9dcf7 0%, #d8effb 55%, #fdf1d8 100%); --cat-title: #17384a; --cat-text: #33515f; --cat-link: #1f6f93;
    --cat-on-bg: #1f7fa8; --cat-on-fg: #fff; --cat-badge-bg: #e86a2c; --cat-badge-fg: #fff; --cat-shadow: rgba(31, 127, 168, .15);
    --chip-fg: #1f6f93; --chip-bg: #dff0f8; --chip-hover: #cbe6f3; --chip-on-bg: #1f7fa8; }
.cat-head-lb { padding-bottom: 34px; }
.cat-head-lb .cat-lb-sun { position: absolute; top: -34px; left: calc(var(--gap) - 40px); width: 80px; height: 80px; border-radius: 50%;
    background: radial-gradient(circle, #fff7d6 0%, #ffe08a 55%, rgba(255, 210, 120, 0) 72%); animation: cat-fx-glow 6s ease-in-out infinite alternate; }
.cat-head-lb .cat-lb-rays { top: -210px; left: calc(var(--gap) - 210px); opacity: .5; }
.cat-head-lb .cat-lb-cloud { position: absolute; top: 34%; left: calc(var(--gap) - 34px); width: 70px; height: 30px; opacity: .9; }
.cat-head-lb .cat-fx-gull { stroke: #8fb3c6; width: 40px; height: 21px; }
.cat-head-lb .cat-lb-boat { position: absolute; bottom: 12px; left: calc(var(--gap) - 18px); width: 36px; height: 36px; animation: cat-fx-bob 3s ease-in-out infinite; }
.cat-head-lb .cat-lb-waves { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; overflow: hidden; }
.cat-head-lb .cat-lb-waves div { display: flex; width: 200%; height: 100%; animation: cat-ed-turn 9s linear infinite; }
.cat-head-lb .cat-lb-waves svg { flex: 0 0 50%; height: 100%; }

/* ---------- Anniversary (new design): wine to rose with champagne gold, two rings, bubbles and hearts rising ---------- */
.cat-head-an, .cat-themes-an { --cat-bg: radial-gradient(ellipse at 66% 0%, rgba(255, 215, 160, .35) 0%, transparent 50%), linear-gradient(160deg, #3e0d1f 0%, #6e1a36 50%, #a53a5a 100%);
    --cat-title: #fff; --cat-text: #f7e6ec; --cat-link: #f3d38a; --cat-on-bg: #f3d38a; --cat-on-fg: #4a1024; --cat-badge-bg: #f3d38a; --cat-badge-fg: #4a1024;
    --chip-fg: #7a1f3d; --chip-bg: #f8e6ec; --chip-hover: #f1d3de; --chip-on-bg: #a53a5a; }
.cat-head-an .cat-an-glow { position: absolute; top: 4px; left: calc(var(--gap) - 55px); width: 110px; height: 110px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 230, 170, .35) 0%, rgba(255, 230, 170, 0) 70%); animation: cat-fx-glow 5s ease-in-out infinite alternate; }
.cat-head-an .cat-an-rings { position: absolute; top: 26px; left: calc(var(--gap) - 36px); width: 72px; height: 48px; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35));
    animation: cat-fx-bob 4s ease-in-out infinite; }

/* ---------- Congratulations (new design): royal blue to violet, gold stars, a confetti burst, confetti falling ---------- */
.cat-head-cg, .cat-themes-cg { --cat-bg: radial-gradient(ellipse at 85% 15%, #6a5ae0 0%, transparent 55%), linear-gradient(135deg, #1d2b6b 0%, #2f3fa0 55%, #5a3fb0 100%);
    --cat-title: #fff; --cat-text: #e6e9ff; --cat-link: #ffd56a; --cat-on-bg: #ffd56a; --cat-on-fg: #1d2b6b; --cat-badge-bg: #ffd56a; --cat-badge-fg: #1d2b6b;
    --chip-fg: #2f3fa0; --chip-bg: #e6e9fb; --chip-hover: #d6dbf6; --chip-on-bg: #2f3fa0; }
.cat-head-cg .cat-cg-confetti i { position: absolute; top: -20px; left: var(--x); width: 6px; height: 10px; border-radius: 2px; background: var(--c); opacity: .85;
    animation: cat-cg-fall var(--s) linear infinite; animation-delay: calc(var(--d) * -1); }
.cat-head-cg .cat-cg-confetti i:nth-child(3n) { width: 8px; height: 8px; border-radius: 50%; }
@keyframes cat-cg-fall { from { transform: translateY(0) rotate(0); } to { transform: translateY(360px) rotate(540deg); } }

/* ---------- Friendship (new design, light): warm sunny peach to yellow, daisies and small hearts drifting ---------- */
.cat-head-fr, .cat-themes-fr { --cat-bg: radial-gradient(ellipse at 66% 0%, #fff4b8 0%, transparent 50%), linear-gradient(160deg, #ffe0cc 0%, #fff0d6 50%, #fff6c9 100%);
    --cat-title: #5a2e1c; --cat-text: #5c4636; --cat-link: #c84b33; --cat-on-bg: #ef6f5c; --cat-on-fg: #fff; --cat-badge-bg: #ef6f5c; --cat-badge-fg: #fff;
    --cat-shadow: rgba(239, 111, 92, .16); --chip-fg: #b8452f; --chip-bg: #ffe6dc; --chip-hover: #ffd6c6; --chip-on-bg: #ef6f5c; }
.cat-head-fr .cat-fr-sun { position: absolute; top: -40px; left: calc(var(--gap) - 50px); width: 100px; height: 100px; border-radius: 50%;
    background: radial-gradient(circle, #fffbe0 0%, #ffe27a 50%, rgba(255, 220, 120, 0) 72%); animation: cat-fx-glow 6s ease-in-out infinite alternate; }

/* Phones: no featured card, so decorations move to the right edge; fewer particles */
@media (max-width: 600px) {
    .cat-themed { --gap: 88%; }
    .cat-themed .cat-hide-sm { display: none; }
    .cat-head-vt, .cat-head-j4 { padding-top: 42px; }
}
@media (prefers-reduced-motion: reduce) {
    .cat-themed .cat-deco *, .cat-themed .cat-deco *::before { animation: none !important; }
    .cat-themed .cat-fx-fall, .cat-themed .cat-fx-rise, .cat-themed .cat-fx-fly, .cat-themed .cat-fx-burst, .cat-themed .cat-cg-confetti { display: none; }
}

/* =====================================================================================================================
   Table themes (inc/cat_themes.php CAT_THEMES_SIMPLE): colors come as inline variables; these are the generic parts.
   ===================================================================================================================== */
.cat-themed.cat-fx-topband { padding-top: 48px; }
.cat-themed.cat-fx-bottomband { padding-bottom: 34px; }
.cat-fx-orb { position: absolute; top: var(--t); left: calc(var(--gap) - var(--r) + var(--dx, 0px)); width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%;
    background: radial-gradient(circle, var(--c1) 0%, var(--c2) 55%, rgba(255, 255, 255, 0) 72%); animation: cat-fx-glow 6s ease-in-out infinite alternate; }
.cat-fx-gaprays { top: var(--t); left: calc(var(--gap) - 210px); }
.cat-fx-icon { position: absolute; top: var(--t); left: calc(var(--gap) - var(--w) / 2); width: var(--w); height: var(--h); }
.cat-fx-icon.cat-fx-bob { animation: cat-fx-bob 4s ease-in-out infinite; }
.cat-fx-icon.cat-fx-glow { filter: drop-shadow(0 0 8px var(--gl, rgba(255, 220, 140, .7))); animation: cat-fx-pulse 4s ease-in-out infinite alternate; }
@keyframes cat-fx-pulse { from { filter: drop-shadow(0 0 6px var(--gl, rgba(255, 220, 140, .6))); } to { filter: drop-shadow(0 0 18px var(--gl, rgba(255, 220, 140, .9))); } }
.cat-fx-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: cat-fx-flicker 1.4s ease-in-out infinite alternate; }
@keyframes cat-fx-flicker { 0% { transform: scale(1, 1); opacity: 1; } 50% { transform: scale(.88, 1.1); opacity: .85; } 100% { transform: scale(1.06, .94); opacity: 1; } }
.cat-fx-clockhand { transform-box: view-box; transform-origin: 30px 30px; animation: cat-fx-spin 10s linear infinite; }
.cat-fx-slow i { animation-duration: calc(var(--s) * 2.2) !important; opacity: .8; }
.cat-fx-dove-soft { stroke: #c9b78a; }
.cat-fx-gull { stroke: #8fb3c6; width: 40px; height: 21px; }
.cat-fx-streak { width: 90px; height: 6px; }
.cat-fx-streak span { animation: none; }
.cat-fx-stars-full { inset: 0; }
.cat-fx-garland { position: absolute; top: 0; left: -2%; width: 104%; height: 40px; transform-origin: top center; animation: cat-swing 5s ease-in-out infinite; }
.cat-fx-waves { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; overflow: hidden; }
.cat-fx-waves div { display: flex; width: 200%; height: 100%; animation: cat-ed-turn 9s linear infinite; }
.cat-fx-waves svg { flex: 0 0 50%; height: 100%; }
.cat-fx-boat { position: absolute; bottom: 12px; left: calc(var(--gap) - 18px); width: 36px; height: 36px; animation: cat-fx-bob 3s ease-in-out infinite; }
.cat-fx-snowedge { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; }
.cat-fx-beams i { position: absolute; bottom: 0; width: 12px; height: 100%; background: linear-gradient(0deg, rgba(190, 215, 255, .55), rgba(190, 215, 255, 0));
    filter: blur(2px); animation: cat-fx-beam 5s ease-in-out infinite alternate; }
.cat-fx-beams i:nth-child(1) { left: calc(var(--gap) - 16px); }
.cat-fx-beams i:nth-child(2) { left: calc(var(--gap) + 6px); animation-delay: -2.5s; }
@keyframes cat-fx-beam { from { opacity: .55; } to { opacity: 1; } }
.cat-fx-hang i { top: -10px; width: 26px; height: 78px; transform-origin: top center; }
.cat-fx-lanterns i { width: 30px; height: 80px; }
@media (max-width: 600px) {
    .cat-themed.cat-fx-topband { padding-top: 42px; }
    /* Phones: the text runs the full width, so a gap emblem shrinks into the top-right corner */
    .cat-themed .cat-fx-icon { top: 8px; left: auto; right: 10px; width: calc(var(--w) * .55); height: calc(var(--h) * .55); }
    .cat-themed.cat-fx-topband .cat-fx-icon { top: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .cat-themed .cat-fx-slow { display: none; }
}