/* ========================================================
   MODO HALLOWEEN - JUEGOS MUSICALES PLAY
   Se activa con la clase .halloween en <html> (ver halloween.js).
   Fondo de noche, telarañas, fantasmas, murciélagos y calabazas.
   La decoración va por detrás del juego y no recibe toques.
   ======================================================== */

@media screen {
  html.halloween {
    --hw-night: #1b1030;
    --hw-night-2: #2d1650;
    --hw-web: rgba(255, 255, 255, 0.32);
    --hw-ghost: #f4efff;
    --hw-pumpkin: #e8741f;
    --hw-pumpkin-dark: #b9520f;
    --hw-glow: #ffd27a;
    background: radial-gradient(120% 80% at 50% 0%, var(--hw-night-2) 0%, var(--hw-night) 62%, #120a22 100%) fixed !important;
    background-color: var(--hw-night) !important;
  }
  /* el fondo pasa al <html> para que la decoración quede entre el fondo y el juego */
  html.halloween body { background: transparent !important; }

  .hw-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
  }
  .hw-layer > * { position: absolute; }
  .hw-layer svg { display: block; width: 100%; height: auto; overflow: visible; }

  /* Estrellas */
  .hw-stars { inset: 0; }
  .hw-star {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: #fff6d8;
    opacity: 0.55;
    animation: hw-twinkle 3.6s ease-in-out infinite;
    animation-delay: var(--d, 0s);
  }
  .hw-star:nth-child(3n) { width: 2px; height: 2px; }
  @keyframes hw-twinkle { 50% { opacity: 0.15; } }

  /* Luna */
  .hw-moon {
    top: clamp(70px, 12vh, 120px);
    right: clamp(18px, 8vw, 110px);
    width: clamp(56px, 9vw, 110px);
    filter: drop-shadow(0 0 28px rgba(255, 228, 160, 0.45));
  }
  .hw-moon-disc { fill: #fbe8b8; }
  .hw-crater { fill: #ecd19a; }

  /* Telarañas en las dos esquinas de arriba (simétricas) */
  .hw-web { top: 0; width: clamp(120px, 20vw, 230px); }
  .hw-web-l { left: 0; }
  .hw-web-r { right: 0; transform: scaleX(-1); }
  .hw-web-svg path { fill: none; stroke: var(--hw-web); stroke-width: 1.3; stroke-linecap: round; }

  /* Araña que cuelga de la telaraña izquierda */
  .hw-spider {
    top: 0;
    left: clamp(58px, 10vw, 118px);
    width: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: top center;
    animation: hw-spider 7s var(--ease-in-out, ease-in-out) infinite;
  }
  .hw-thread { width: 1.3px; height: clamp(70px, 14vh, 130px); background: var(--hw-web); }
  .hw-spider-svg { width: 30px; }
  .hw-legs path { fill: none; stroke: #0d0716; stroke-width: 2.6; stroke-linecap: round; }
  .hw-spider-body { fill: #0d0716; stroke: rgba(255, 255, 255, 0.25); stroke-width: 1; }
  .hw-spider-eye { fill: #ff9b4a; }
  @keyframes hw-spider {
    0%, 100% { transform: translateY(-18px) rotate(-3deg); }
    50% { transform: translateY(14px) rotate(3deg); }
  }

  /* Fantasmas que flotan despacio, muy suaves para no distraer */
  .hw-ghost { width: clamp(54px, 7vw, 90px); left: 0; opacity: 0.2; will-change: transform; }
  .hw-ghost-body { fill: var(--hw-ghost); }
  .hw-ghost-eye { fill: var(--hw-night); }
  .hw-ghost-1 { top: 26%; animation: hw-float-r 46s linear infinite; }
  .hw-ghost-2 { top: 58%; animation: hw-float-l 58s linear infinite; animation-delay: -20s; opacity: 0.15; }
  .hw-ghost-3 { top: 40%; animation: hw-float-r 70s linear infinite; animation-delay: -44s; width: clamp(40px, 5vw, 64px); opacity: 0.13; }
  @keyframes hw-float-r {
    0% { transform: translate(-15vw, 0); }
    25% { transform: translate(22vw, -24px); }
    50% { transform: translate(55vw, 10px); }
    75% { transform: translate(85vw, -18px); }
    100% { transform: translate(115vw, 0); }
  }
  @keyframes hw-float-l {
    0% { transform: translate(115vw, 0) scaleX(-1); }
    25% { transform: translate(80vw, 20px) scaleX(-1); }
    50% { transform: translate(48vw, -14px) scaleX(-1); }
    75% { transform: translate(16vw, 16px) scaleX(-1); }
    100% { transform: translate(-15vw, 0) scaleX(-1); }
  }

  /* Murciélagos: cruzan de vez en cuando por arriba */
  .hw-bat { width: clamp(38px, 4.5vw, 56px); left: 0; top: 14%; opacity: 0; }
  .hw-bat-svg path { fill: #0b0614; }
  .hw-bat-eye { fill: #ffb35c; }
  .hw-bat-svg { animation: hw-flap 0.5s ease-in-out infinite alternate; transform-origin: center; }
  .hw-bat-1 { animation: hw-bat 26s linear infinite; animation-delay: 3s; }
  .hw-bat-2 { animation: hw-bat 26s linear infinite; animation-delay: 16s; top: 22%; }
  @keyframes hw-bat {
    0% { transform: translate(-10vw, 30px); opacity: 0.85; }
    18% { transform: translate(110vw, -40px); opacity: 0.85; }
    18.01%, 100% { transform: translate(110vw, -40px); opacity: 0; }
  }
  @keyframes hw-flap { from { transform: scaleY(1); } to { transform: scaleY(0.55); } }

  /* Calabazas en las dos esquinas de abajo (simétricas) */
  .hw-pumpkin { bottom: -6px; width: clamp(64px, 9vw, 120px); }
  .hw-pumpkin-l { left: clamp(4px, 2vw, 26px); }
  .hw-pumpkin-r { right: clamp(4px, 2vw, 26px); transform: scaleX(-1); }
  .hw-pk-1 { fill: var(--hw-pumpkin); }
  .hw-pk-2 { fill: var(--hw-pumpkin-dark); }
  .hw-stem { fill: #4d7a2a; }
  .hw-face { fill: var(--hw-glow); animation: hw-glow 4s ease-in-out infinite; }
  @keyframes hw-glow { 50% { fill: #ffb347; } }

  /* Tarjetas: telaraña pequeña en la esquina de arriba a la derecha */
  html.halloween :is(.setup-card, .results-card, .modal-card, .game-card, .definition-card, .panel) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%237a6a62' stroke-opacity='.35' stroke-width='1'%3E%3Cpath d='M60 0L0 0M60 0L8 30M60 0L30 52M60 0L60 60M60 0L60 60'/%3E%3Cpath d='M48 0Q50 8 54 12Q55 9 60 12M36 0Q40 14 47 22Q51 22 60 24M24 0Q30 20 40 34Q48 33 60 36M12 0Q20 26 33 46Q46 44 60 48'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 64px 64px;
  }

  /* Detalles del menú inicial */
  html.halloween .menu-sub { color: #e9dcff; }
  html.halloween .game-card.is-soon { background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); }

  /* En pantallas pequeñas, menos decoración */
  @media (max-width: 600px) {
    .hw-ghost-3, .hw-bat-2, .hw-moon { display: none; }
    .hw-pumpkin { width: 56px; opacity: 0.85; }
  }
}

/* Al imprimir (cartones del bingo) no se imprime nada de Halloween */
@media print {
  .hw-layer { display: none !important; }
}

/* Reducir movimiento: la decoración se queda quieta */
@media (prefers-reduced-motion: reduce) {
  .hw-layer *, .hw-layer *::before, .hw-layer *::after { animation: none !important; }
  .hw-ghost-1 { transform: translate(6vw, 0); }
  .hw-ghost-2 { transform: translate(78vw, 0) scaleX(-1); }
  .hw-ghost-3, .hw-bat { display: none; }
}

/* Foco visible sobre el fondo de noche */
@media screen {
  html.halloween :is(.menu-link, .pill-btn, .hw-toggle):focus-visible { outline-color: #ffffff; }
}