/* ============================================================
   LO-E · decoración por temporada
   Se enciende sola segun la fecha (halloween y navidad) y se
   puede apagar a mano. Todo es CSS: no pesa nada y se puede
   desactivar con prefers-reduced-motion.
   ============================================================ */

/* ---------- base ---------- */
.loe-temporada{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.loe-temporada[hidden]{display:none}
.loe-banda{position:fixed;left:0;right:0;top:0;z-index:40;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:6px 12px;font:700 clamp(.56rem,1.4vw,.72rem) "DM Mono",monospace;letter-spacing:.08em;
  background:rgba(20,8,32,.92);border-bottom:1px solid rgba(255,255,255,.14);color:#fff;flex-wrap:wrap}
.loe-banda button{pointer-events:auto;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);color:#fff;
  border-radius:99px;padding:4px 10px;font:inherit;font-size:.9em;cursor:pointer;touch-action:manipulation}
.loe-banda button:active{transform:scale(.96)}
.loe-pausa{position:fixed;right:10px;bottom:10px;z-index:40;pointer-events:auto;border:1px solid rgba(255,255,255,.3);
  background:rgba(20,8,32,.86);color:#fff;border-radius:99px;padding:7px 12px;font:700 .56rem "DM Mono",monospace;cursor:pointer}

/* ---------- HALLOWEEN: 1 de octubre a 1 de noviembre ---------- */
[data-temporada="halloween"]{--ink:#fff6ec;--muted:#e0b9a8;--cyan:#ffa53d;--violet:#b06cff;--line:rgba(255,180,90,.28)}
[data-temporada="halloween"] body{background:#140a1f}
[data-temporada="halloween"] body:before{background:#ff7a18;opacity:.3}
[data-temporada="halloween"] body:after{background:#7b2ff7;opacity:.3}
[data-temporada="halloween"] .card{background:rgba(44,24,26,.82)}
[data-temporada="halloween"] .card:hover,[data-temporada="halloween"] .card:focus-visible{border-color:#ff9a3d}
[data-temporada="halloween"] .card:after{opacity:.95}
[data-temporada="halloween"] .loe-banda{background:rgba(52,18,10,.94);border-bottom-color:rgba(255,150,60,.4)}
.loe-temporada[data-tipo="halloween"] .luz{position:absolute;top:-10%;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,140,40,.5),transparent 70%);filter:blur(6px);animation:luz 5s ease-in-out infinite}
.loe-temporada[data-tipo="halloween"] .luz.a{left:8%;animation-delay:.4s}
.loe-temporada[data-tipo="halloween"] .luz.b{left:44%;animation-delay:1.6s}
.loe-temporada[data-tipo="halloween"] .luz.c{left:78%;animation-delay:2.8s}
@keyframes luz{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.75;transform:scale(1.15)}}
.loe-temporada[data-tipo="halloween"] .hoja{position:absolute;top:-8vh;font-size:20px;opacity:.85;
  animation:caer linear infinite}
@keyframes caer{from{transform:translateY(-10vh) rotate(0)}to{transform:translateY(108vh) rotate(540deg)}}
.loe-temporada[data-tipo="halloween"] .telaraña{position:absolute;width:150px;height:150px;opacity:.35;
  background:
    radial-gradient(circle at 0 0,transparent 34px,rgba(255,255,255,.85) 35px 36px,transparent 37px),
    radial-gradient(circle at 0 0,transparent 68px,rgba(255,255,255,.7) 69px 70px,transparent 71px),
    conic-gradient(from 0deg at 0 0,rgba(255,255,255,.6) 0 1deg,transparent 1deg 44deg,
      rgba(255,255,255,.6) 44deg 45deg,transparent 45deg 89deg,rgba(255,255,255,.6) 89deg 90deg,
      transparent 90deg 134deg,rgba(255,255,255,.6) 134deg 135deg,transparent 135deg 179deg,
      rgba(255,255,255,.6) 179deg 180deg,transparent 180deg 224deg,rgba(255,255,255,.6) 224deg 225deg,
      transparent 225deg 269deg,rgba(255,255,255,.6) 269deg 270deg,transparent 270deg 314deg,
      rgba(255,255,255,.6) 314deg 315deg,transparent 315deg 359deg,rgba(255,255,255,.6) 359deg 360deg)}
.loe-temporada[data-tipo="halloween"] .telaraña.i{left:0;top:0;transform-origin:0 0}
.loe-temporada[data-tipo="halloween"] .telaraña.d{right:0;top:0;transform-origin:100% 0;transform:scaleX(-1)}
.loe-temporada[data-tipo="halloween"] .calabaza{position:absolute;font-size:28px;animation:flotar 6s ease-in-out infinite}
.loe-temporada[data-tipo="halloween"] .calabaza.a{left:6%;bottom:8%}
.loe-temporada[data-tipo="halloween"] .calabaza.b{right:8%;bottom:12%;animation-delay:1.5s;font-size:22px}
@keyframes flotar{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(4deg)}}

/* ---------- NAVIDAD: 1 de diciembre a 6 de enero ---------- */
[data-temporada="navidad"]{--ink:#f2f7ff;--muted:#a9c4e8;--cyan:#7ef0ff;--violet:#ff6b81;--line:rgba(180,220,255,.26)}
[data-temporada="navidad"] body{background:#071228}
[data-temporada="navidad"] body:before{background:#1d6bff;opacity:.28}
[data-temporada="navidad"] body:after{background:#e0314f;opacity:.22}
[data-temporada="navidad"] .card{background:rgba(16,34,66,.82)}
[data-temporada="navidad"] .card:hover,[data-temporada="navidad"] .card:focus-visible{border-color:#ffd166}
[data-temporada="navidad"] .card:after{opacity:.95}
[data-temporada="navidad"] .loe-banda{background:rgba(8,32,66,.94);border-bottom-color:rgba(255,209,102,.45)}
.loe-temporada[data-tipo="navidad"] .copo{position:absolute;top:-6vh;font-size:16px;opacity:.9;color:#eaf6ff;
  animation:nieve linear infinite}
@keyframes nieve{from{transform:translateY(-8vh) translateX(0)}to{transform:translateY(110vh) translateX(6vw)}}
.loe-temporada[data-tipo="navidad"] .bombilla{position:absolute;top:-4px;width:9px;height:14px;border-radius:50%;
  background:#ffd166;box-shadow:0 0 10px #ffd166;animation:parpadeo 2.4s ease-in-out infinite}
@keyframes parpadeo{0%,100%{opacity:.35}50%{opacity:1}}
.loe-temporada[data-tipo="navidad"] .arbol{position:absolute;right:5%;bottom:6%;font-size:56px;
  filter:drop-shadow(0 6px 18px rgba(255,80,80,.45));animation:flotar 7s ease-in-out infinite}

/* ---------- la banda ocupa sitio: el contenido baja ---------- */
[data-temporada] .wrap,[data-temporada] body>main,[data-temporada] .contenido{padding-top:64px}
[data-temporada] .loe-temporada[data-tipo="navidad"] .bombulla{top:40px}

/* ---------- si el jugador no quiere animaciones ---------- */
@media (prefers-reduced-motion:reduce){
  .loe-temporada *{animation:none !important}
}