/* ==========================================================================
   THÈMES DU SITE — html[data-site-theme="…"], posé par js/site-header.js
   d'après le réglage de la console (Site & Discord › Thème du site).

   1. Les jetons de chaque thème (le UI kit les lit partout)
   2. Les quelques couleurs violettes écrites en dur, ramenées aux jetons
   3. Les touches d'interface (boutons, menus, titre)
   4. La couche d'effets (js/site-fx.js) : tout y est pointer-events: none,
      sauf l'araignée, les objets cachés et le dock du joueur.

   Un thème saisonnier impose le mode sombre : il est dessiné pour la nuit.
   ========================================================================== */

/* ---------- 1. Jetons ---------- */

/* Minuit : bleu nuit, noir bleuté, argent, violet sombre et blanc lunaire */
:root[data-site-theme="midnight"] {
    --st-rgb: 143, 150, 232; --st-rgb2: 167, 139, 250;
    --nw-bg: #060a18; --nw-bg-alt: #090e20; --nw-bg-elev: #0e1429; --nw-bg-elev-2: #141b35;
    --nw-glass-strong: rgba(12, 18, 40, .6);
    --nw-text: #eef1fb; --nw-text-dim: #a3aac6; --nw-text-faint: #6d7493;
    --nw-primary: #6d74d8; --nw-primary-light: #c7cdf5; --nw-primary-dark: #4338ca;
    --nw-magenta: #a78bfa; --nw-cyan: #cbd5e1;
    --nw-gradient-text: linear-gradient(100deg, #f1f5f9 0%, #c7cdf5 45%, #a78bfa 100%);
}

:root[data-site-theme="neon"] {
    --st-rgb: 255, 43, 214; --st-rgb2: 0, 240, 255;
    --nw-bg: #05030a; --nw-bg-alt: #0a0614; --nw-bg-elev: #100a1e; --nw-bg-elev-2: #160d28;
    --nw-glass-strong: rgba(16, 8, 30, .66);
    --nw-text: #fdf4ff; --nw-text-dim: #b7a4cc; --nw-text-faint: #7d6b94;
    --nw-primary: #ff2bd6; --nw-primary-light: #ff7ae6; --nw-primary-dark: #c00a9e;
    --nw-magenta: #00f0ff; --nw-cyan: #00f0ff;
    --nw-gradient-text: linear-gradient(100deg, #00f0ff 0%, #ff7ae6 50%, #ff2bd6 100%);
}

:root[data-site-theme="halloween"] {
    --st-rgb: 255, 122, 24; --st-rgb2: 139, 92, 246;
    --nw-bg: #07050a; --nw-bg-alt: #0d0810; --nw-bg-elev: #150d14; --nw-bg-elev-2: #1c1219;
    --nw-glass-strong: rgba(24, 12, 18, .66);
    --nw-text: #fbf3ea; --nw-text-dim: #c2ab98; --nw-text-faint: #8a7565;
    --nw-primary: #ff7a18; --nw-primary-light: #ffa552; --nw-primary-dark: #d9520a;
    --nw-magenta: #a78bfa; --nw-danger: #dc2626;
    --nw-gradient-text: linear-gradient(100deg, #fde68a 0%, #ff9a3c 45%, #a78bfa 100%);
}

:root[data-site-theme="christmas"] {
    --st-rgb: 239, 68, 68; --st-rgb2: 34, 197, 94;
    --nw-bg: #050b0a; --nw-bg-alt: #081210; --nw-bg-elev: #0d1a17; --nw-bg-elev-2: #12231f;
    --nw-glass-strong: rgba(10, 24, 20, .66);
    --nw-text: #f3faf6; --nw-text-dim: #9fbcae; --nw-text-faint: #6b8a7c;
    --nw-primary: #ef4444; --nw-primary-light: #fca5a5; --nw-primary-dark: #b91c1c;
    --nw-magenta: #4ade80;
    --nw-gradient-text: linear-gradient(100deg, #fde68a 0%, #f87171 45%, #4ade80 100%);
}

:root[data-site-theme="easter"] {
    --st-rgb: 244, 114, 182; --st-rgb2: 94, 234, 212;
    --nw-bg: #06100f; --nw-bg-alt: #0a1716; --nw-bg-elev: #0f201f; --nw-bg-elev-2: #142a28;
    --nw-glass-strong: rgba(12, 30, 28, .64);
    --nw-text: #f4fbfa; --nw-text-dim: #a6c6c2; --nw-text-faint: #6f908c;
    --nw-primary: #f472b6; --nw-primary-light: #f9a8d4; --nw-primary-dark: #db2777;
    --nw-magenta: #5eead4;
    --nw-gradient-text: linear-gradient(100deg, #fde68a 0%, #f9a8d4 50%, #5eead4 100%);
}

:root[data-site-theme="summer"] {
    --st-rgb: 251, 146, 60; --st-rgb2: 45, 212, 191;
    --nw-bg: #0a0710; --nw-bg-alt: #120b16; --nw-bg-elev: #1a1020; --nw-bg-elev-2: #22152a;
    --nw-glass-strong: rgba(28, 14, 30, .64);
    --nw-text: #fff7ed; --nw-text-dim: #c9b1a4; --nw-text-faint: #8f7a70;
    --nw-primary: #fb923c; --nw-primary-light: #fdba74; --nw-primary-dark: #ea580c;
    --nw-magenta: #2dd4bf;
    --nw-gradient-text: linear-gradient(100deg, #fde047 0%, #fb923c 45%, #f472b6 100%);
}

:root[data-site-theme="newyear"] {
    --st-rgb: 251, 191, 36; --st-rgb2: 244, 114, 182;
    --nw-bg: #06050a; --nw-bg-alt: #0c0a12; --nw-bg-elev: #13101b; --nw-bg-elev-2: #1a1624;
    --nw-glass-strong: rgba(20, 16, 28, .66);
    --nw-text: #fffbeb; --nw-text-dim: #c7bba0; --nw-text-faint: #8c826c;
    --nw-primary: #f59e0b; --nw-primary-light: #fde68a; --nw-primary-dark: #b45309;
    --nw-magenta: #f472b6;
    --nw-gradient-text: linear-gradient(100deg, #fffbeb 0%, #fde68a 40%, #f59e0b 75%, #f472b6 100%);
}

/* Ce que tous les thèmes (hors Classique) dérivent de leurs deux teintes */
:root[data-site-theme]:not([data-site-theme="classic"]) {
    --nw-gradient: linear-gradient(135deg, var(--nw-primary) 0%, var(--nw-primary-dark) 100%);
    --nw-gradient-edge: linear-gradient(140deg, rgba(var(--st-rgb), .55), rgba(var(--st-rgb), 0) 38%, rgba(var(--st-rgb), 0) 62%, rgba(var(--st-rgb2), .4));
    --nw-border: rgba(var(--st-rgb), .15);
    --nw-border-strong: rgba(var(--st-rgb), .36);
    --nw-glow: 0 0 22px rgba(var(--st-rgb), .4);
    --nw-glow-strong: 0 0 44px rgba(var(--st-rgb), .55);
}

/* ---------- 2. Le violet écrit en dur ---------- */

[data-site-theme]:not([data-site-theme="classic"]) {
    & .nw-aurora::before { background: radial-gradient(circle, rgba(var(--st-rgb), .5), transparent 65%); }
    & .nw-aurora::after { background: radial-gradient(circle, rgba(var(--st-rgb2), .34), transparent 65%); }
    & ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(var(--st-rgb), .55), rgba(var(--st-rgb2), .4)); }
    & .nw-btn--primary {
        background: linear-gradient(120deg, var(--nw-primary) 0%, var(--nw-primary-dark) 40%, color-mix(in srgb, var(--nw-magenta) 70%, var(--nw-primary-dark)) 75%, var(--nw-primary) 100%);
        background-size: 220% 100%;
        box-shadow: 0 4px 14px rgba(var(--st-rgb), .38), var(--nw-inset);
    }
    & .nw-hero-overlay {
        background:
            linear-gradient(90deg, color-mix(in srgb, var(--nw-bg) 95%, transparent) 0%, color-mix(in srgb, var(--nw-bg) 72%, transparent) 44%, color-mix(in srgb, var(--nw-bg) 15%, transparent) 78%),
            linear-gradient(0deg, var(--nw-bg) 0%, transparent 34%);
    }
    & .hero-announce { background: rgba(var(--st-rgb), .1); border-color: rgba(var(--st-rgb), .3); }
    & .hero-announce:hover { background: rgba(var(--st-rgb), .18); border-color: var(--nw-primary); }
    & .hd { background: color-mix(in srgb, var(--nw-bg) 70%, transparent); }
    & .hd.is-scrolled, & .hd.is-compact { background: color-mix(in srgb, var(--nw-bg) 90%, transparent); }
    & .hd-panel { background: color-mix(in srgb, var(--nw-bg-elev) 97%, transparent); }
    & .hd-drawer { background: color-mix(in srgb, var(--nw-bg) 98%, transparent); }
    & .nw-footer { background: var(--nw-bg-alt); }
    & .nw-brand-banner { filter: drop-shadow(0 0 10px rgba(var(--st-rgb), .35)); }
    /* La photo du haut de l'accueil passe en camaïeu du thème (une rotation de teinte verdissait les visages) */
    & .nw-hero-bg { filter: grayscale(1) sepia(.75) hue-rotate(var(--st-hue, 0deg)) saturate(var(--st-sat, 1.6)) brightness(.62) contrast(1.08); }
}
:root[data-site-theme="midnight"] { --st-hue: 205deg; --st-sat: .9; }
:root[data-site-theme="neon"] { --st-hue: -80deg; --st-sat: 2.2; }
:root[data-site-theme="halloween"] { --st-hue: -12deg; --st-sat: 2; }
:root[data-site-theme="christmas"] { --st-hue: -45deg; --st-sat: 1.4; }
:root[data-site-theme="easter"] { --st-hue: 140deg; --st-sat: 1.1; }
:root[data-site-theme="summer"] { --st-hue: -8deg; --st-sat: 1.8; }
:root[data-site-theme="newyear"] { --st-hue: 4deg; --st-sat: 1.3; }

/* Les thèmes saisonniers sont nocturnes : pas de bascule clair / sombre */
[data-site-theme]:not([data-site-theme="classic"]) [data-hd-theme] { display: none !important; }

/* ---------- 3. Interface ---------- */

/* Un reflet qui traverse les boutons principaux au survol */
[data-site-theme]:not([data-site-theme="classic"]) .nw-btn--primary::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
    background-size: 250% 100%;
    background-position: 130% 0;
    pointer-events: none;
    transition: background-position .7s var(--nw-ease);
}
[data-site-theme]:not([data-site-theme="classic"]) .nw-btn--primary:hover::before { background-position: -30% 0; }
[data-site-theme]:not([data-site-theme="classic"]) .nw-btn--primary:active { filter: brightness(1.18); }
[data-site-theme]:not([data-site-theme="classic"]) .nw-btn--outline:hover,
[data-site-theme]:not([data-site-theme="classic"]) .nw-btn--beam:hover { box-shadow: 0 0 0 1px rgba(var(--st-rgb), .55), 0 0 22px rgba(var(--st-rgb), .35); }

/* Les menus s'ouvrent dans un souffle, leurs icônes bougent au survol */
[data-site-theme]:not([data-site-theme="classic"]) .hd-item:hover .hd-item-icon { animation: st-wiggle .5s var(--nw-ease); }
@keyframes st-wiggle {
    30% { transform: rotate(-9deg) scale(1.08); }
    65% { transform: rotate(6deg) scale(1.04); }
}
[data-site-theme]:not([data-site-theme="classic"]) .hd-panel::after {
    content: var(--st-menu-mark, '');
    position: absolute;
    right: 12px;
    bottom: 8px;
    font-size: 15px;
    opacity: .55;
    pointer-events: none;
}
[data-site-theme="halloween"] { --st-menu-mark: '🎃'; }
[data-site-theme="christmas"] { --st-menu-mark: '❄️'; }
[data-site-theme="easter"] { --st-menu-mark: '🌷'; }
[data-site-theme="summer"] { --st-menu-mark: '🌴'; }
[data-site-theme="newyear"] { --st-menu-mark: '✨'; }
[data-site-theme="neon"] { --st-menu-mark: '⚡'; }
[data-site-theme="midnight"] { --st-menu-mark: '🌙'; }

/* Le mot coloré du titre vit avec le thème */
[data-site-theme="neon"] .nw-accent-italic { filter: drop-shadow(0 0 12px rgba(255, 43, 214, .55)); animation: st-neon-flicker 6s steps(1) infinite; }
[data-site-theme="neon"] .hd-link.is-active { text-shadow: 0 0 10px rgba(0, 240, 255, .8); }
[data-site-theme="halloween"] .nw-accent-italic { filter: drop-shadow(0 0 14px rgba(255, 122, 24, .5)); animation: st-candle 3.2s ease-in-out infinite; }
[data-site-theme="christmas"] .nw-accent-italic,
[data-site-theme="newyear"] .nw-accent-italic { filter: drop-shadow(0 0 14px rgba(253, 230, 138, .35)); }
@keyframes st-neon-flicker {
    0%, 100% { opacity: 1; }
    41% { opacity: .55; } 42% { opacity: 1; } 43% { opacity: .4; } 44% { opacity: 1; }
    87% { opacity: .7; } 88% { opacity: 1; }
}
@keyframes st-candle {
    0%, 100% { filter: drop-shadow(0 0 14px rgba(255, 122, 24, .5)); }
    50% { filter: drop-shadow(0 0 22px rgba(255, 122, 24, .75)); }
    70% { filter: drop-shadow(0 0 10px rgba(255, 122, 24, .4)); }
}

/* ---------- 4. La couche d'effets ---------- */

.fx-root {
    position: fixed;
    inset: 0;
    z-index: 880;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}
.fx-root * { pointer-events: none; }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
html.fx-paused .fx-root *, html.fx-paused .fx-decor * { animation-play-state: paused !important; }

/* Le voile d'arrivée : bref, jamais bloquant */
.fx-veil {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 120%, rgba(var(--st-rgb), .25), transparent 60%),
        var(--nw-bg);
    animation: fx-veil .55s ease-out forwards;
}
@keyframes fx-veil { to { opacity: 0; visibility: hidden; } }

/* Brouillard : deux nappes qui glissent en sens contraire */
.fx-fog {
    position: absolute;
    left: -20%;
    right: -20%;
    bottom: -6vh;
    height: 46vh;
    opacity: var(--fx-fog, .5);
    background:
        radial-gradient(ellipse 30% 45% at 20% 70%, rgba(170, 180, 205, .2), transparent 70%),
        radial-gradient(ellipse 35% 40% at 60% 80%, rgba(170, 180, 205, .16), transparent 70%),
        radial-gradient(ellipse 25% 35% at 90% 65%, rgba(170, 180, 205, .18), transparent 70%);
    filter: blur(18px);
    animation: fx-fog-a 38s ease-in-out infinite alternate;
}
.fx-fog + .fx-fog { bottom: -12vh; opacity: calc(var(--fx-fog, .5) * .8); animation: fx-fog-b 52s ease-in-out infinite alternate; }
@keyframes fx-fog-a { to { transform: translate3d(12%, -2vh, 0); } }
@keyframes fx-fog-b { from { transform: translate3d(10%, 0, 0) scaleX(-1); } to { transform: translate3d(-12%, -3vh, 0) scaleX(-1); } }

/* Éclair lointain : une lueur froide en haut de l'écran */
.fx-flash {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(ellipse 80% 55% at var(--fx-x, 70%) 0%, rgba(200, 210, 255, .5), transparent 70%);
}
.fx-flash.is-on { animation: fx-flash 1.1s ease-out; }
@keyframes fx-flash {
    0% { opacity: 0; } 6% { opacity: .55; } 12% { opacity: .08; } 20% { opacity: .38; } 100% { opacity: 0; }
}

/* Chauves-souris : le vol est animé par le script, les ailes par la feuille */
.fx-bat { position: absolute; left: 0; top: 0; width: var(--s, 34px); color: #0b0710; filter: drop-shadow(0 0 6px rgba(var(--st-rgb), .35)); will-change: transform; }
.fx-bat svg { width: 100%; height: auto; overflow: visible; }
.fx-bat .w { transform-origin: 50% 40%; animation: fx-flap var(--f, .22s) ease-in-out infinite alternate; }
.fx-bat.is-rare { color: #f5c542; filter: drop-shadow(0 0 10px rgba(245, 197, 66, .8)); }
@keyframes fx-flap { from { transform: scaleY(1); } to { transform: scaleY(.25); } }

/* Le fantôme : flotte, ondule, s'efface */
.fx-ghost { position: absolute; left: 0; top: 0; width: 64px; opacity: .75; filter: drop-shadow(0 0 18px rgba(200, 220, 255, .45)); will-change: transform; }
.fx-ghost svg { width: 100%; height: auto; animation: fx-bob 1.6s ease-in-out infinite alternate; }
@keyframes fx-bob { to { transform: translateY(-10px) rotate(3deg); } }

/* L'araignée : un fil, un corps. Seul le corps se clique. */
.fx-spider {
    position: fixed;
    top: 0;
    z-index: 885;
    width: 34px;
    pointer-events: none;
    transform: translateY(var(--y, -60px));
    transition: transform var(--t, 4s) cubic-bezier(.45, .05, .35, 1);
}
.fx-spider::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 26px;
    width: 1px;
    height: 100vh;
    background: linear-gradient(to top, rgba(230, 230, 240, .7), rgba(230, 230, 240, .15));
}
.fx-spider-body { position: relative; display: block; width: 34px; pointer-events: auto; cursor: pointer; animation: fx-sway 3s ease-in-out infinite alternate; transform-origin: 50% -40px; }
.fx-spider-body svg { width: 100%; height: auto; }
.fx-spider .leg { animation: fx-legs .6s ease-in-out infinite alternate; transform-origin: 50% 50%; }
.fx-spider.is-scared .fx-spider-body { animation: fx-scared .5s ease-in-out 2; }
@keyframes fx-sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes fx-legs { to { transform: scaleX(.88); } }
@keyframes fx-scared { 25% { transform: rotate(-25deg) scale(1.2); } 75% { transform: rotate(25deg) scale(1.2); } }
@media (hover: none), (max-width: 760px) { .fx-spider-body { pointer-events: none; } }

/* ---------- Décors des bords ---------- */

.fx-decor { position: fixed; inset: 0; z-index: 870; pointer-events: none; }
.fx-decor > * { position: absolute; pointer-events: none; }
.fx-decor svg { width: 100%; height: 100%; overflow: visible; }

.fx-side { top: 0; bottom: 0; width: clamp(48px, calc((100vw - 1320px) / 2 + 24px), 150px); opacity: calc(var(--fx-decor, .9) * .85); }
.fx-side--l { left: 0; }
.fx-side--r { right: 0; transform: scaleX(-1); }
.fx-corner { width: clamp(90px, 12vw, 200px); aspect-ratio: 1; opacity: var(--fx-decor, .9); }
.fx-corner--tl { left: 0; top: 0; }
.fx-corner--tr { right: 0; top: 0; transform: scaleX(-1); }
.fx-corner--bl { left: 0; bottom: 0; transform: scaleY(-1); }
.fx-corner--br { right: 0; bottom: 0; transform: scale(-1, -1); }
.fx-ground { left: 0; right: 0; bottom: 0; height: clamp(40px, 7vw, 90px); opacity: var(--fx-decor, .9); }
.fx-garland { left: 0; right: 0; top: 0; height: 46px; }
.fx-peek { bottom: 0; width: clamp(70px, 8vw, 120px); transition: transform .9s var(--nw-spring); }
.fx-peek--l { left: 1.5vw; transform: translateY(105%); }
.fx-peek--r { right: 1.5vw; transform: translateY(105%) scaleX(-1); }
.fx-peek.is-up.fx-peek--l { transform: translateY(18%); }
.fx-peek.is-up.fx-peek--r { transform: translateY(18%) scaleX(-1); }

.fx-flicker { animation: fx-flicker 2.8s ease-in-out infinite; }
.fx-flicker:nth-of-type(2n) { animation-duration: 3.6s; animation-delay: -1s; }
.fx-flicker:nth-of-type(3n) { animation-duration: 2.2s; animation-delay: -.4s; }
@keyframes fx-flicker {
    0%, 100% { opacity: 1; } 40% { opacity: .78; } 45% { opacity: .95; } 60% { opacity: .65; } 80% { opacity: .9; }
}
.fx-twinkle { animation: fx-twinkle 1.6s ease-in-out infinite alternate; }
.fx-twinkle:nth-of-type(3n) { animation-delay: -.5s; }
.fx-twinkle:nth-of-type(3n+1) { animation-delay: -1.1s; }
@keyframes fx-twinkle { from { opacity: .35; } to { opacity: 1; } }
.fx-buzz { animation: st-neon-flicker 5s steps(1) infinite; }
.fx-buzz:nth-of-type(2n) { animation-duration: 7s; }
.fx-sway { transform-box: fill-box; transform-origin: 50% 0; animation: fx-sway 4s ease-in-out infinite alternate; }

/* Sur les écrans étroits, les bords reculent : le contenu passe d'abord */
@media (max-width: 1180px) {
    .fx-side { width: 56px; opacity: calc(var(--fx-decor, .9) * .55); }
}
@media (max-width: 760px) {
    .fx-side, .fx-peek, .fx-corner--bl, .fx-corner--br { display: none; }
    .fx-corner { width: 74px; opacity: .55; }
    .fx-ground { height: 34px; opacity: .6; }
}

/* ---------- Le logo ---------- */

.hd .nw-brand.has-fx { position: relative; overflow: visible; }
.fx-logo { position: absolute; pointer-events: none; z-index: 2; }
.fx-logo svg { width: 100%; height: auto; overflow: visible; }
.fx-logo--pumpkin { width: 30px; right: -16px; bottom: -6px; animation: fx-hop 3.4s var(--nw-ease) infinite; }
.fx-logo--pumpkin .glow { animation: fx-flicker 2.2s ease-in-out infinite; }
.fx-logo--hat { width: 34px; left: -10px; top: -16px; transform: rotate(-18deg); }
.fx-logo--ears { width: 34px; left: 6px; top: -22px; animation: fx-ears 4s ease-in-out infinite; transform-origin: 50% 100%; }
.fx-logo--sun { width: 30px; right: -14px; top: -12px; animation: fx-spin 18s linear infinite; }
.fx-logo--spark { width: 24px; right: -10px; top: -10px; animation: fx-twinkle .9s ease-in-out infinite alternate; }
.fx-logo--neon { inset: -6px -10px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(var(--st-rgb), .5), 0 0 18px rgba(var(--st-rgb), .45), inset 0 0 14px rgba(var(--st-rgb2), .25); animation: st-neon-flicker 7s steps(1) infinite; }
.fx-logo--star { width: 18px; right: -10px; top: -6px; animation: fx-twinkle 1.4s ease-in-out infinite alternate; }
@keyframes fx-hop { 0%, 80%, 100% { transform: translateY(0) rotate(0); } 86% { transform: translateY(-5px) rotate(-8deg); } 92% { transform: translateY(0) rotate(6deg); } }
@keyframes fx-ears { 0%, 90%, 100% { transform: rotate(0); } 94% { transform: rotate(-8deg); } 97% { transform: rotate(6deg); } }
@keyframes fx-spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .fx-logo { transform: scale(.75); } .fx-logo--neon { display: none; } }

/* ---------- La scène de l'accueil ---------- */

/* Ancrée au bas du premier écran : on la voit dès l'arrivée */
.fx-scene {
    --fx-sh: min(68svh, 640px);
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100svh - var(--fx-sh));
    height: var(--fx-sh);
    z-index: -1;
    pointer-events: none;
    opacity: var(--fx-scene, 1);
    animation: fx-rise 1.4s var(--nw-ease) both .2s;
}
.fx-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-scene::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 70px; background: linear-gradient(transparent, var(--nw-bg)); }
.fx-scene [data-fx-click] { pointer-events: auto; cursor: pointer; }
@keyframes fx-rise { from { opacity: 0; transform: translateY(40px); } }
@media (max-width: 760px) { .fx-scene { --fx-sh: 42svh; opacity: calc(var(--fx-scene, 1) * .7); } }

/* ---------- Le bandeau d'événement : une affiche scotchée ---------- */

.fx-event {
    position: relative;
    display: grid;
    gap: 4px;
    justify-items: start;
    width: fit-content;
    max-width: 600px;
    margin-bottom: var(--nw-sp-6);
    padding: 18px 26px 16px;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(var(--st-rgb), .28), transparent 60%),
        color-mix(in srgb, var(--nw-bg-elev) 88%, #000);
    border: 2px solid rgba(var(--st-rgb), .7);
    border-radius: 3px;
    box-shadow: 8px 8px 0 rgba(var(--st-rgb2), .35), 0 20px 50px rgba(0, 0, 0, .55);
    rotate: -2.2deg;
    animation: fx-poster .9s var(--nw-spring) both .3s;
}
/* Le compte à rebours (Nouvel an…) : au-dessus du bandeau, chiffres fixes pour ne pas faire danser la ligne */
.fx-countdown { display: grid; gap: 2px; width: fit-content; margin-bottom: var(--nw-sp-4); padding: 10px 18px; border: 1px solid rgba(var(--st-rgb), .55); border-radius: var(--nw-radius); background: color-mix(in srgb, var(--nw-bg-elev) 85%, #000); box-shadow: 0 0 26px rgba(var(--st-rgb), .25); }
.fx-countdown span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--nw-text-dim); }
.fx-countdown b { font-size: clamp(20px, 4vw, 30px); font-variant-numeric: tabular-nums; color: var(--nw-primary-light); }
.fx-countdown.is-done b { animation: fx-poster .9s var(--nw-spring) both; }

.fx-event::before, .fx-event::after {
    content: '';
    position: absolute;
    top: -12px;
    width: 74px;
    height: 22px;
    background: rgba(255, 245, 220, .32);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    backdrop-filter: blur(2px);
}
.fx-event::before { left: -18px; rotate: -32deg; }
.fx-event::after { right: -18px; rotate: 28deg; }
.fx-event b {
    font-family: var(--st-font, var(--nw-font-display));
    font-weight: var(--st-font-weight, 900);
    font-size: clamp(22px, 2.6vw, 34px);
    line-height: 1.05;
    letter-spacing: var(--st-font-track, .02em);
    color: var(--nw-primary-light);
    text-shadow: 3px 3px 0 rgba(0, 0, 0, .55), 0 0 22px rgba(var(--st-rgb), .55);
}
.fx-event > span { color: var(--nw-text); opacity: .82; font-size: 14.5px; line-height: 1.5; max-width: 46ch; }
.fx-event a {
    margin-top: 8px;
    padding: 6px 12px;
    background: var(--nw-primary);
    color: #120a06;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    rotate: 1.5deg;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, .5);
    transition: rotate var(--nw-fast), translate var(--nw-fast);
}
.fx-event a:hover { color: #120a06; rotate: -1deg; translate: 0 -2px; }
@keyframes fx-poster { from { opacity: 0; scale: 1.25; rotate: 6deg; } }

/* ---------- Les polices d'affiche ---------- */

:root[data-site-theme="halloween"] { --st-font: 'Creepster', var(--nw-font-display); --st-font-weight: 400; --st-font-track: .06em; }
:root[data-site-theme="christmas"] { --st-font: 'Mountains of Christmas', var(--nw-font-display); --st-font-weight: 700; }
:root[data-site-theme="easter"] { --st-font: 'Chewy', var(--nw-font-display); --st-font-weight: 400; --st-font-track: .03em; }
:root[data-site-theme="summer"] { --st-font: 'Pacifico', var(--nw-font-display); --st-font-weight: 400; --st-font-track: 0; }
:root[data-site-theme="neon"] { --st-font: 'Monoton', var(--nw-font-display); --st-font-weight: 400; --st-font-track: .04em; }
:root[data-site-theme="newyear"] { --st-font: 'Bungee Shade', var(--nw-font-display); --st-font-weight: 400; --st-font-track: .02em; }

[data-site-theme]:not([data-site-theme="classic"], [data-site-theme="midnight"]) :is(.nw-hero-title .nw-accent-italic, .nw-h2 .nw-accent-italic) {
    font-family: var(--st-font);
    font-weight: var(--st-font-weight);
    font-style: normal;
    letter-spacing: var(--st-font-track);
}
[data-site-theme="halloween"] .nw-hero-title .nw-accent-italic { font-size: 1.12em; color: #ff8a2a; background: none; -webkit-text-fill-color: #ff8a2a; text-shadow: 0 4px 0 #6b1d00, 0 0 30px rgba(255, 122, 24, .6); }
[data-site-theme="neon"] .nw-hero-title .nw-accent-italic { font-size: .82em; background: none; -webkit-text-fill-color: #ffe9fb; color: #ffe9fb; text-shadow: 0 0 6px #ff2bd6, 0 0 18px #ff2bd6, 0 0 42px #ff2bd6, 0 0 80px rgba(0, 240, 255, .6); }
[data-site-theme="christmas"] .nw-hero-title .nw-accent-italic { font-size: 1.05em; }
[data-site-theme="summer"] .nw-hero-title .nw-accent-italic { font-size: .9em; padding-right: .15em; }
[data-site-theme="newyear"] .nw-hero-title .nw-accent-italic { font-size: .9em; background: none; -webkit-text-fill-color: #fbbf24; color: #fbbf24; }

/* ---------- Grain de pellicule et vignette ---------- */

.fx-grain {
    position: absolute;
    inset: -60px;
    opacity: .085;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    animation: fx-grain .9s steps(4) infinite;
}
.fx-grain::after { content: ''; position: fixed; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .4)); }
[data-site-theme="neon"] .fx-grain { opacity: .12; background-size: 180px, auto; }
[data-site-theme="neon"] .fx-root::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .08) 0 1px, transparent 1px 3px); pointer-events: none; }
@keyframes fx-grain { 0% { translate: 0 0; } 25% { translate: -22px 14px; } 50% { translate: 16px -26px; } 75% { translate: -10px -8px; } }

/* ---------- Lune de sang ---------- */

.fx-scene .moon circle { transition: fill 1.6s ease; }
.fx-scene [fill="url(#fxMoon)"] { transition: opacity 1.6s ease; }
html.fx-bloodmoon .fx-scene .moon circle { fill: #b91c1c; }
html.fx-bloodmoon .fx-scene .moon circle + circle, html.fx-bloodmoon .fx-scene .moon circle:nth-child(n+3) { fill: #6b0f0f; }
html.fx-bloodmoon .fx-scene .moon { filter: drop-shadow(0 0 10px #ff2a2a); }
html.fx-bloodmoon .fx-scene [fill="url(#fxMoon)"] { opacity: .15; }
html.fx-bloodmoon .fx-root::before { content: ''; position: absolute; inset: 0; z-index: 2; background: radial-gradient(130% 100% at 70% 40%, rgba(160, 0, 0, .12), rgba(90, 0, 0, .55)); animation: fx-blood 7.5s ease both; }
html.fx-bloodmoon .nw-hero-title .nw-accent-italic { -webkit-text-fill-color: #ff2a2a; color: #ff2a2a; text-shadow: 0 4px 0 #3b0000, 0 0 40px rgba(255, 0, 0, .7); animation: fx-shake .18s linear 12; }
@keyframes fx-blood { 0%, 100% { opacity: 0; } 15%, 80% { opacity: 1; } }
@keyframes fx-shake { 25% { translate: 2px -1px; } 50% { translate: -2px 1px; } 75% { translate: 1px 2px; } }

/* ---------- Le néon qui bugue ---------- */

.fx-glitch { position: relative; animation: fx-glitch .7s steps(2) both; }
@keyframes fx-glitch {
    0% { text-shadow: -4px 0 #00f0ff, 4px 0 #ff2bd6; clip-path: inset(10% 0 55% 0); translate: -6px 0; }
    20% { text-shadow: 5px 0 #00f0ff, -5px 0 #ff2bd6; clip-path: inset(60% 0 5% 0); translate: 5px 0; }
    40% { text-shadow: -3px 0 #fde047, 3px 0 #00f0ff; clip-path: inset(30% 0 30% 0); translate: -2px 0; }
    60% { text-shadow: 2px 0 #ff2bd6; clip-path: none; translate: 3px 0; opacity: .6; }
    100% { clip-path: none; translate: 0; opacity: 1; }
}

/* ---------- Au sol ---------- */

.fx-runner { position: absolute; left: 0; top: 0; z-index: 3; will-change: transform; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .5)); }
.fx-runner svg { display: block; width: 100%; height: auto; }
.fx-snowpile { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; transform-origin: 50% 100%; animation: fx-pile 150s linear both; filter: drop-shadow(0 -2px 6px rgba(255, 255, 255, .25)); }
.fx-snowpile svg { display: block; width: 100%; height: 100%; }
@keyframes fx-pile { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (max-width: 760px) { .fx-snowpile { height: 26px; } .fx-event { rotate: -1deg; } }

/* ---------- La chasse ---------- */

.fx-hunt {
    position: absolute;
    z-index: 860;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    font-size: 24px;
    line-height: 1;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    opacity: .5;
    filter: saturate(.7);
    transition: opacity .3s, transform .3s var(--nw-spring), filter .3s;
}
.fx-hunt:hover, .fx-hunt:focus-visible { opacity: 1; filter: none; transform: scale(1.3) rotate(-8deg); }
.fx-hunt.is-found { pointer-events: none; animation: fx-found .8s var(--nw-ease) forwards; }
@keyframes fx-found { 40% { transform: scale(2) rotate(12deg); opacity: 1; } 100% { transform: scale(.2) translateY(-60px); opacity: 0; } }
.fx-burst { position: absolute; z-index: 861; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; background: var(--c, var(--nw-primary)); animation: fx-burst .9s ease-out forwards; }
@keyframes fx-burst { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }

/* ---------- Le dock du joueur : son, effets, chasse ---------- */

.fx-dock {
    position: fixed;
    left: max(14px, env(safe-area-inset-left));
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 950;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(var(--st-rgb), .3);
    border-radius: var(--nw-radius-pill);
    background: color-mix(in srgb, var(--nw-bg-elev) 88%, transparent);
    box-shadow: var(--nw-shadow), 0 0 22px rgba(var(--st-rgb), .15);
    backdrop-filter: blur(12px);
    font-size: 13px;
    animation: fx-rise .6s var(--nw-ease) both 1s;
}
.fx-dock button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    min-width: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--nw-radius-pill);
    background: transparent;
    color: var(--nw-text-dim);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--nw-fast), color var(--nw-fast);
}
.fx-dock button:hover { background: rgba(var(--st-rgb), .15); color: var(--nw-text); }
.fx-dock button.is-on { color: var(--nw-primary-light); background: rgba(var(--st-rgb), .12); }
.fx-dock-mark { font-size: 17px; padding: 0 6px !important; }
.fx-dock svg { width: 16px; height: 16px; }
.fx-dock-count b { color: var(--nw-text); }
.fx-dock.is-folded button:not(.fx-dock-mark), .fx-dock.is-folded .fx-dock-pick { display: none; }
.fx-dock-pick select { height: 34px; max-width: 150px; padding: 0 8px; border: 0; border-radius: var(--nw-radius-pill); background: rgba(var(--st-rgb), .1); color: var(--nw-text); font: inherit; font-weight: 700; cursor: pointer; }
.fx-dock-pick select:focus-visible { outline: 2px solid var(--nw-primary-light); }
@media (max-width: 760px) { .fx-dock { bottom: max(10px, env(safe-area-inset-bottom)); left: 10px; } .fx-dock-label { display: none; } }

.fx-toast {
    position: fixed;
    left: 50%;
    top: calc(var(--nw-header-h) + 26px);
    z-index: 960;
    translate: -50% 0;
    padding: 10px 18px;
    border: 1px solid rgba(var(--st-rgb), .45);
    border-radius: var(--nw-radius-pill);
    background: color-mix(in srgb, var(--nw-bg-elev) 94%, transparent);
    box-shadow: 0 0 30px rgba(var(--st-rgb), .3);
    color: var(--nw-text);
    font-weight: 700;
    font-size: 14px;
    pointer-events: none;
    animation: fx-toast 3.4s var(--nw-ease) forwards;
}
@keyframes fx-toast { 0% { opacity: 0; transform: translateY(-14px) scale(.95); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }

/* L'aperçu staff : rappelle qu'on regarde un brouillon */
.fx-preview {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 960;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 8px 8px 14px;
    border-radius: var(--nw-radius-pill);
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 0 0 2px var(--nw-primary), var(--nw-shadow);
}
.fx-preview a { padding: 5px 10px; border-radius: var(--nw-radius-pill); background: var(--nw-primary); color: #fff; font-weight: 800; }

/* ---------- Les passages dans le ciel ---------- */

.fx-fly { position: absolute; left: 0; top: 0; will-change: transform; filter: drop-shadow(0 0 10px rgba(var(--st-rgb), .35)); }
.fx-fly svg { display: block; width: 100%; height: auto; overflow: visible; }
.fx-cape { transform-box: fill-box; transform-origin: 100% 0; animation: fx-cape .5s ease-in-out infinite alternate; }
@keyframes fx-cape { to { transform: skewY(-8deg) scaleX(1.08); } }
.fx-gallop { animation: fx-gallop .6s ease-in-out infinite alternate; }
.fx-gallop .fx-leg { transform-box: fill-box; transform-origin: 50% 0; animation: fx-legs .3s ease-in-out infinite alternate; }
@keyframes fx-gallop { to { transform: translateY(-4px); } }
@keyframes fx-legs { to { transform: skewX(18deg); } }
.fx-wing { transform-box: view-box; transform-origin: 23px 20px; animation: fx-wing .22s ease-in-out infinite alternate; }
@keyframes fx-wing { to { transform: scaleX(.25); } }
.fx-prop { transform-box: fill-box; transform-origin: 50% 50%; animation: fx-prop .08s linear infinite alternate; }
@keyframes fx-prop { to { transform: scaleY(.15); } }
.fx-flag { transform-box: fill-box; transform-origin: 0 50%; animation: fx-flag 1.2s ease-in-out infinite alternate; }
@keyframes fx-flag { to { transform: skewY(3deg) scaleY(.94); } }

.fx-shoot {
    position: absolute;
    width: var(--len, 140px);
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #fff, rgba(var(--st-rgb2), .7) 20%, transparent);
    box-shadow: 0 0 10px rgba(255, 255, 255, .7);
    transform-origin: 0 50%;
}

.fx-siren { position: absolute; inset: 0; }
.fx-siren i { position: absolute; top: 0; bottom: 0; width: 26vw; opacity: 0; mix-blend-mode: screen; }
.fx-siren i:first-child { left: 0; background: radial-gradient(60% 50% at 0% 40%, rgba(239, 68, 68, .45), transparent 70%); animation: fx-siren .42s steps(1) 7; }
.fx-siren i:last-child { right: 0; background: radial-gradient(60% 50% at 100% 40%, rgba(59, 130, 246, .5), transparent 70%); animation: fx-siren .42s steps(1) 7 .21s; }
@keyframes fx-siren { 0% { opacity: 1; } 50% { opacity: 0; } }

/* ---------- Les yeux dans le noir, les aurores ---------- */

.fx-blink { transform-box: fill-box; transform-origin: 50% 50%; animation: fx-blink 5.5s ease-in-out infinite; }
.fx-blink:nth-of-type(2n) { animation-duration: 7s; animation-delay: -2.4s; }
@keyframes fx-blink { 0%, 44%, 50%, 100% { transform: scaleY(1); opacity: 1; } 47% { transform: scaleY(.1); } 70%, 82% { opacity: .15; } }
.fx-aurora { animation: fx-aurora 9s ease-in-out infinite alternate; }
.fx-aurora--2 { animation-duration: 13s; animation-delay: -4s; }
@keyframes fx-aurora { from { transform: translateX(-30px) skewX(-4deg); opacity: .7; } to { transform: translateX(40px) skewX(5deg); opacity: 1; } }

/* ---------- L'en-tête habillé ---------- */

.fx-trim { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; }
.fx-trim svg { display: block; width: 100%; height: 100%; }
.fx-trim-cap { position: absolute; left: 10px; right: 10px; top: -9px; height: 16px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.fx-trim-icicles { position: absolute; left: 16px; right: 16px; top: calc(100% - 1px); height: 20px; animation: fx-twinkle 3s ease-in-out infinite alternate; }
.fx-trim-drips { position: absolute; left: 18px; right: 18px; top: calc(100% - 2px); height: 22px; transform-origin: 50% 0; animation: fx-drip 4s ease-in-out infinite alternate; }
@keyframes fx-drip { to { transform: scaleY(1.35); } }
.fx-trim-dangler { position: absolute; right: 18%; top: 100%; width: 22px; transform-origin: 50% -46px; animation: fx-swing 3.2s ease-in-out infinite alternate; }
.fx-trim-dangler::before { content: ''; position: absolute; left: 50%; bottom: 80%; height: 46px; border-left: 1px solid rgba(220, 220, 235, .4); }
.fx-trim-dangler svg { height: auto; transform: translateY(46px) rotate(180deg); }
@keyframes fx-swing { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.fx-trim-vine { position: absolute; left: 14px; right: 14px; top: calc(100% - 8px); height: 20px; }
.fx-trim-tinsel { position: absolute; left: 16px; right: 16px; top: calc(100% - 1px); height: 24px; }

@property --fx-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.fx-trim-chase {
    position: absolute;
    inset: -1px;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--fx-a), transparent 0 10%, rgba(var(--st-rgb), .95) 20%, transparent 32% 52%, rgba(var(--st-rgb2), .95) 66%, transparent 78%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    filter: drop-shadow(0 0 6px rgba(var(--st-rgb), .8));
    animation: fx-chase 6s linear infinite;
}
.fx-trim--midnight .fx-trim-chase { animation-duration: 14s; opacity: .7; }
.fx-trim--summer .fx-trim-chase { animation-duration: 10s; }
@keyframes fx-chase { to { --fx-a: 360deg; } }

@media (max-width: 760px) {
    .fx-trim-dangler, .fx-trim-vine, .fx-trim-tinsel { display: none; }
}

/* Moins d'animations demandées : décor fixe, rien ne vole */
@media (prefers-reduced-motion: reduce) {
    .fx-root, .fx-spider, .fx-veil, .fx-peek { display: none !important; }
    .fx-decor *, .fx-logo, .fx-trim, .fx-trim *, .fx-scene, .fx-scene *, .fx-event-mark, [data-site-theme] .nw-accent-italic { animation: none !important; }
}