@charset "UTF-8";
/* --- ZTI MASTER STYLESHEET --- */
/* ... (all existing styles remain the same) ... */

/* --- FONT DEFINITION --- */
@font-face {
    font-family: 'VT323';
    src: url('../fonts/VT323.ttf') format('truetype');
    font-display: swap; /* Prevent invisible text during load */
}

/* --- SHARED CRT & LAYOUT STYLES --- */
:root {
    /* Dynamic viewport units that ignore mobile browser chrome */
    --vh: 1vh; /* will be updated via JS to 1% of innerHeight */
    --vw: 1vw;
    
    /* Seasonal theme variables (updated dynamically via seasonal.js) */
    --season-primary: #00ffff;
    --season-secondary: #aaffee;
    --season-accent: #ccffff;
    --season-text: #aaffee;
    --season-glow: #00ffff;
    --season-background: rgba(10, 20, 30, 0.3);
    --season-scanline: rgba(170, 238, 238, 0.08);
    --season-text-shadow: 0 0 5px #00ffff;
}
html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; box-sizing: border-box; }
body { background-color: #1a1a1a; display: flex; justify-content: center; align-items: center; font-family: 'VT323', monospace; color: #aaffee; }
*, *::before, *::after { box-sizing: inherit; }
#crt-container { position: relative; width: min(98%, 1800px); height: calc(var(--vh, 1vh) * 95); max-height: calc(var(--vh, 1vh) * 95); padding: 20px; background-color: #0a0a0a; box-sizing: border-box; margin: 15px; display: flex; flex-direction: column; }
#screen { position: relative; width: 100%; flex-grow: 1; overflow: hidden; padding: 5px; box-sizing: border-box; display: flex; flex-direction: column; }
.scanlines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(170, 238, 238, 0.08) 50%, rgba(0, 0, 0, 0.25) 50%); background-size: 100% 2px; pointer-events: none; z-index: 1; }
.vignette { position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(0, 0, 0, 0.3); border-radius: 0; pointer-events: none; z-index: 2; }
#app-container { position: relative; z-index: 3; padding: 0; display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; min-height: 0; }
#data-views { display: flex; flex-direction: column; flex: 1 1 auto; overflow: hidden; min-height: 0; padding: 10px; }
.hidden { display: none !important; }

/* --- TYPOGRAPHY & NAVIGATION --- */
.title { text-align: center; color: #ccffff; text-shadow: 0 0 5px #00ffff; margin-bottom: 15px; font-size: clamp(1.6rem, 2.4rem + 0.5vw, 2.8rem); flex-shrink: 0; }
.subtitle { text-align: center; color: #99ffff; text-shadow: 0 0 4px #00ffff; margin-top: 15px; margin-bottom: 10px; font-size: clamp(1.2rem, 1.5rem + 0.4vw, 2rem); flex-shrink: 0; }
p { margin-top: 0; margin-bottom: 6px; line-height: 1.4; word-break: break-word; }
a { color: #00ffff; text-decoration: none; text-shadow: 0 0 3px #00ffff; }
a:hover { color: #ccffff; text-decoration: underline; }
.status { color: #ffffaa; text-shadow: 0 0 3px #ffff00; text-align: center; min-height: 1.8em; font-size: 1.1em; flex-shrink: 0; }
#navigation { text-align: center; margin-bottom: 20px; border-bottom: 1px dashed #557777; padding-bottom: 15px; flex-shrink: 0; }
.nav-link { display: inline-block; padding: 5px 15px; margin: 0 8px; border-bottom: 2px solid transparent; background-color: transparent; color: #aaffee; font-family: 'VT323', monospace; font-size: clamp(1rem, 1.05rem + 0.4vw, 1.3rem); cursor: pointer; text-decoration: none; text-shadow: 0 0 2px #aaffee; transition: color 0.1s ease-in-out, border-color 0.1s ease-in-out, text-shadow 0.1s ease-in-out; }
.nav-link:hover { color: #ccffff; text-shadow: 0 0 5px #00ffff; background-color: rgba(0, 255, 255, 0.1); }
.nav-link.active { color: #00ffff; text-shadow: 0 0 8px #00ffff, 0 0 12px #00ffff; border-bottom: 2px solid #00ffff; background-color: transparent; }
.fixed-footer-disclaimer { font-size: 0.9em; color: #88aaaa; margin-top: auto; text-align: center; border-top: 1px dotted #557777; padding: 10px 15px 8px 15px; flex-shrink: 0; background-color: #0a0a0a;}

/* --- LIST & CONTENT STYLES (FOR INDEX, MEMORIAM) --- */
#friends-view, #blocked-view { display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; min-height: 0; }
.list-container { margin-top: 10px; border-top: 1px dashed #aaffee; padding-top: 15px; flex-grow: 1; overflow-y: auto; padding-right: 10px; min-height: 0; }
.total-counter { font-size: 1.2em; color: #00ff00; text-shadow: 0 0 3px #00ff00; margin-bottom: 10px; text-align: center; flex-shrink: 0; }
.list-item { border-bottom: 1px dotted #557777; padding-bottom: 15px; margin-bottom: 15px; display: flex; align-items: flex-start; flex-wrap: nowrap; transition: background-color 0.2s ease-in-out; }
.list-item:last-child { border-bottom: none; }
.list-item strong { color: #00ffff; }
.item-number { font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem); color: #00ff00; text-shadow: 0 0 3px #00ff00; margin-right: 10px; flex-shrink: 0; padding-top: 4px; min-width: 30px; text-align: right; }
.item-content { display: flex; align-items: flex-start; flex-grow: 1; flex-wrap: nowrap; }
.item-details { display: flex; align-items: flex-start; flex-grow: 1; }
.profile-pic-container { position: relative; width: clamp(68px, 12vw, 100px); height: clamp(68px, 12vw, 100px); margin-right: 15px; border: 2px solid #aaffee; box-shadow: 0 0 4px rgba(0, 255, 255, 0.3); flex-shrink: 0; margin-bottom: 5px; overflow: hidden; background-color: #111; }
.profile-pic { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }

/* Lazy loading styles - show placeholder while image loads */
.profile-pic.lazy-load {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
    background-size: 200% 200%;
    animation: shimmer 1.5s ease-in-out infinite;
}

.profile-pic.lazy-loaded {
    animation: fadeIn 0.3s ease-in;
}

@keyframes shimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Hover pop/select effect */
.profile-pic-container { transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease; }
.profile-pic-container:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 18px rgba(0,255,255,0.15), 0 0 12px rgba(0,255,255,0.25) inset; border-color: #ccffff; cursor: pointer; }
.profile-pic-container:active { transform: translateY(0) scale(1.02); }

/* Modal overlay */
#pfp-modal.hidden { display: none; }
#pfp-modal { position: fixed; inset: 0; z-index: 1002; }
.pfp-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.pfp-modal-content { position: relative; z-index: 1; width: min(1125px, 96vw); max-height: 92vh; margin: 4vh auto; background: #0a0a0a; border: 1px solid #008888; box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 10px rgba(0,255,255,0.25); padding: 14px; overflow: hidden; animation: pfpModalIn 160ms ease-out; }
.pfp-modal-header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pfp-modal-meta { color: #aaffee; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfp-modal-meta .meta-sep { color: #557777; margin: 0 6px; }
/* Close button removed per request */
.pfp-modal-body { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 14px; align-items: start; }
.pfp-modal-img-wrap { border: 2px solid #aaffee; background: #111; padding: 6px; display: grid; place-items: center; }
/* Fixed square for profile image area regardless of image aspect */
.pfp-modal-img-wrap { width: 100%; aspect-ratio: 1 / 1; }
.pfp-modal-img-wrap img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }

@keyframes pfpModalIn { from { transform: translateY(6px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

/* Coupon preview with right-side fade reveal */
.pfp-modal-coupon { position: relative; margin-top: 10px; border: 1px dashed #557777; background: #0b0f0f; padding: 0; overflow-x: auto; overflow-y: hidden; display: flex; justify-content: flex-end; align-items: flex-start; width: 100%; -ms-overflow-style: none; scrollbar-width: none; }
/* Hide horizontal scrollbar visually, preserve scroll behavior */
.pfp-modal-coupon::-webkit-scrollbar { display: none; }
/* Make the coupon canvas large: align height to profile image area for parity */
.pfp-coupon-canvas { display: block; width: auto; height: auto; margin-left: auto; filter: contrast(1.02) saturate(1.02); }

/* Mask: hidden on left half -> visible on right half with smooth fade from center to right */
/* Keep right-half reveal; we will draw entire coupon but visually reveal right side */
.pfp-modal-coupon { 
    -webkit-mask-image: linear-gradient(to right,
        rgba(0,0,0,0) 1%,
        rgba(0,0,0,0.08)5%,
        rgba(0,0,0,0.2) 10%,
        rgba(0,0,0,0.6) 20%,
        rgba(0,0,0,1) 30%
    );
    mask-image: linear-gradient(to right,
        rgba(0,0,0,0) 1%,
        rgba(0,0,0,0.08) 5%,
        rgba(0,0,0,0.2) 10%,
        rgba(0,0,0,0.6) 20%,
        rgba(0,0,0,1) 30%
    );
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

@media (max-width: 720px) {
    .pfp-modal-body { grid-template-columns: 1fr; }
    .pfp-modal-meta { display: block; white-space: normal; }
}
.list-item-text { flex-grow: 1; min-width: 150px; }
.coupon-display { margin-left: auto; padding-left: 20px; text-align: right; align-self: center; }
.coupon-number { font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem); color: #ffffaa; text-shadow: 0 0 3px #ffff00; white-space: nowrap; }
.request-coupon-link { font-size: 1.1em; color: #00ff00; text-decoration: underline; white-space: nowrap; }
.redeem-button { margin-left: auto; padding: 5px 10px; background-color: #c42d33; color: #fff; border: 1px solid #ff5555; text-decoration: none; font-size: 1em; white-space: nowrap; }
.redeem-button:hover { background-color: #ff4444; }
.blocked-reason { color: #ffffaa; font-style: italic; margin-top: 5px; }
.list-item.clickable-row:hover { background-color: rgba(0, 255, 255, 0.1); border-radius: 4px; cursor: pointer; }

/* --- THE FIX IS HERE: STYLES FOR THE SEARCH BAR --- */
.search-input {
    display: block;
    width: min(700px, 80%);
    margin: 0 auto 15px auto;
    padding: 8px;
    background-color: #051818;
    border: 1px solid #008888;
    color: #aaffee;
    font-family: 'VT323', monospace;
    font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
    text-align: center;
}

/* --- GENERIC PAGE CONTENT (FOR LORE, RULES, ETC.) --- */
.page-content { padding: 10px 20px; overflow-y: auto; flex-grow: 1; min-height: 0; padding-right: 15px; text-align: left; }

/* --- COOKIE CONSENT BANNER --- */
#cookie-consent-banner { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #0a0a0a; color: #aaffee; padding: 15px; text-align: center; border-top: 1px dashed #557777; z-index: 1001; font-size: clamp(0.85rem, 0.8rem + 0.2vw, 1rem); display: none; box-sizing: border-box; }
#cookie-consent-banner p { margin: 0 0 10px; }
#cookie-consent-banner a { color: #00ffff; text-decoration: underline; }
.cookie-btn { background-color: transparent; border: 1px solid #aaffee; color: #aaffee; padding: 5px 15px; cursor: pointer; font-family: 'VT323', monospace; font-size: 1.1em; margin: 0 5px; text-shadow: 0 0 2px #aaffee; }
.cookie-btn.accept { background-color: #00ffff; color: #0a0a0a; text-shadow: none; }

/* --- CUSTOM SCROLLBAR STYLES --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #2a2a2a; }
::-webkit-scrollbar-thumb { background: #557777; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #aaffee; }

/* --- Responsive layout tweaks --- */
@media (max-width: 800px) {
    #crt-container { margin: 8px; padding: 12px; height: calc(var(--vh, 1vh) * 96); max-height: calc(var(--vh, 1vh) * 96); }
    #navigation { padding-bottom: 10px; }
    .nav-link { margin: 3px 6px; }
    .list-item { flex-wrap: wrap; }
    .coupon-display { width: 100%; text-align: left; padding-left: 0; margin-top: 8px; }
}

@media (max-width: 480px) {
    .nav-link { display: inline-block; padding: 4px 8px; }
}

/* Footer privacy link styling moved from inline */
.footer-privacy-link {
    color: #88aaaa;
    text-decoration: underline;
}

/* --- ABOUT PAGE: ORGANIZATIONAL TREE + BLUEPRINT PANEL --- */
.org-tree { margin: 14px auto 8px; width: min(900px, 95%); color: #aaffee; position: relative; }
.org-tree ul { padding-left: 0; list-style: none; position: relative; margin: 0; }
.org-tree ul ul { margin-left: 0; padding-left: 0; text-align: center; display: flex; justify-content: center; gap: 120px; margin-top: 80px; position: relative; }
.org-tree ul ul > li { position: relative; }
.org-tree li { position: relative; padding: 8px 6px; text-align: center; }

/* Connecting lines from Secretary to each department */
.org-tree > ul > li > ul::before { content: ''; position: absolute; top: -40px; left: 50%; width: 2px; height: 40px; background: #557777; transform: translateX(-50%); }

.org-tree > ul > li > ul > li:nth-child(1)::before { 
    content: ''; position: absolute; 
    top: -40px; right: calc(100% + 60px);
    width: 140px; height: 2px; background: #557777; 
    transform-origin: right center; transform: rotate(-30deg);
}
.org-tree > ul > li > ul > li:nth-child(2)::before { 
    content: ''; position: absolute; 
    top: -40px; left: 50%;
    width: 2px; height: 40px; background: #557777; 
    transform: translateX(-50%);
}
.org-tree > ul > li > ul > li:nth-child(3)::before { 
    content: ''; position: absolute; 
    top: -40px; left: calc(100% + 60px);
    width: 140px; height: 2px; background: #557777; 
    transform-origin: left center; transform: rotate(30deg);
}

.org-tree .node { display: inline-block; padding: 8px 12px; border: 1px solid #008888; box-shadow: 0 0 8px rgba(0,255,255,0.12) inset, 0 0 8px rgba(0,255,255,0.05); background: rgba(5, 20, 20, 0.8); color: #ccffff; text-shadow: 0 0 4px #00ffff; cursor: pointer; -webkit-user-select: none; user-select: none; transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; border-radius: 4px; }
.org-tree .node:hover { transform: translateY(-2px); border-color: #00a9a9; box-shadow: 0 0 10px rgba(0,255,255,0.18) inset, 0 6px 14px rgba(0,255,255,0.12); }
.org-tree .node:active { transform: translateY(0); }
.org-tree .node.root { font-weight: bold; background: rgba(10, 30, 30, 0.9); border-color: #00bbbb; }
.org-tree .node:focus { outline: 2px solid #00ffff; outline-offset: 2px; }

/* Blueprint panel */
.blueprint { position: fixed; z-index: 20; background: rgba(6, 12, 18, 0.96); border: 1px solid #0088cc; box-shadow: 0 12px 28px rgba(0,0,0,0.6), 0 0 16px rgba(0, 170, 255, 0.2); overflow: hidden; animation: bpIn 160ms ease-out; }
.blueprint.in { animation: bpIn 160ms ease-out; }
.blueprint.hidden { display: none; }
.blueprint .bp-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(0, 170, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 170, 255, 0.06) 1px, transparent 1px); background-size: 20px 20px; opacity: 0.8; }
.blueprint .bp-content { position: relative; z-index: 1; padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.blueprint h3 { margin: 0; color: #cceeff; text-shadow: 0 0 6px #00aaff; }
.blueprint p { margin: 0; color: #99cce6; }
.blueprint .bp-link { align-self: flex-start; color: #9fe7ff; text-decoration: underline; }
.blueprint .bp-link:hover { color: #c9f3ff; }
.blueprint .bp-close { position: absolute; top: 6px; right: 8px; background: transparent; color: #9fe7ff; border: 1px solid #0077aa; padding: 0 6px; font-family: 'VT323', monospace; font-size: 20px; cursor: pointer; z-index: 2; }
.blueprint .bp-close:hover { color: #c9f3ff; border-color: #00aaff; }

@keyframes bpIn { from { transform: translateY(6px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

/* --- MEMORIAM EFFECTS SETTINGS PANEL --- */
.settings-panel { margin: 15px 0; padding: 10px; background: rgba(0, 50, 50, 0.3); border: 1px solid #006666; border-radius: 4px; flex-shrink: 0; }
.settings-toggle-btn { background: rgba(0, 100, 100, 0.4); color: #00ffff; border: 1px solid #00aaaa; padding: 8px 15px; font-family: 'VT323', monospace; font-size: 1.1em; cursor: pointer; width: 100%; text-align: left; text-shadow: 0 0 3px #00ffff; transition: all 0.2s ease; }
.settings-toggle-btn:hover { background: rgba(0, 150, 150, 0.5); box-shadow: 0 0 8px rgba(0, 255, 255, 0.3); }
.settings-content { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #006666; }
.setting-group { display: flex; flex-direction: column; gap: 8px; }
.setting-label { display: flex; align-items: center; color: #aaffee; cursor: pointer; padding: 5px; transition: background 0.2s ease; }
.setting-label:hover { background: rgba(0, 255, 255, 0.1); }
.setting-label input[type="checkbox"] { margin-right: 10px; width: 18px; height: 18px; cursor: pointer; }
.setting-label span { font-size: 1.1em; }

/* --- HOVER EFFECTS --- */
.list-item.hover-enabled { 
    position: relative; 
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.4s ease, 
                background 0.4s ease;
}

.list-item.hover-enabled:hover { 
    transform: translateY(-8px) scale(1.015); 
    box-shadow: 0 8px 30px rgba(0, 255, 255, 0.4), 
                0 0 15px rgba(0, 255, 255, 0.2); 
    background: rgba(0, 100, 100, 0.15); 
    border-radius: 8px; 
    z-index: 10; 
}

.list-item.hover-enabled .extra-details { 
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 5px;
    max-height: 0; 
    overflow: hidden; 
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.4s ease,
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.list-item.hover-enabled:hover .extra-details { 
    max-height: 150px; 
    opacity: 1; 
    transform: translateY(0);
    pointer-events: auto;
}

.extra-details { 
    color: #88cccc; 
    font-size: 0.95em; 
    padding: 12px 15px; 
    background: linear-gradient(135deg, rgba(0, 60, 60, 0.95), rgba(0, 40, 40, 0.95)); 
    border: 1px solid rgba(0, 170, 170, 0.5);
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5),
                0 0 20px rgba(0, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}

/* ===== SEASONAL THEMING ===== */
/* Apply seasonal colors to key elements when data-season attribute is set */
/* Supports both html[data-season-preload] (immediate) and html[data-season-preload] body, body[data-season] (full load) */

/* Seasonal scanlines */
html[data-season-preload] .scanlines,
html[data-season-preload] body, body[data-season] .scanlines {
    background: linear-gradient(to bottom, var(--season-scanline) 50%, rgba(0, 0, 0, 0.25) 50%);
    background-size: 100% 2px;
}

/* Seasonal title glow */
html[data-season-preload] .title,
html[data-season-preload] body, body[data-season] .title {
    color: var(--season-text);
    text-shadow: var(--season-text-shadow);
}

html[data-season-preload] .subtitle,
html[data-season-preload] body, body[data-season] .subtitle {
    color: var(--season-text);
    text-shadow: var(--season-text-shadow);
}

/* Seasonal link colors */
html[data-season-preload] body, body[data-season] a {
    color: var(--season-primary);
    text-shadow: 0 0 3px var(--season-glow);
}

html[data-season-preload] body, body[data-season] a:hover {
    color: var(--season-accent);
}

/* Seasonal navigation */
html[data-season-preload] body, body[data-season] .nav-link {
    color: var(--season-text);
    text-shadow: 0 0 2px var(--season-glow);
}

html[data-season-preload] body, body[data-season] .nav-link:hover {
    color: var(--season-accent);
    text-shadow: 0 0 5px var(--season-glow);
    background-color: var(--season-background);
}

html[data-season-preload] body, body[data-season] .nav-link.active {
    color: var(--season-primary);
    text-shadow: 0 0 8px var(--season-glow), 0 0 12px var(--season-glow);
    border-bottom-color: var(--season-primary);
}

/* Seasonal status text */
html[data-season-preload] body, body[data-season] .status {
    color: var(--season-text);
    text-shadow: 0 0 3px var(--season-glow);
}

/* Seasonal counter */
html[data-season-preload] body, body[data-season] .total-counter {
    color: var(--season-primary);
    text-shadow: 0 0 3px var(--season-glow);
}

/* Seasonal buttons */
html[data-season-preload] body, body[data-season] .redeem-button {
    color: var(--season-primary);
    border-color: var(--season-primary);
    text-shadow: 0 0 2px var(--season-glow);
}

html[data-season-preload] body, body[data-season] .redeem-button:hover {
    background-color: var(--season-background);
    box-shadow: 0 0 10px var(--season-glow);
}

/* Seasonal item numbers */
html[data-season-preload] body, body[data-season] .item-number {
    color: var(--season-primary);
    text-shadow: 0 0 3px var(--season-glow);
}

/* Seasonal strong text */
html[data-season-preload] body, body[data-season] strong {
    color: var(--season-primary);
}

/* Seasonal hover effects */
html[data-season-preload] body, body[data-season] .list-item.hover-enabled:hover {
    box-shadow: 0 8px 30px var(--season-glow), 0 0 15px var(--season-glow);
    background: var(--season-background);
}

/* Seasonal settings panel */
html[data-season-preload] body, body[data-season] .settings-toggle-btn {
    background: var(--season-background);
    color: var(--season-primary);
    border-color: var(--season-primary);
    text-shadow: 0 0 3px var(--season-glow);
}

html[data-season-preload] body, body[data-season] .settings-toggle-btn:hover {
    box-shadow: 0 0 8px var(--season-glow);
}

/* Seasonal page content */
html[data-season-preload] body, body[data-season] .page-content {
    color: var(--season-text);
}

html[data-season-preload] body, body[data-season] .page-content p {
    color: var(--season-text);
}

html[data-season-preload] body, body[data-season] .page-content h3 {
    color: var(--season-primary);
    text-shadow: 0 0 5px var(--season-glow);
}

html[data-season-preload] body, body[data-season] .page-content h4 {
    color: var(--season-secondary);
    text-shadow: 0 0 3px var(--season-glow);
}

/* Seasonal lists */
html[data-season-preload] body, body[data-season] .page-content ul li {
    color: var(--season-text);
}

html[data-season-preload] body, body[data-season] .page-content ul li strong {
    color: var(--season-primary);
}

/* Seasonal horizontal rules */
html[data-season-preload] body, body[data-season] hr {
    border-color: var(--season-primary);
    box-shadow: 0 0 5px var(--season-glow);
}

/* Seasonal form elements */
html[data-season-preload] body, body[data-season] .form-group label {
    color: var(--season-text);
    text-shadow: 0 0 2px var(--season-glow);
}

html[data-season-preload] body, body[data-season] input[type="text"],
html[data-season-preload] body, body[data-season] input[type="email"],
html[data-season-preload] body, body[data-season] textarea,
html[data-season-preload] body, body[data-season] select {
    border-color: var(--season-primary);
    color: var(--season-text);
    background: rgba(0, 0, 0, 0.5);
}

html[data-season-preload] body, body[data-season] input[type="text"]:focus,
html[data-season-preload] body, body[data-season] input[type="email"]:focus,
html[data-season-preload] body, body[data-season] textarea:focus,
html[data-season-preload] body, body[data-season] select:focus {
    border-color: var(--season-accent);
    box-shadow: 0 0 10px var(--season-glow);
}

html[data-season-preload] body, body[data-season] .form-button {
    background: var(--season-background);
    color: var(--season-primary);
    border-color: var(--season-primary);
    text-shadow: 0 0 3px var(--season-glow);
}

html[data-season-preload] body, body[data-season] .form-button:hover {
    background-color: var(--season-primary);
    color: #000;
    box-shadow: 0 0 15px var(--season-glow);
}

/* Seasonal department cards (About page) */
html[data-season-preload] body, body[data-season] .department-card {
    border-color: var(--season-primary);
    box-shadow: 0 0 10px var(--season-glow);
}

html[data-season-preload] body, body[data-season] .department-card:hover {
    border-color: var(--season-accent);
    box-shadow: 0 0 20px var(--season-glow);
}

html[data-season-preload] body, body[data-season] .department-header h4 {
    color: var(--season-primary);
    text-shadow: 0 0 5px var(--season-glow);
}

html[data-season-preload] body, body[data-season] .director-name {
    color: var(--season-secondary);
}

html[data-season-preload] body, body[data-season] .dept-function {
    color: var(--season-text);
}

html[data-season-preload] body, body[data-season] .dept-responsibilities li {
    color: var(--season-text);
}

html[data-season-preload] body, body[data-season] .hierarchy-title {
    color: var(--season-primary);
    text-shadow: 0 0 8px var(--season-glow);
}

html[data-season-preload] body, body[data-season] .executive-node {
    border-color: var(--season-primary);
    box-shadow: 0 0 15px var(--season-glow);
}

html[data-season-preload] body, body[data-season] .executive-node h4 {
    color: var(--season-primary);
    text-shadow: 0 0 5px var(--season-glow);
}

html[data-season-preload] body, body[data-season] .node-subtitle {
    color: var(--season-secondary);
}

html[data-season-preload] body, body[data-season] .node-description {
    color: var(--season-text);
}

/* Seasonal footer disclaimer */
html[data-season-preload] body, body[data-season] .fixed-footer-disclaimer {
    color: var(--season-text);
    text-shadow: 0 0 3px var(--season-glow);
}

/* Seasonal role badges (group members page) */
html[data-season-preload] body, body[data-season] .role-badge {
    background: var(--season-background);
    color: var(--season-primary);
    border-color: var(--season-primary);
    text-shadow: 0 0 2px var(--season-glow);
}

/* Seasonal comic/lore content */
html[data-season-preload] body, body[data-season] .comic-panel,
html[data-season-preload] body, body[data-season] .lore-section {
    border-color: var(--season-primary);
    box-shadow: 0 0 10px var(--season-glow);
}

/* Seasonal table elements (if any) */
html[data-season-preload] body, body[data-season] table {
    border-color: var(--season-primary);
}

html[data-season-preload] body, body[data-season] th {
    color: var(--season-primary);
    text-shadow: 0 0 3px var(--season-glow);
    border-color: var(--season-primary);
}

html[data-season-preload] body, body[data-season] td {
    color: var(--season-text);
    border-color: var(--season-secondary);
}

/* Seasonal particle canvas - positioned inside screen container */
#seasonal-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}