/* ============================================================
   MODO HALLOWEEN «DE PAPEL»
   Noche de cartulina negra y morada, decoración recortada a tijera
   (luna, telarañas de hilo, calabazas, murciélagos, fantasmitas de seda,
   estrellas y lápidas) y tarjetas de partitura vieja con celo de colores.
   Solo con las dos clases: html.recortes.halloween (recortes.js + halloween.js).
   Las piezas que se mueven no llevan filtros: su sombra ya va dibujada.
   ============================================================ */
html.recortes.halloween {
  --hwp-ink: #1d1326;
  --hwp-cream: #fbf3e0;
  --hwp-old: #f3e4bf;
  --hwp-orange: #e06a1c;
  --hwp-purple: #5d3592;
  --hwp-shadow: rgba(6, 0, 16, 0.55);
  --hwp-celo-o: rgba(240, 130, 40, 0.55);
  --hwp-celo-m: rgba(150, 100, 220, 0.5);
}

/* ---------- Fondo: cartulina de noche con fibras ----------
   Se nota el nivel: Fácil con brillo de calabaza, Medio cartulina marrón, Difícil negra. */
@media screen {
  /* una sola imagen en el fondo (barato de repintar); los brillos van en la capa de decoración */
  html.recortes.halloween { background: #22143a url("papel/hw-noche.jpg") 0 0 / 512px 512px !important; }
  html.recortes.halloween[data-nivel="medium"] { background: #3a2218 url("papel/hw-noche-marron.jpg") 0 0 / 512px 512px !important; }
  html.recortes.halloween[data-nivel="hard"] { background: #141016 url("papel/hw-negro.jpg") 0 0 / 256px 256px !important; }
  html.recortes.halloween body { background: transparent !important; }
}
/* brillo de luna arriba y de calabaza abajo (en la capa fija, se pinta una vez) */
.hwp .hwp-sky {
  inset: 0;
  background:
    radial-gradient(60% 50% at 80% 4%, rgba(160, 120, 210, 0.24), transparent 70%),
    radial-gradient(110% 40% at 50% 106%, rgba(232, 116, 31, 0.22), transparent 66%);
}
html[data-nivel="medium"] .hwp .hwp-sky { background: radial-gradient(60% 50% at 80% 4%, rgba(230, 180, 120, 0.18), transparent 70%), radial-gradient(110% 40% at 50% 106%, rgba(170, 90, 30, 0.26), transparent 66%); }
html[data-nivel="hard"] .hwp .hwp-sky { background: radial-gradient(60% 50% at 80% 4%, rgba(170, 150, 190, 0.14), transparent 70%); }

/* ---------- Recortes sueltos de la mesa: papeles de Halloween ----------
   Papel entero (sin transparencia, que se veía sucio) y algo más pequeños. */
html.recortes.halloween .rc-desk { display: block; z-index: -2; }
html.recortes.halloween .rc-scrap {
  background: #2b2134 url("papel/hw-negro.jpg") 0 0 / 256px 256px;
  background-blend-mode: luminosity;
  opacity: 1;
  scale: 0.72;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.5));
}
html.recortes.halloween .rc-scrap:nth-child(5n + 2) { background: #6a4a96 url("papel/hw-morado.jpg") 0 0 / 256px 256px; background-blend-mode: multiply; }
html.recortes.halloween .rc-scrap:nth-child(5n + 3) { background: #7d6f8e url("papel/hw-partitura.jpg") 0 0 / 300px 300px; background-blend-mode: multiply; }
html.recortes.halloween .rc-scrap:nth-child(5n + 4) { background: #4e6234 url("papel/hw-musgo.jpg") 0 0 / 256px 256px; background-blend-mode: normal; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.5)) brightness(0.85); }
html.recortes.halloween .rc-scrap:nth-child(5n) { background: #74391a url("papel/cartulina.jpg") 0 0 / 300px 300px; background-blend-mode: multiply; }
@media (min-width: 1200px) { html.recortes.halloween .rc-scrap { scale: 0.56; } }
@media (min-width: 1700px) { html.recortes.halloween .rc-scrap { scale: 0.46; } }
@media (max-width: 600px) { html.recortes.halloween .rc-scrap { opacity: 0.55; } }

/* ---------- Capa de decoración: una capa propia que no se repinta ---------- */
html.recortes.halloween .hw-layer.hwp { will-change: transform; contain: strict; }
.hwp > * { position: absolute; }
.hwp svg { display: block; width: 100%; height: auto; overflow: visible; }
.hwp .hwp-defs { width: 0; height: 0; }
/* lo que se mueve va en su capa (solo transform/opacity, a saltitos de stop-motion) */
.hwp :is(.hwp-tw, .hwp-spider, .hwp-note, .hwp-bat, .hwp-wing, .hwp-ghost, .hwp-glow) { will-change: transform; }

/* Estrellas de cartulina */
.hwp .hwp-stars { inset: 0; }
.hwp-star {
  position: absolute;
  width: calc(20px * var(--s, 1)); height: calc(20px * var(--s, 1));
  rotate: var(--r, 0deg);
}
.hwp-star svg { height: 100%; }
.hwp-star.hwp-tw { animation: hwp-star 4.2s steps(1, end) infinite; animation-delay: var(--d, 0s); }
@keyframes hwp-star {
  0%, 100% { transform: rotate(0deg) scale(1); }
  33% { transform: rotate(-10deg) scale(0.92); }
  66% { transform: rotate(7deg) scale(1.04); }
}

/* Luna con su nube de papel */
.hwp .hwp-moon {
  top: clamp(64px, 11vh, 130px);
  right: clamp(60px, 15vw, 300px);
  width: clamp(76px, 10.5vw, 160px);
  rotate: -6deg;
}

/* Telarañas de hilo en las esquinas de arriba */
.hwp .hwp-web { top: 0; width: clamp(110px, 18vw, 250px); opacity: 0.85; }
.hwp .hwp-web-l { left: 0; }
.hwp .hwp-web-r { right: 0; transform: scaleX(-1); }
.hwp-thread-l { fill: none; stroke: #ece6f4; stroke-width: 1.5; stroke-linecap: round; opacity: 0.8; }
.hwp-thread-sh { fill: none; stroke: rgba(0, 0, 0, 0.55); stroke-width: 1.5; stroke-linecap: round; }

/* Araña que baja y sube a saltitos */
.hwp .hwp-spider {
  top: 0; left: clamp(56px, 9.5vw, 132px); width: 32px;
  display: flex; flex-direction: column; align-items: center;
  transform-origin: top center;
  animation: hwp-spider 7s steps(10, end) infinite;
}
.hwp-thread { width: 1.6px; height: clamp(64px, 13vh, 140px); background: #ece6f4; opacity: 0.75; box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.45); }
.hwp-spider svg { width: 32px; }
@keyframes hwp-spider {
  0%, 100% { transform: translateY(-18px) rotate(-3deg); }
  50% { transform: translateY(12px) rotate(3deg); }
}

/* Corcheas de cartulina que se balancean junto a los bordes */
.hwp .hwp-note { width: clamp(30px, 3.4vw, 50px); }
.hwp .hwp-note-1 { left: clamp(10px, 3vw, 46px); top: 46%; rotate: -14deg; animation: hwp-sway 3.2s steps(2, end) infinite; }
.hwp .hwp-note-2 { right: clamp(12px, 3.4vw, 54px); top: 38%; rotate: 12deg; animation: hwp-sway 3.8s steps(2, end) infinite reverse; }
@keyframes hwp-sway {
  0%, 100% { transform: rotate(-5deg) translateY(0); }
  50% { transform: rotate(6deg) translateY(-6px); }
}

/* Murciélagos: cruzan por arriba de vez en cuando, aleteando a saltos */
.hwp .hwp-bat { width: clamp(44px, 4.6vw, 70px); left: 0; top: 13%; opacity: 0; }
.hwp .hwp-bat-1 { animation: hwp-bat 28s steps(160, end) infinite; animation-delay: 3s; }
.hwp .hwp-bat-2 { animation: hwp-bat 28s steps(160, end) infinite; animation-delay: 17s; top: 21%; width: clamp(36px, 3.6vw, 56px); }
.hwp-wing { animation: hwp-flap 0.5s steps(1, end) infinite; transform-origin: 50% 45%; }
@keyframes hwp-bat {
  0% { transform: translate(-12vw, 30px); opacity: 1; }
  9% { transform: translate(50vw, -12px); opacity: 1; }
  18% { transform: translate(112vw, -40px); opacity: 1; }
  18.01%, 100% { transform: translate(112vw, -40px); opacity: 0; }
}
@keyframes hwp-flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.55) translateY(3px); } }

/* Fantasmitas de seda asomando por los lados */
.hwp .hwp-ghost { width: clamp(46px, 5.4vw, 84px); opacity: 0.55; }
.hwp .hwp-ghost-1 { left: -10px; top: 62%; rotate: 10deg; animation: hwp-bob 3.6s steps(4, end) infinite; }
.hwp .hwp-ghost-2 { right: -8px; top: 24%; rotate: -12deg; opacity: 0.42; animation: hwp-bob 4.4s steps(4, end) infinite; animation-delay: -1.7s; }
@keyframes hwp-bob {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(4px, -6px) rotate(-2deg); }
  50% { transform: translate(8px, -11px) rotate(1deg); }
  75% { transform: translate(3px, -5px) rotate(2deg); }
}

/* Colinas de cartulina negra, lápidas y calabazas abajo */
.hwp .hwp-hills { left: 0; right: 0; bottom: 0; height: clamp(46px, 10vh, 120px); }
.hwp .hwp-hills svg { height: 100%; }
.hwp .hwp-grave { bottom: clamp(10px, 3.4vh, 40px); width: clamp(30px, 3.6vw, 54px); }
.hwp .hwp-grave-1 { left: clamp(84px, 13vw, 230px); rotate: -6deg; }
.hwp .hwp-grave-2 { right: clamp(90px, 13.5vw, 240px); rotate: 5deg; width: clamp(26px, 3vw, 46px); }
.hwp .hwp-pumpkin { bottom: 2px; width: clamp(64px, 9.5vw, 150px); }
.hwp .hwp-pumpkin-l { left: clamp(4px, 1.6vw, 30px); rotate: -5deg; }
.hwp .hwp-pumpkin-r { right: clamp(4px, 1.6vw, 30px); rotate: 4deg; }
.hwp .hwp-glow { position: absolute; inset: 0; opacity: 0; animation: hwp-candle 3.4s steps(1, end) infinite; }
.hwp .hwp-pumpkin-r .hwp-glow { animation-delay: -1.3s; }
@keyframes hwp-candle {
  0%, 100% { opacity: 0; }
  22% { opacity: 0.9; }
  30% { opacity: 0.7; }
  58% { opacity: 0.95; }
  72% { opacity: 0; }
}

/* En pantallas pequeñas, menos decoración (y nada por el centro) */
@media (max-width: 600px) {
  .hwp :is(.hwp-ghost-2, .hwp-bat-2, .hwp-note-2, .hwp-grave-2) { display: none; }
  .hwp .hwp-moon { width: 56px; top: 54px; right: 10px; }
  .hwp .hwp-pumpkin { width: 54px; }
  .hwp .hwp-grave-1 { left: 62px; width: 26px; bottom: 8px; }
  .hwp .hwp-ghost { width: 40px; opacity: 0.4; }
  .hwp .hwp-note-1 { width: 26px; top: 56%; }
  .hwp .hwp-web { width: 96px; }
  .hwp .hwp-spider { left: 48px; }
  .hwp .hwp-star:nth-child(n + 9) { display: none; }
}

/* ---------- Tarjetas: partitura vieja y amarillenta, con celo naranja o morado ---------- */
html.recortes.halloween .rc-card:is(.setup-card, .results-card, .modal-card, .definition-card, .panel, .game-card, .code-card, .listen-panel) {
  --rc-img: url("papel/hw-partitura-suave.jpg");
  --rc-paper: #fffaf0;
  box-shadow: 0 3px 1.5px rgba(0, 0, 0, 0.42), 0 10px 10px rgba(0, 0, 0, 0.3) !important;
}
html.recortes.halloween .rc-card:is(.setup-card, .results-card, .modal-card, .definition-card, .panel, .game-card, .code-card, .listen-panel):is(.rc-v1, .rc-v4) { --rc-paper: #f9efdc; }
html.recortes.halloween .rc-card:is(.setup-card, .results-card, .modal-card, .definition-card, .panel, .game-card, .code-card, .listen-panel):is(.rc-v2, .rc-v5) { --rc-paper: #fff4e4; }
/* las demás piezas (opciones, fichas…) solo cogen la sombra de noche; sus papeles y colores siguen igual */
html.recortes.halloween .rc-card:is(.option, .option-btn, .ans, .choice, .big-card) { box-shadow: 0 3px 1.5px rgba(0, 0, 0, 0.4), 0 8px 10px rgba(0, 0, 0, 0.26) !important; }

/* celo de colores (naranja y morado, translúcido) */
html.recortes.halloween :is(.setup-card, .results-card, .definition-card, .modal-card).rc-card::after {
  background-color: var(--hwp-celo-o);
  border-left-color: rgba(120, 50, 10, 0.3); border-right-color: rgba(120, 50, 10, 0.3);
}
html.recortes.halloween :is(.setup-card, .results-card, .definition-card, .modal-card).rc-card:is(.rc-v1, .rc-v3, .rc-v5)::after { background-color: var(--hwp-celo-m); }
html.recortes.halloween .game-card.rc-card:nth-child(3n + 1)::after { background-color: var(--hwp-celo-m); }
html.recortes.halloween .game-card.rc-card:nth-child(6n + 4)::after { background-color: var(--hwp-celo-o); }
/* el icono de cada juego: papel crema un poco amarillento */
html.recortes.halloween .game-icon.rc-card::before { background-color: #f1e2c2; }

/* telarañita de hilo en una esquina de las tarjetas grandes (no en Caza fantasmas, que ya trae la suya) */
html.recortes.halloween:not([data-halloween="always"]) :is(.setup-card, .results-card, .modal-card).rc-card::before {
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2060'%3E%3Cpath%20d='M60%200L0.0%200.0M60%200L2.6%2017.3M60%200L10.0%2033.2M60%200L25.6%2049.2M60%200L38.6%2056.0M60%200L60.0%2060.0M48.0%200.0Q50.7%201.4%2048.5%203.5M48.5%203.5Q51.5%204.0%2050.0%206.6M53.1%209.8Q55.6%208.3%2055.7%2011.2M37.0%200.0Q42.3%202.6%2038.0%206.6M46.8%2018.8Q51.6%2015.8%2051.8%2021.5M51.8%2021.5Q56.7%2017.6%2060.0%2023.0M25.0%200.0Q33.0%204.0%2026.5%2010.1M26.5%2010.1Q35.3%2011.6%2030.8%2019.4M30.8%2019.4Q40.5%2019.1%2039.9%2028.7M39.9%2028.7Q47.2%2024.1%2047.5%2032.7M47.5%2032.7Q55.0%2026.8%2060.0%2035.0M13.0%200.0Q23.7%205.4%2015.0%2013.6M15.0%2013.6Q26.8%2015.6%2020.9%2026.0M33.1%2038.5Q42.8%2032.4%2043.2%2043.9M43.2%2043.9Q53.3%2036.0%2060.0%2047.0'%20fill='none'%20stroke='%23fff'%20stroke-opacity='.7'%20stroke-width='1.6'%20transform='translate%28.6%20.9%29'/%3E%3Cpath%20d='M60%200L0.0%200.0M60%200L2.6%2017.3M60%200L10.0%2033.2M60%200L25.6%2049.2M60%200L38.6%2056.0M60%200L60.0%2060.0M48.0%200.0Q50.7%201.4%2048.5%203.5M48.5%203.5Q51.5%204.0%2050.0%206.6M53.1%209.8Q55.6%208.3%2055.7%2011.2M37.0%200.0Q42.3%202.6%2038.0%206.6M46.8%2018.8Q51.6%2015.8%2051.8%2021.5M51.8%2021.5Q56.7%2017.6%2060.0%2023.0M25.0%200.0Q33.0%204.0%2026.5%2010.1M26.5%2010.1Q35.3%2011.6%2030.8%2019.4M30.8%2019.4Q40.5%2019.1%2039.9%2028.7M39.9%2028.7Q47.2%2024.1%2047.5%2032.7M47.5%2032.7Q55.0%2026.8%2060.0%2035.0M13.0%200.0Q23.7%205.4%2015.0%2013.6M15.0%2013.6Q26.8%2015.6%2020.9%2026.0M33.1%2038.5Q42.8%2032.4%2043.2%2043.9M43.2%2043.9Q53.3%2036.0%2060.0%2047.0'%20fill='none'%20stroke='%235a4a5e'%20stroke-opacity='.55'%20stroke-width='.9'%20stroke-linecap='round'/%3E%3C/svg%3E") right 4px top 4px / 76px 76px no-repeat,
    var(--rc-img, url("papel/hw-partitura-suave.jpg")) 0 0 / 512px 512px,
    var(--rc-paper, #fffaf0);
  background-blend-mode: normal, multiply, normal;
}

/* ---------- Botones y tiras sobre la noche ---------- */
html.recortes.halloween :is(.rc-btn, .rc-strip, .rc-letter)::after { background: var(--hwp-shadow); }
html.recortes.halloween .rc-btn.btn-secondary { --rc-btn: #fbf3e0; }
html.recortes.halloween .rc-btn.btn-dark { --rc-btn: #1d1326; }
html.recortes.halloween .rc-btn.btn-dark::before { background-image: url("papel/hw-negro.jpg"); background-size: 256px 256px; }
/* tiras (menú, voz, marcadores): cada juego mantiene su color; se les pone el margen blanco del recorte */
html.recortes.halloween .rc-strip:is(.menu-link, .voice-toggle, .pill, .pill-btn, .score-pill, .hw-toggle, .chip)::before { border: 2px solid #fbf8f1; }
html.recortes.halloween .rc-strip.hw-toggle[aria-pressed="true"]::before { background-color: #4a2a74; background-image: url("papel/hw-morado.jpg"); background-size: 200px 200px; background-blend-mode: multiply; }

/* ---------- Títulos: letras recortadas en naranja, negro, morado y blanco ---------- */
html.recortes.halloween .rc-letter::before { border: 2px solid #fbf8f1; }
html.recortes.halloween .rc-l-white { --lp: #fffdf7; color: var(--hwp-ink); }
html.recortes.halloween .rc-l-score { color: var(--hwp-ink); }
html.recortes.halloween .rc-l-score::before { background: #e8741f url("papel/cartulina.jpg") 30% 20% / 220px 220px; background-blend-mode: multiply; }
html.recortes.halloween .rc-l-cream { --lp: #5d3592; color: #fff; }
html.recortes.halloween .rc-l-cream::before { background-image: url("papel/hw-morado.jpg"); background-size: 160px 160px; }
html.recortes.halloween .rc-l-ink { --lp: #17101d; color: #ff9b45; }
html.recortes.halloween .rc-l-ink::before { background-image: url("papel/hw-negro.jpg"); background-size: 160px 160px; }
html.recortes.halloween .rc-l-orange { color: var(--hwp-ink); }
html.recortes.halloween .rc-l-orange::before { background: #f3e4bf url("papel/hw-partitura.jpg") 40% 30% / 240px 240px; }

/* ---------- Menú ---------- */
html.recortes.halloween .menu-sub { color: #f1e6ff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); }

/* Foco visible sobre la noche */
html.recortes.halloween :is(.rc-btn, .rc-strip, .game-card):focus-visible { outline: 3px dashed #ffd27a; outline-offset: 4px; }

/* ---------- Reducir movimiento: papel quieto ---------- */
@media (prefers-reduced-motion: reduce) {
  .hwp *, .hwp *::before, .hwp *::after { animation: none !important; }
  .hwp .hwp-bat { display: none; }
  .hwp .hwp-glow { opacity: 0.6; }
}

/* ---------- Impresión: nada de la noche ---------- */
@media print {
  .hwp, html.recortes.halloween .rc-desk { display: none !important; }
  html.recortes.halloween, html.recortes.halloween body { background: #fff !important; }
}