/* ================================================================
   SKIN "NATAL" — variante do V3 Clean (opção A aprovada pelo Rodrigo, 29/10/26)
   Claro: creme quente + vermelho. Escuro: azul-noite + vermelho vivo.
   Enfeites: varal de luzes quentes piscando sob o cabeçalho, gorro no logo,
   pinheiros nevados no canto inferior direito, neve fina. Tudo pointer-events:none,
   nas bordas, nunca sobre texto. Carrega DEPOIS de v3_clean.css.
   <html data-skin="v3-clean" data-skin-variant="natal">
   ================================================================ */
html[data-skin="v3-clean"][data-skin-variant="natal"]:not(.adventure-mode) {
  --bg-base:#0c1522; --bg-surface:#0a121e; --bg-card:#12202f; --bg-card-hover:#192b3f; --bg-sidebar:#0a121e;
  --border:#22344a; --border-light:#344b68;
  --brand:#e0483f; --on-brand:#ffffff; --brand-subtle:rgba(224,72,63,.16);
  --text-primary:#e8eef8; --text-secondary:#a6b4cc; --text-muted:#8ea0bd;
  --bg-void:#0c1522; --bg-elevated:#192b3f; --bg-hover:#21364f;
  --border-subtle:#22344a; --border-accent:#344b68; --border-brand:rgba(224,72,63,.38); --brand-dim:rgba(224,72,63,.16);
}
html[data-skin="v3-clean"][data-skin-variant="natal"]:not(.adventure-mode)[data-theme="light"] {
  --bg-base:#f6f1ea; --bg-surface:#fffaf3; --bg-card:#ffffff; --bg-card-hover:#f8efe3; --bg-sidebar:#fffaf3;
  --border:#e6dccd; --border-light:#d6c9b6;
  --brand:#c42b2b; --on-brand:#ffffff; --brand-subtle:rgba(196,43,43,.09);
  --text-primary:#2a1d16; --text-secondary:#5e4e42; --text-muted:#7a6a5c;
  --bg-void:#f6f1ea; --bg-elevated:#f8efe3; --bg-hover:#f1e6d6;
  --border-subtle:#e6dccd; --border-accent:#d6c9b6; --border-brand:rgba(196,43,43,.3); --brand-dim:rgba(196,43,43,.09);
}
html[data-skin="v3-clean"][data-skin-variant="natal"]:not(.adventure-mode).comfort-mode { --text-secondary:#bac7dc; --text-muted:#98a8c2; }
html[data-skin="v3-clean"][data-skin-variant="natal"]:not(.adventure-mode).comfort-mode[data-theme="light"] { --text-secondary:#4a3b30; --text-muted:#625244; }

/* gorro de Papai Noel no logo */
html[data-skin="v3-clean"][data-skin-variant="natal"]:not(.adventure-mode) .header-logo { position:relative; overflow:visible; }
html[data-skin="v3-clean"][data-skin-variant="natal"]:not(.adventure-mode) .header-logo::after {
  content:""; position:absolute; top:-13px; left:-8px; width:26px; height:20px; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 34 26%22%3E%3Cpath d=%22M4 22C4 10 12 3 24 4c3 2 5 5 5 8l-2 10z%22 fill=%22%23d02b2b%22/%3E%3Crect x=%222%22 y=%2218%22 width=%2228%22 height=%227%22 rx=%223.5%22 fill=%22%23fff%22 stroke=%22%23d9cdbb%22 stroke-width=%22.6%22/%3E%3Ccircle cx=%2227%22 cy=%225%22 r=%223.6%22 fill=%22%23fff%22 stroke=%22%23d9cdbb%22 stroke-width=%22.6%22/%3E%3C/svg%3E") center/contain no-repeat;
}

/* varal de luzes quentes sob o cabeçalho (2 camadas que alternam o brilho) */
html[data-skin="v3-clean"][data-skin-variant="natal"]:not(.adventure-mode) .app-header { position:relative; }
html[data-skin="v3-clean"][data-skin-variant="natal"]:not(.adventure-mode) .app-header::before,
html[data-skin="v3-clean"][data-skin-variant="natal"]:not(.adventure-mode) .app-header::after {
  content:""; position:absolute; left:0; right:0; top:100%; height:22px; pointer-events:none; z-index:101;
}
html[data-skin="v3-clean"][data-skin-variant="natal"]:not(.adventure-mode) .app-header::before {
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%2216%22 viewBox=%220 0 120 16%22%3E%3Cpath d=%22M0 2Q30 15 60 2T120 2%22 fill=%22none%22 stroke=%22%236b5846%22 stroke-width=%221.2%22/%3E%3C/svg%3E") 0 0 repeat-x, url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%2222%22 viewBox=%220 0 120 22%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22%3E%3Cstop offset=%220%22 stop-color=%22%23ffe27a%22/%3E%3Cstop offset=%22.55%22 stop-color=%22%23ffc83a%22/%3E%3Cstop offset=%221%22 stop-color=%22%23ffc83a%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg%3E%3Cellipse cx=%2230%22 cy=%2213%22 rx=%229%22 ry=%229%22 fill=%22url(%23g)%22 opacity=%22.55%22/%3E%3Cellipse cx=%2230%22 cy=%2212%22 rx=%223.2%22 ry=%224.4%22 fill=%22%23ffd24a%22/%3E%3Cellipse cx=%2290%22 cy=%2213%22 rx=%229%22 ry=%229%22 fill=%22url(%23g)%22 opacity=%22.55%22/%3E%3Cellipse cx=%2290%22 cy=%2212%22 rx=%223.2%22 ry=%224.4%22 fill=%22%23ffd24a%22/%3E%3C/g%3E%3C/svg%3E") 0 0 repeat-x; animation:natal-pisca 2.4s ease-in-out infinite;
}
html[data-skin="v3-clean"][data-skin-variant="natal"]:not(.adventure-mode) .app-header::after {
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%2222%22 viewBox=%220 0 120 22%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff0b0%22/%3E%3Cstop offset=%22.55%22 stop-color=%22%23ffbf2e%22/%3E%3Cstop offset=%221%22 stop-color=%22%23ffbf2e%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg%3E%3Cellipse cx=%220%22 cy=%229%22 rx=%229%22 ry=%229%22 fill=%22url(%23g)%22 opacity=%22.55%22/%3E%3Cellipse cx=%2260%22 cy=%2214%22 rx=%229%22 ry=%229%22 fill=%22url(%23g)%22 opacity=%22.55%22/%3E%3Cellipse cx=%2260%22 cy=%2213%22 rx=%223.2%22 ry=%224.4%22 fill=%22%23ffc83a%22/%3E%3Cellipse cx=%22120%22 cy=%229%22 rx=%229%22 ry=%229%22 fill=%22url(%23g)%22 opacity=%22.55%22/%3E%3Cellipse cx=%220%22 cy=%228%22 rx=%223.2%22 ry=%224.4%22 fill=%22%23ffc83a%22/%3E%3Cellipse cx=%22120%22 cy=%228%22 rx=%223.2%22 ry=%224.4%22 fill=%22%23ffc83a%22/%3E%3C/g%3E%3C/svg%3E") 0 0 repeat-x; animation:natal-pisca 2.4s ease-in-out 1.2s infinite;
}
@keyframes natal-pisca { 0%,100% { opacity:1; } 50% { opacity:.35; } }

/* pinheiros nevados no canto inferior direito + neve fina (só transform = leve) */
html[data-skin="v3-clean"][data-skin-variant="natal"]:not(.adventure-mode) body::before {
  content:""; position:fixed; right:18px; bottom:0; width:250px; height:84px; pointer-events:none; z-index:850;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22250%22 height=%2284%22 viewBox=%220 0 250 84%22%3E%3Cg fill=%22%231f6a42%22%3E%3Cpath d=%22M20 10L34 38H28L42 62H32L48 84H-8L8 62H-2L12 38H6z%22/%3E%3Cpath d=%22M130 0L146 34H138L156 62H144L164 84H96L116 62H104L122 34H114z%22/%3E%3Cpath d=%22M225 14L238 40H232L246 64H236L252 84H198L214 64H204L218 40H212z%22/%3E%3C/g%3E%3Cg fill=%22%232a8656%22%3E%3Cpath d=%22M76 30L88 54H82L94 74H86L100 84H52L66 74H58L70 54H64z%22/%3E%3Cpath d=%22M180 38L190 58H185L196 76H188L200 84H160L172 76H164L175 58H170z%22/%3E%3C/g%3E%3Cg fill=%22%23fff%22 opacity=%22.92%22%3E%3Cpath d=%22M20 10l5 11-5-3-5 3zM130 0l6 13-6-4-6 4zM225 14l5 11-5-3-5 3zM76 30l4 9-4-2-4 2zM180 38l4 8-4-2-4 2z%22/%3E%3C/g%3E%3C/svg%3E") center bottom/contain no-repeat; opacity:.95;
}
html[data-skin="v3-clean"][data-skin-variant="natal"]:not(.adventure-mode) body::after {
  content:""; position:fixed; left:0; right:0; top:-600px; height:calc(100% + 600px); pointer-events:none; z-index:900; will-change:transform;
  background-image:
    radial-gradient(2px 2px at 40px 60px, rgba(255,255,255,.75), transparent),
    radial-gradient(1.5px 1.5px at 190px 140px, rgba(255,255,255,.6), transparent),
    radial-gradient(2.5px 2.5px at 110px 250px, rgba(255,255,255,.65), transparent),
    radial-gradient(1.5px 1.5px at 260px 20px, rgba(255,255,255,.55), transparent);
  background-size:300px 300px; opacity:.5; animation:natal-neve 52s linear infinite;
}
html[data-skin="v3-clean"][data-skin-variant="natal"]:not(.adventure-mode)[data-theme="light"] body::after {
  filter:invert(1) sepia(1) hue-rotate(170deg) saturate(2); opacity:.3;
}
@keyframes natal-neve { to { transform:translateY(600px); } }
@media (max-width: 900px) { html[data-skin-variant="natal"] body::before { display:none; } }
@media (prefers-reduced-motion: reduce) {
  html[data-skin-variant="natal"] body::after { display:none; }
  html[data-skin-variant="natal"] .app-header::before, html[data-skin-variant="natal"] .app-header::after { animation:none; }
}


/* ============ Natal animado (29/10/26): camada JS skins/natal_fx.js ============ */
/* os enfeites estaticos de CSS saem; entram varal, neve, pinheiros e trenó vivos dentro de #nt-fx */
html[data-skin="v3-clean"][data-skin-variant="natal"] .app-header::before,html[data-skin="v3-clean"][data-skin-variant="natal"] .app-header::after,html[data-skin="v3-clean"][data-skin-variant="natal"] body::before,html[data-skin="v3-clean"][data-skin-variant="natal"] body::after{display:none !important}
html[data-skin="v3-clean"][data-skin-variant="natal"]{--nt-wire:#8a7a68}
html[data-skin="v3-clean"][data-skin-variant="natal"][data-theme="light"]{--nt-wire:#6b5846}
#nt-fx{position:fixed;inset:0;pointer-events:none;z-index:900;overflow:hidden}
#nt-fx .nt-cv{position:absolute;left:0;top:0}
#nt-fx .nt-lights{position:absolute;left:0;right:0;height:30px}
#nt-fx .nt-bulb{position:absolute;width:7px;height:9px;border-radius:50% 50% 55% 55%;transform-origin:50% -5px;
  animation:nt-onda 3.2s ease-in-out infinite,nt-balanca 4.6s ease-in-out infinite;
  animation-delay:calc(var(--fx-el,0) * -1s - var(--i) * .18s),calc(var(--fx-el,0) * -1s - var(--i) * .3s - var(--r,0s))}
@keyframes nt-onda{0%,100%{opacity:.35;box-shadow:0 0 3px 0 rgba(255,200,60,.3);filter:brightness(.8)}20%{opacity:1;box-shadow:0 0 12px 5px rgba(255,205,70,.9);filter:brightness(1.25)}45%{opacity:.7;box-shadow:0 0 6px 2px rgba(255,200,60,.5);filter:brightness(1)}}
@keyframes nt-balanca{0%,100%{rotate:-5deg}50%{rotate:5deg}}
#nt-fx .nt-trees{position:absolute;right:18px;bottom:0;width:250px;height:84px}
#nt-fx .nt-trees svg{width:250px;height:84px;display:block}
#nt-fx .nt-tw{animation:nt-pisca 1.8s ease-in-out infinite;animation-delay:calc(var(--fx-el,0) * -1s - var(--i) * .23s)}
@keyframes nt-pisca{0%,100%{opacity:.25}50%{opacity:1}}
#nt-fx .nt-sleigh{position:absolute;left:0;top:0;width:190px;height:50px;will-change:transform}
#nt-fx .nt-sleigh svg{display:block}
#nt-fx .leg{transform-box:fill-box;transform-origin:50% 0;animation:nt-galopa .5s ease-in-out infinite}
#nt-fx .leg.b{animation-delay:-.25s}
@keyframes nt-galopa{0%,100%{transform:rotate(26deg)}50%{transform:rotate(-26deg)}}
#nt-fx .nose{animation:nt-glow 1.2s ease-in-out infinite}
@keyframes nt-glow{0%,100%{opacity:.6}50%{opacity:1}}

/* [29/10/26] realismo: lampadas com soquete e brilho de vidro, sombra projetada do trenó */
#nt-fx .nt-bulb{background-image:radial-gradient(circle at 35% 28%,rgba(255,255,255,.9) 0,rgba(255,255,255,0) 42%),radial-gradient(circle at 50% 62%,transparent 52%,rgba(110,55,0,.38) 100%)}
#nt-fx .nt-bulb::before{content:'';position:absolute;left:50%;top:-4px;width:4px;height:4px;margin-left:-2px;background:#2b2b2b;border-radius:1px 1px 0 0}
#nt-fx .nt-sleigh{filter:drop-shadow(0 9px 6px rgba(0,0,0,.38))}
html[data-skin="v3-clean"][data-skin-variant="natal"][data-theme="light"] #nt-fx .nt-sleigh{filter:drop-shadow(0 10px 7px rgba(40,60,90,.28))}
#nt-fx .nt-trees svg{filter:drop-shadow(0 -1px 2px rgba(0,0,0,.25))}

html[data-fx-critters="off"] #nt-fx .nt-sleigh{display:none !important}

/* boneco de neve no canto: acena de vez em quando, cachecol balanca com o vento */
#nt-fx .nt-snowman{position:absolute;bottom:2px;width:90px;height:118px;transition:opacity .5s;filter:drop-shadow(0 2px 3px rgba(20,30,60,.3))}
#nt-fx .nt-snowman svg{display:block;width:90px;height:118px}
#nt-fx .nt-sm-armL{transform-origin:28px 58px;animation:nt-sm-wave 14s ease-in-out infinite}
#nt-fx .nt-sm-scarf{transform-origin:45px 46px;transform:skewX(calc(var(--wd,0) * -9deg)) rotate(calc(var(--wd,0) * 2deg));transition:transform .6s ease-out}
@keyframes nt-sm-wave{0%,82%,100%{transform:rotate(0)}85%{transform:rotate(-26deg)}88%{transform:rotate(6deg)}91%{transform:rotate(-24deg)}94%{transform:rotate(4deg)}97%{transform:rotate(0)}}
@keyframes nt-sm-scarf{0%,100%{transform:skewX(0) rotate(0)}50%{transform:skewX(-4deg) rotate(1.5deg)}}
html[data-fx-critters="off"] #nt-fx .nt-snowman{display:none !important}
@media (prefers-reduced-motion:reduce){#nt-fx .nt-sm-armL,#nt-fx .nt-sm-scarf{animation:none}}

/* neve acumulando (--acc 0..1 definida no JS) */
#nt-fx .nt-trees svg{filter:drop-shadow(0 -1px 2px rgba(0,0,0,.25)) brightness(calc(1 + .32 * var(--acc,0))) saturate(calc(1 - .45 * var(--acc,0)))}
#nt-fx .nt-snowman::after{content:'';position:absolute;left:34px;top:calc(2px - 3px * var(--acc,0));width:22px;height:calc(6px * var(--acc,0));border-radius:50% 50% 30% 30%;background:linear-gradient(#fff,#e6eef9);opacity:calc(var(--acc,0) * 1.4)}
/* pisca-pisca correndo (clique no logo) */
#nt-fx .nt-lights.chase .nt-bulb{animation:nt-chase .7s ease-in-out 5 both;animation-delay:calc(var(--i) * 28ms)}
@keyframes nt-chase{0%,100%{filter:brightness(1)}45%{filter:brightness(2.4) saturate(1.3);box-shadow:0 0 14px 5px rgba(255,220,110,.85)}}