/* Temas de temporada: solo se aplican si js/tema.js los activa (atributo data-tema en <html>). Sin tema, este archivo no cambia nada */

/* ===== HALLOWEEN =====
 Noche morada (siempre oscura, aunque el sistema esté en modo claro), luna, murciélagos, telaraña, calabazas y botones naranja/morado.
 Los verdes de acierto y los rojos de fallo no cambian: siguen significando lo mismo */
:root[data-tema="halloween"]{--bg:#160f24;--card:#231a35;--ink:#f6f0ff;--mute:#a99bbd;--line:#3b2d52;--sky1:#2c1850;--sky2:#120b1f;--dot:rgba(255,160,70,.16);--flagop:.28;--pumpkin:#ff7a1a;--pumpkind:#d65f00;--purple:#9b5de5;--purpled:#7740c2;color-scheme:dark}
[data-tema="halloween"] .bg:after{content:"";position:absolute;top:7%;right:9%;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 36% 34%,#fffbe3,#f7dd8a 55%,#e3b94f);box-shadow:0 0 60px 18px rgba(255,214,120,.28);opacity:.95}
[data-tema="halloween"] button.p{background:var(--pumpkin);border-color:var(--pumpkin) var(--pumpkin) var(--pumpkind)}
[data-tema="halloween"] button.b{background:var(--purple);border-color:var(--purple) var(--purple) var(--purpled)}
[data-tema="halloween"] .stripe i:nth-child(1),[data-tema="halloween"] .stripe i:nth-child(4){background:var(--pumpkin)}
[data-tema="halloween"] .stripe i:nth-child(2){background:var(--purple)}
[data-tema="halloween"] .stripe i:nth-child(3){background:#8ee000}
/* Calabaza junto al título */
[data-tema="halloween"] #cov h1:after{content:"";display:inline-block;width:.85em;height:.85em;margin-left:.15em;vertical-align:-.08em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cellipse cx='13' cy='24' rx='9' ry='12' fill='%23d9590a'/%3E%3Cellipse cx='27' cy='24' rx='9' ry='12' fill='%23d9590a'/%3E%3Cellipse cx='20' cy='24' rx='10' ry='13' fill='%23ff8a1f'/%3E%3Cpath d='M19 12q0-6 5-8' stroke='%2346872a' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M12 21l4-5 3 5zM21 21l3-5 4 5z' fill='%233a1a00'/%3E%3Cpath d='M11 27h18l-2 5-3-2-3 3-3-3-3 2z' fill='%233a1a00'/%3E%3C/svg%3E") center/contain no-repeat;animation:hwbob 3s ease-in-out infinite}
@keyframes hwbob{50%{transform:translateY(-4px) rotate(6deg)}}
/* Calabazas que flotan entre las banderas del fondo (mismo movimiento que ellas) */
.bg i.hwpk{aspect-ratio:1;border-radius:0;box-shadow:none;opacity:.75;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cellipse cx='13' cy='24' rx='9' ry='12' fill='%23d9590a'/%3E%3Cellipse cx='27' cy='24' rx='9' ry='12' fill='%23d9590a'/%3E%3Cellipse cx='20' cy='24' rx='10' ry='13' fill='%23ff8a1f'/%3E%3Cpath d='M19 12q0-6 5-8' stroke='%2346872a' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M12 21l4-5 3 5zM21 21l3-5 4 5z' fill='%23ffd23f'/%3E%3Cpath d='M11 27h18l-2 5-3-2-3 3-3-3-3 2z' fill='%23ffd23f'/%3E%3C/svg%3E") center/contain no-repeat}
/* Murciélagos: cruzan la pantalla de izquierda a derecha subiendo y bajando, batiendo las alas */
.hw{position:absolute;inset:0}
.hwbat{position:absolute;left:0;width:calc(76px*var(--s));animation:hwfly var(--d) linear infinite}
.hwbat svg{display:block;width:100%;fill:#07030d;filter:drop-shadow(0 0 2px rgba(200,160,255,.7));animation:hwflap .18s ease-in-out infinite alternate;transform-origin:50% 40%}
@keyframes hwfly{0%{transform:translate(-80px,0)}25%{transform:translate(25vw,-30px)}50%{transform:translate(50vw,10px)}75%{transform:translate(75vw,-25px)}100%{transform:translate(calc(100vw + 80px),0)}}
@keyframes hwflap{to{transform:scaleY(.35)}}
/* Telaraña en la esquina de arriba a la izquierda */
.hwweb{position:absolute;top:0;left:0;width:170px;opacity:.35}
.hwweb svg{display:block;width:100%;fill:none;stroke:#e9e0ff;stroke-width:.8}
@media(max-width:520px){[data-tema="halloween"] .bg:after{width:46px;height:46px;top:66px;right:4%}.hwweb{width:110px}.hwbat{display:none}}   /* móvil: sin murciélagos (su sombra animada gasta mucho); quedan luna, telaraña y calabazas */
@media(prefers-reduced-motion:reduce){.hwbat{display:none}[data-tema="halloween"] #cov h1:after{animation:none}}

/* ===== NAVIDAD ("christmas") =====
 Nieve cayendo, guirnalda de luces arriba, nieve en el suelo, bolas y regalos entre las banderas, árbol junto al título y botones rojo/verde pino.
 Respeta el modo claro/oscuro como el resto del juego (a diferencia de Halloween, siempre de noche): claro = día nevado, oscuro = noche de invierno.
 Mismas reglas que css/01-base.css: sin elegir sigue al sistema; el botón de la luna pone data-theme en <html>. Los verdes de acierto y los rojos de fallo no cambian */
:root[data-tema="christmas"]{--bg:#eef6fc;--card:#fff;--ink:#2b3a4a;--mute:#6b7c8c;--line:#d6e3ee;--sky1:#bcdcf3;--sky2:#e2eff9;--dot:rgba(28,120,190,.16);--flagop:.5;--nieve:#8fb9dc;--xred:#e63946;--xredd:#b8232f;--pine:#1f9d55;--pined:#157a41;--gold:#ffd166}
@media (prefers-color-scheme:dark){:root[data-tema="christmas"]:not([data-theme="light"]){--bg:#0e1f33;--card:#16304b;--ink:#f3f8ff;--mute:#9fb4c8;--line:#2a4763;--sky1:#1b3a5c;--sky2:#0b1826;--dot:rgba(255,255,255,.14);--flagop:.3;--nieve:#fff;color-scheme:dark}}
:root[data-tema="christmas"][data-theme="dark"]{--bg:#0e1f33;--card:#16304b;--ink:#f3f8ff;--mute:#9fb4c8;--line:#2a4763;--sky1:#1b3a5c;--sky2:#0b1826;--dot:rgba(255,255,255,.14);--flagop:.3;--nieve:#fff;color-scheme:dark}
[data-tema="christmas"] button.p{background:var(--xred);border-color:var(--xred) var(--xred) var(--xredd)}
[data-tema="christmas"] button.b{background:var(--pine);border-color:var(--pine) var(--pine) var(--pined)}
[data-tema="christmas"] .stripe i:nth-child(1){background:var(--xred)}
[data-tema="christmas"] .stripe i:nth-child(2){background:var(--pine)}
[data-tema="christmas"] .stripe i:nth-child(3){background:var(--gold)}
[data-tema="christmas"] .stripe i:nth-child(4){background:var(--nieve)}
/* Nieve en el suelo: una ola blanca abajo del todo */
[data-tema="christmas"] .bg:after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;opacity:.9;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 70' preserveAspectRatio='none'%3E%3Cpath d='M0 30Q25 12 50 26T100 24T150 28T200 30V70H0z' fill='%23e6f0fb'/%3E%3Cpath d='M0 44Q30 32 60 42T120 40T200 44V70H0z' fill='%23ffffff'/%3E%3C/svg%3E") 0 0/400px 100% repeat-x}
/* Árbol junto al título */
[data-tema="christmas"] #cov h1:after{content:"";display:inline-block;width:.85em;height:.85em;margin-left:.15em;vertical-align:-.08em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='17' y='32' width='6' height='6' rx='1' fill='%238a5a2b'/%3E%3Cpath d='M20 6L31 20H26L34 32H6L14 20H9z' fill='%231f9d55'/%3E%3Cpath d='M20 6L31 20H26L34 32H20z' fill='%23157a41'/%3E%3Ccircle cx='15' cy='25' r='1.8' fill='%23e63946'/%3E%3Ccircle cx='25' cy='27' r='1.8' fill='%23ffd166'/%3E%3Ccircle cx='21' cy='17' r='1.6' fill='%234fc3f7'/%3E%3Cpath d='M20 1l1.5 3.2 3.5.4-2.6 2.4.7 3.5L20 8.8l-3.1 1.7.7-3.5L15 4.6l3.5-.4z' fill='%23ffd166'/%3E%3C/svg%3E") center/contain no-repeat;animation:nvbob 3s ease-in-out infinite;transform-origin:50% 100%}
@keyframes nvbob{50%{transform:rotate(-5deg)}}
/* Bolas y regalos que flotan entre las banderas del fondo (mismo movimiento que ellas) */
.bg i.nvbola,.bg i.nvregalo{aspect-ratio:1;border-radius:0;box-shadow:none;opacity:.8}
.bg i.nvbola{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2v6' stroke='%23c9d6e3' stroke-width='1.5'/%3E%3Crect x='16' y='7' width='8' height='5' rx='1' fill='%23ffd166'/%3E%3Ccircle cx='20' cy='25' r='13' fill='%23e63946'/%3E%3Cpath d='M8 23q12 5 24 0' stroke='%23ffd166' stroke-width='2' fill='none'/%3E%3Ccircle cx='15' cy='20' r='3' fill='%23fff' opacity='.5'/%3E%3C/svg%3E") center/contain no-repeat}
.bg i.nvregalo{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='6' y='16' width='28' height='20' rx='2' fill='%231f9d55'/%3E%3Crect x='4' y='11' width='32' height='7' rx='2' fill='%2328b866'/%3E%3Cpath d='M18 11h4v25h-4z' fill='%23ffd166'/%3E%3Cpath d='M20 11c-6-9-13-2-6 0zM20 11c6-9 13-2 6 0z' fill='none' stroke='%23ffd166' stroke-width='2.5'/%3E%3C/svg%3E") center/contain no-repeat}
/* Nieve: dos capas de copos (lejos, pequeños y lentos; cerca, grandes y más rápidos). Cada capa es un dibujo que se repite
 y baja justo un dibujo entero por vuelta, así no se nota el salto. Se mueve con transform (lo hace la tarjeta gráfica, gasta poco) */
.nv{position:absolute;inset:0}
.nvnieve{position:absolute;left:0;right:0;top:-220px;height:calc(100% + 220px);background-image:radial-gradient(circle at 20px 30px,var(--nieve)1.4px,transparent 2px),radial-gradient(circle at 90px 110px,var(--nieve)1.2px,transparent 1.8px),radial-gradient(circle at 160px 60px,var(--nieve)1.6px,transparent 2.2px),radial-gradient(circle at 60px 180px,var(--nieve)1.3px,transparent 1.9px),radial-gradient(circle at 190px 160px,var(--nieve)1.1px,transparent 1.7px),radial-gradient(circle at 130px 200px,var(--nieve)1.5px,transparent 2.1px);background-size:220px 220px;opacity:.55;animation:nvcae 22s linear infinite}
.nvnieve.cerca{top:-300px;height:calc(100% + 300px);background-image:radial-gradient(circle at 40px 50px,var(--nieve)2.4px,transparent 3.2px),radial-gradient(circle at 210px 130px,var(--nieve)2px,transparent 2.8px),radial-gradient(circle at 120px 250px,var(--nieve)2.6px,transparent 3.4px),radial-gradient(circle at 270px 20px,var(--nieve)2.2px,transparent 3px);background-size:300px 300px;opacity:.8;animation-name:nvcae2;animation-duration:13s}
@keyframes nvcae{to{transform:translateY(220px)}}
@keyframes nvcae2{to{transform:translateY(300px)}}
/* Guirnalda de luces arriba: tramos de cable con dos bombillas cada uno; las bombillas se encienden y apagan a destiempo */
.nvluces{position:absolute;top:-4px;left:0;display:flex}
.nvluces svg{display:block;width:120px;height:46px;flex:none;overflow:visible}
.nvluces .cable{fill:none;stroke:#1d3527;stroke-width:2}
.nvluces .casq{fill:#3b4f5e}
.nvluces .halo{opacity:.35;animation:nvbrilla 1.6s ease-in-out infinite alternate}
.nvluces .bom{animation:nvbom 1.6s ease-in-out infinite alternate}
.nvluces g:nth-of-type(2) .halo,.nvluces g:nth-of-type(2) .bom{animation-delay:-.8s}   /* la segunda bombilla de cada tramo, a destiempo */
@keyframes nvbrilla{to{opacity:.05}}
@keyframes nvbom{to{opacity:.55}}
@media(max-width:520px){[data-tema="christmas"] .bg:after{height:40px}.nvnieve:not(.cerca){display:none}.nvluces svg{width:84px;height:32px}}   /* móvil: una sola capa de nieve y luces más pequeñas */
@media(prefers-reduced-motion:reduce){.nvnieve{animation:none}.nvluces .halo,.nvluces .bom{animation:none}[data-tema="christmas"] #cov h1:after{animation:none}}