/* ============================================================
   ESTILO «RECORTES DE PARTITURAS»
   Todo es papel recortado a tijera (y mal recortado):
   cartulina de fondo, partituras recortadas, tiras de papel y celo.
   Lo activa recortes.js (clase .recortes en <html>).
   ============================================================ */
html.recortes {
  --rc-cream: #f6efe0;
  --rc-ink: #2b1d16;
  --rc-shadow: drop-shadow(0 3px 1.5px rgba(50, 20, 5, 0.32)) drop-shadow(0 9px 10px rgba(50, 20, 5, 0.18));
  --rc-shadow-sm: drop-shadow(0 2px 1px rgba(50, 20, 5, 0.35)) drop-shadow(0 5px 6px rgba(50, 20, 5, 0.15));
}

/* Fondo: cartulina con fibras (respeta el color de cada nivel) */
html.recortes:not(.halloween), html.recortes:not(.halloween) body {
  background-image: url("papel/grano.png") !important;
  background-size: 256px 256px !important;
}

/* ---------- Recortes grandes: tarjetas de partitura ---------- */
.recortes .rc-card {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  isolation: isolate;
}
/* Sombra sin filtros: el mismo corte en oscuro un poco más abajo (contacto)
   y una sombra suave alrededor. Así la tarjeta no se vuelve a pintar entera cada vez
   que algo de dentro se mueve (era lo que hacía ir a tirones).
   Las piezas que se mueven (gotas, bombas, pentagramas de fantasma) llevan su propia sombra (::after). */
.recortes .rc-card:not(:where(.drop, .bomb, .ghost-staff)) {
  background: var(--rc-sc, var(--rc-shc0)) 0 3px / 100% 100% no-repeat !important;
  border-radius: 3px !important;
  box-shadow: 0 3px 1.5px rgba(50, 20, 5, 0.3), 0 9px 10px rgba(50, 20, 5, 0.17) !important;
}
.recortes .rc-card:not(.drop):not(.bomb):not(.ghost-staff) { position: relative; }
.recortes .rc-card::before {
  content: "";
  position: absolute; inset: -2px;
  z-index: -1;
  background: var(--rc-paper, var(--rc-cream)) var(--rc-img, url("papel/partitura-suave.jpg")) 0 0 / 512px 512px;
  background-blend-mode: multiply;
  border: 3px solid #fffdf7;          /* margen blanco: el corte lo deja desigual */
  clip-path: var(--rc-p, var(--rc-poly0));
  /* máscara solo si un juego pide una forma especial (--rc-mx) */
  -webkit-mask: var(--rc-mx, none) 0 0 / 100% 100% no-repeat;
  mask: var(--rc-mx, none) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.recortes .rc-card.rc-v0 { --rc-m: var(--rc-cut0); --rc-p: var(--rc-poly0); --rc-sc: var(--rc-shc0); --rc-img: url("papel/partitura-suave.jpg"); }
.recortes .rc-card.rc-v1 { --rc-m: var(--rc-cut1); --rc-p: var(--rc-poly1); --rc-sc: var(--rc-shc1); --rc-img: url("papel/antigua-suave.jpg"); }
.recortes .rc-card.rc-v2 { --rc-m: var(--rc-cut2); --rc-p: var(--rc-poly2); --rc-sc: var(--rc-shc2); --rc-img: url("papel/pautado-suave.jpg"); }
.recortes .rc-card.rc-v3 { --rc-m: var(--rc-cut3); --rc-p: var(--rc-poly3); --rc-sc: var(--rc-shc3); --rc-img: url("papel/manuscrito-suave.jpg"); }
.recortes .rc-card.rc-v4 { --rc-m: var(--rc-cut4); --rc-p: var(--rc-poly4); --rc-sc: var(--rc-shc4); --rc-img: url("papel/cuaderno-suave.jpg"); }
.recortes .rc-card.rc-v5 { --rc-m: var(--rc-cut5); --rc-p: var(--rc-poly5); --rc-sc: var(--rc-shc5); --rc-img: url("papel/periodico-suave.jpg"); }
/* cada recorte un poco torcido (no en lo que ya se mueve solo) */
.recortes .rc-card:is(.setup-card, .results-card, .panel, .definition-card, .game-card, .modal-card, .listen-panel) {
  rotate: var(--rc-tilt, 0deg);
}

/* El papel cambia de color según el estado (acierto / fallo) */
.recortes .rc-card:is(.is-correct, .correct, .ok, .show-ok, .is-caught) { --rc-paper: #d6efd9; }
.recortes .rc-card:is(.is-wrong, .ko, .incorrect, .is-missed, .exploded) { --rc-paper: #f6d3cc; }
.recortes .rc-card:is(.is-dimmed) { opacity: 0.45; }
.recortes .rc-card.is-hit, .recortes .rc-card.defused { --rc-paper: #d6efd9; }

/* Celo en las tarjetas principales */
.recortes :is(.setup-card, .results-card, .definition-card, .modal-card).rc-card::after {
  content: "";
  position: absolute; top: -12px; left: 50%;
  width: 92px; height: 26px; margin-left: -46px;
  background: rgba(255, 246, 214, 0.62) url("papel/grano.png") 0 0 / 128px 128px;
  border-left: 1px dashed rgba(120, 90, 50, 0.25); border-right: 1px dashed rgba(120, 90, 50, 0.25);
  rotate: -3deg;
  pointer-events: none;
  z-index: 3;
}
.recortes .game-card.rc-card:nth-child(3n + 1)::after {
  content: ""; position: absolute; top: -9px; right: 18px;
  width: 58px; height: 20px;
  background: rgba(255, 246, 214, 0.62) url("papel/grano.png") 0 0 / 128px 128px;
  rotate: 8deg; pointer-events: none; z-index: 3;
}

/* El azulejo del icono: un trozo de papel crema */
.recortes .game-icon.rc-card { background-position: 0 2px !important; box-shadow: 0 2px 1px rgba(50, 20, 5, 0.32), 0 5px 6px rgba(50, 20, 5, 0.14) !important; }
.recortes .game-icon.rc-card::before { background: #f3e9d6 url("papel/grano.png") 0 0 / 200px 200px; border-width: 2px; }

/* ---------- Botones: cartulina recortada ---------- */
.recortes .rc-btn {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
  position: relative;
  isolation: isolate;
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.recortes .rc-btn::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--rc-btn, #fffaf0) url("papel/grano.png") 0 0 / 200px 200px;
  border: 2px solid #fffdf7;
  clip-path: var(--rc-pb, var(--rc-polyb0));
  -webkit-mask: var(--rc-mbx, none) 0 0 / 100% 100% no-repeat;
  mask: var(--rc-mbx, none) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.recortes :is(.rc-btn, .rc-strip).rc-v1 { --rc-mb: var(--rc-cutb1); --rc-pb: var(--rc-polyb1); }
.recortes :is(.rc-btn, .rc-strip).rc-v2 { --rc-mb: var(--rc-cutb2); --rc-pb: var(--rc-polyb2); }
.recortes :is(.rc-btn, .rc-strip).rc-v3 { --rc-mb: var(--rc-cutb3); --rc-pb: var(--rc-polyb3); }
.recortes .rc-btn:is(.btn-primary) { --rc-btn: #c2561f; }
.recortes .rc-btn:is(.btn-dark) { --rc-btn: #2b1d16; }
.recortes .rc-btn:is(.btn-pass) { --rc-btn: #2563eb; }
.recortes .rc-btn:is(.seg-btn) { --rc-btn: #ffffff; }
.recortes .rc-btn:not(:disabled):active { transform: translateY(2px) scale(0.98); }
.recortes .rc-btn:not(:disabled):active::after { translate: 0 1px; }
@media (hover: hover) and (pointer: fine) {
  .recortes .rc-btn:not(:disabled):hover { transform: translateY(-2px) rotate(-0.6deg); }
}

/* ---------- Tiras de papel (pastillas, barras, avisos) ---------- */
.recortes .rc-strip {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  isolation: isolate;
}
/* posición relativa solo si el juego no la fija (no mueve botones de esquina ni avisos flotantes) */
:where(.recortes .rc-strip) { position: relative; }
.recortes .rc-strip::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--rc-strip, #2b1d16) url("papel/grano.png") 0 0 / 160px 160px;
  clip-path: var(--rc-pb, var(--rc-polyb0));
  -webkit-mask: var(--rc-mbx, none) 0 0 / 100% 100% no-repeat;
  mask: var(--rc-mbx, none) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.recortes .rc-strip:is(.score-ok) { --rc-strip: #15803d; }
.recortes .rc-strip:is(.score-ko) { --rc-strip: #c02622; }
.recortes .rc-strip:is(.chip) { --rc-strip: #fffaf0; }
.recortes .rc-strip.chip.on { --rc-strip: #fbe4d4; }
.recortes .rc-strip:is(.def-clue, .status) { --rc-strip: #fffaf0; }
.recortes .rc-strip.status:empty { filter: none; }
.recortes .rc-strip.status:empty::before { display: none; }
.recortes .rc-strip:is(.def-clue, .status) { padding-left: 12px; padding-right: 12px; }
.recortes .rc-strip.tap-prompt-banner { --rc-strip: #fffaf0; color: var(--rc-ink) !important; }
.recortes .rc-strip.level-up { --rc-strip: #fffaf0; color: var(--rc-ink) !important; width: max-content; max-width: 90vw; }
.recortes .rc-strip.hw-toggle[aria-pressed="true"] { --rc-strip: #3a1d4f; }

/* Contenedor de opciones (segmentado): tira de papel kraft */
.recortes .segmented.rc-card { background-position: 0 2px !important; box-shadow: 0 2px 1px rgba(50, 20, 5, 0.22) !important; rotate: 0deg; }
.recortes .segmented.rc-card::before { background: #e9dcc5 url("papel/grano.png") 0 0 / 160px 160px; border-width: 2px; }

/* ---------- Títulos con letras recortadas (collage) ---------- */
.recortes .rc-word { display: inline-flex; white-space: nowrap; }
.recortes .rc-letter {
  position: relative;
  display: inline-block;
  margin: 0 0.02em;
  padding: 0.04em 0.09em 0.08em;
  line-height: 1;
  color: var(--rc-ink);
  rotate: var(--r);
  translate: 0 var(--dy);
  isolation: isolate;
  letter-spacing: 0;
}
.recortes .rc-letter::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--lp, #fff) url("papel/grano.png") 0 0 / 120px 120px;
  clip-path: var(--rc-p);
}
.recortes .rc-l-white { --lp: #ffffff; }
.recortes .rc-l-cream { --lp: #f3e4c6; }
.recortes .rc-l-score::before { background: #f6efe0 url("papel/partitura.jpg") 30% 20% / 260px 260px; }
.recortes .rc-l-ink { --lp: #2b1d16; color: #fff; }
.recortes .rc-l-orange { --lp: #a84a18; color: #fff; }
/* las letras «caen» una a una al entrar, como pegándolas */
.recortes .rc-letter { animation: rc-stick 420ms steps(4, end) both; animation-delay: var(--d); }
@keyframes rc-stick {
  0% { opacity: 0; transform: translateY(-14px) rotate(-10deg) scale(1.2); }
  60% { opacity: 1; transform: translateY(2px) rotate(3deg) scale(0.98); }
  100% { opacity: 1; transform: none; }
}

/* ---------- Transición: la hoja que se arruga ---------- */
.rc-overlay { position: fixed; inset: 0; z-index: 99999; pointer-events: none; display: none; }
.rc-overlay.on { display: block; }
.rc-overlay.on { will-change: transform; }
.rc-overlay.on .rc-sheet { will-change: transform; }
.rc-sheet {
  position: absolute; inset: 0;
  background: #f6efe0 url("papel/partitura.jpg") 0 0 / 640px 640px;

}
/* pliegues: aparecen cuando el papel ya está arrugado */
.rc-sheet .rc-creases {
  position: absolute; inset: 0;
  background: var(--rc-crease) 0 0 / 100% 100% no-repeat;
  opacity: 0;
}

/* tapa la página nueva hasta que la bola se desarruga (sin parpadeo) */
html.rc-entering::after {
  content: "";
  position: fixed; inset: 0; z-index: 99998;
  background: #f6efe0 url("papel/partitura.jpg") 0 0 / 640px 640px;
}
html.rc-entering[style*="--rc-cubre"]::after { background: var(--rc-cubre); }   /* Músicos del mundo: el mapa */

/* bolitas de papel al subir de nivel */
.rc-ball {
  position: fixed; z-index: 9999; width: 22px; height: 22px; pointer-events: none;
  background: #f6efe0 url("papel/partitura.jpg") 0 0 / 120px 120px;
  clip-path: polygon(50% 0, 72% 8%, 96% 30%, 88% 62%, 100% 80%, 66% 96%, 40% 100%, 14% 86%, 0 56%, 8% 26%, 26% 6%);
  filter: drop-shadow(0 2px 1px rgba(40, 15, 0, 0.4));
}

/* ---------- Movimiento de papel (stop-motion) ---------- */
.recortes .screen.active .rc-card:is(.setup-card, .results-card, .definition-card) {
  animation: rc-drop 480ms steps(5, end) both;
}
@keyframes rc-drop {
  0% { opacity: 0; transform: translateY(-30px) rotate(-3deg); }
  70% { opacity: 1; transform: translateY(3px) rotate(0.8deg); }
  100% { opacity: 1; transform: none; }
}
@media (hover: hover) and (pointer: fine) {
  .recortes .game-card.rc-card { transition: transform 160ms steps(3, end); }
  .recortes .game-card.rc-card:hover { transform: translateY(-4px) rotate(0.6deg); }
}

/* Al imprimir no hay nada de esto */
@media print {
  .rc-overlay, .rc-ball { display: none !important; }
  html.recortes:not(.halloween), html.recortes:not(.halloween) body,
  html.recortes, html.recortes body { background-image: none !important; background-color: #fff !important; }
}

/* Reducir movimiento: papel quieto, sin transiciones */
@media (prefers-reduced-motion: reduce) {
  .recortes .rc-letter, .recortes .rc-card { animation: none !important; }
  .rc-overlay { display: none !important; }
}

/* ---------- Ajustes de texto sobre papel ---------- */
.recortes .rc-strip:is(.def-clue, .status, .tap-prompt-banner, .level-up) { color: var(--rc-ink) !important; text-shadow: none !important; }
.recortes .rc-btn:is(.listen-btn, .reveal-btn) { --rc-btn: #c2561f; color: #fff !important; }
.recortes .rc-btn.btn-secondary { --rc-btn: #fffaf0; }

/* ---------- Piezas de cada juego: también de papel ---------- */
/* Botones de colores del Simón: cartulina de color */
.recortes .pad-btn {
  background-image: url("papel/grano.png") !important;
  background-size: 200px 200px !important;
  border-radius: 10px 18px 12px 20px / 16px 10px 20px 12px;
  box-shadow: none !important;
  filter: var(--rc-shadow-sm);
  outline: 3px solid #fffdf7; outline-offset: -3px;
}
.recortes .pad-btn.lit { filter: drop-shadow(0 0 0 #fff) brightness(1.08) var(--rc-shadow-sm); }
/* Teclas del piano: tiras de papel */
.recortes .key { background-image: url("papel/grano.png"); background-size: 160px 160px; }
.recortes .key.white { border-radius: 0 0 9px 6px / 0 0 12px 8px; }
/* Pad de Repite el ritmo: disco de cartón */
.recortes .pad {
  background-image: url("papel/partitura-suave.jpg") !important;
  background-size: 420px 420px !important;
  filter: var(--rc-shadow);
}
/* Círculos 1 y 2 de ¿Sube o baja?, pulsos y fichas */
.recortes :is(.dot-note, .beat, .ans-num, .option-num, .option-key) {
  background-image: url("papel/grano.png");
  background-size: 120px 120px;
  border-radius: 47% 53% 50% 46% / 52% 46% 54% 48%;
}
.recortes .dot-note { filter: var(--rc-shadow-sm); }
/* Fantasmas: papel de seda */
.recortes .ghost-body path { fill: #f8f5ff; }
.recortes .ghost { filter: drop-shadow(0 4px 2px rgba(20, 5, 40, 0.45)) drop-shadow(0 0 14px rgba(214, 200, 255, 0.25)); }
/* Equipos del Concurso */
.recortes :is(.team, .team-card, .scoreboard > *) { background-image: url("papel/grano.png"); background-size: 160px 160px; }
/* Bombas que caen: mecha de cuerda */
.recortes .bomb .fuse { background: repeating-linear-gradient(45deg, #6b4a2a 0 3px, #a07850 3px 6px); }

/* ---------- Recortes sueltos de partitura sobre la mesa ---------- */
.rc-desk { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; will-change: transform; contain: strict; }  /* capa propia: se pinta una vez */
.rc-scrap {
  position: absolute;
  background: #f6efe0 var(--rc-img, url("papel/partitura.jpg")) 0 0 / 420px 420px;
  clip-path: var(--rc-p);
  opacity: var(--o, 0.6);
  rotate: var(--r);
  filter: drop-shadow(0 3px 2px rgba(50, 20, 5, 0.3));
}
@keyframes rc-flutter {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  33% { transform: rotate(0.8deg) translateY(-1px); }
  66% { transform: rotate(-0.6deg) translateY(1px); }
}
html.halloween .rc-desk { display: none; }
@media (max-width: 600px) { .rc-scrap { opacity: 0.35; } }
@media print { .rc-desk { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .rc-scrap { animation: none; } }
/* el color va en <html> para que los recortes del fondo queden entre la cartulina y el juego */
html.recortes:not(.halloween) body { background-color: transparent !important; }

/* ---------- Sombras de papel sin filtros (más fluido en tablets) ----------
   Una copia oscura del mismo recorte, un poco desplazada, hace de sombra. */
.recortes :is(.rc-btn, .rc-strip, .rc-letter)::after,
.recortes :is(.drop, .bomb).rc-card::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -2;
  background: rgba(45, 18, 4, 0.34);
  clip-path: var(--rc-pb, var(--rc-polyb0));
  -webkit-mask: var(--rc-mbx, none) 0 0 / 100% 100% no-repeat;
  mask: var(--rc-mbx, none) 0 0 / 100% 100% no-repeat;
  translate: 1px 3px;
  pointer-events: none;
}
.recortes .rc-letter::after { clip-path: var(--rc-p); translate: 1px 2px; }
.recortes :is(.drop, .bomb).rc-card::after { clip-path: var(--rc-p, var(--rc-poly0)); -webkit-mask: var(--rc-mx, none) 0 0 / 100% 100% no-repeat; mask: var(--rc-mx, none) 0 0 / 100% 100% no-repeat; }
.recortes :is(.drop, .bomb).rc-card { filter: none; }
.recortes :is(.drop, .bomb).rc-card::after { inset: -2px; translate: 2px 5px; background: rgba(45, 18, 4, 0.3); }
.recortes .rc-strip.status:empty::after { display: none; }

/* Hoja que se arruga dibujada con la tarjeta gráfica (WebGL) */
.rc-gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 99999; pointer-events: none; display: none; }
.rc-gl.on { display: block; }
@media print { .rc-gl { display: none !important; } }

/* Opciones (botones de un grupo): el papel solo en la elegida.
   Al elegir otra, la anterior vuelve a quedar sin papel (antes se quedaba marcada). */
.recortes .seg-btn.rc-btn:not(.on)::before,
.recortes .seg-btn.rc-btn:not(.on)::after { display: none; }
.recortes .seg-btn.rc-btn:not(.on) { transform: none; }

/* ---------- Ordenador y pantallas grandes ----------
   Los menús, las pantallas de preparar, los resultados y las barras están en píxeles fijos:
   en una pantalla grande se veían pequeños en el centro. Aquí crecen con la pantalla.
   (El tablero de juego ya se adapta solo a la altura.) */
@media (min-width: 1280px) and (min-height: 760px) { html.recortes { --pcz: 1.2; } }
@media (min-width: 1600px) and (min-height: 940px) { html.recortes { --pcz: 1.4; } }
@media (min-width: 2200px) and (min-height: 1250px) { html.recortes { --pcz: 1.75; } }
.recortes :is(.menu, .setup-card, .results-card, .modal-card, .play-bar, .top-bar, .bottom-bar, .menu-link, .voice-toggle) {
  zoom: var(--pcz, 1);
}
/* sin doble aumento si una de estas piezas va dentro de otra */
.recortes :is(.menu, .setup-card, .results-card, .modal-card, .play-bar, .top-bar, .bottom-bar) :is(.setup-card, .results-card, .modal-card, .play-bar, .menu-link, .voice-toggle, .bottom-bar) { zoom: 1; }
@media print { .recortes * { zoom: 1 !important; } }

/* ---------- Mejoras de calidad (15/10) ----------
   Revisión con las guías de diseño web, animación y accesibilidad. */
/* Toques más rápidos en tablet: sin espera de doble toque ni destello gris */
.recortes :is(button, a, [role="button"], label, input, select, .key, .opt, .memo, .drop) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Subtítulos de las opciones: algo más grandes y sin transparencia (se leen mejor en la pizarra) */
.recortes .seg-btn small { font-size: 13px; opacity: 1; }
/* Títulos y textos: líneas más equilibradas, sin palabras sueltas al final */
.recortes :is(.modal-title, .results-title, .setup-title, h2, h3) { text-wrap: balance; }
.recortes :is(p, .game-desc) { text-wrap: pretty; }
/* Números que cambian (marcadores, relojes): mismo ancho para que no bailen */
.recortes :is(.pill, .clock, .score, .counter, [id^="score"], [id$="-count"]) { font-variant-numeric: tabular-nums; }
/* Texto solo para lectores de pantalla */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Letra Outfit guardada en la web: se usa si no llega la de Google (sin conexión) */
@font-face { font-family: "Outfit Local"; src: url("fonts/Outfit-Regular.woff") format("woff"); font-weight: 100 600; font-display: swap; }
@font-face { font-family: "Outfit Local"; src: url("fonts/Outfit-Bold.woff") format("woff"); font-weight: 700 1000; font-display: swap; }
/* Texto de la opción elegida un poco más oscuro (contraste ≥ 4,5 sobre el papel blanco); los botones siguen en el naranja de siempre */
html.recortes:not(.halloween) .seg-btn.on { color: #a94b19; }

/* ---------- Recompensas de papel (recortes.js · PlayPremios) ---------- */
.pp-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9000; overflow: hidden; contain: strict; }
.pp-bit { position: absolute; display: block; box-shadow: 1px 1.5px 0 rgba(40, 20, 5, .28); contain: layout style; }
.pp-note { box-shadow: none; font: 900 22px/1 var(--font, "Outfit", sans-serif); text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, 2px 2px 0 rgba(40, 20, 5, .3); }
.pp-note.pp-big { font-size: 30px; }
.pp-sticker {
  position: absolute; left: 50%; top: clamp(70px, 16vh, 140px);
  padding: 10px 22px 9px; font: 900 clamp(20px, 3.4vw, 30px)/1.1 var(--font, "Outfit", sans-serif); color: #1d1410;
  background: #fff7e8 url("papel/partitura-suave.jpg") center / 260px; zoom: var(--pcz, 1);
  clip-path: polygon(2% 10%, 30% 0, 62% 7%, 98% 0, 100% 60%, 96% 100%, 60% 92%, 24% 100%, 0 88%);
  box-shadow: 0 3px 0 rgba(40, 20, 5, .25);
  opacity: 0; transform: translate(-50%, -20px) rotate(-6deg) scale(.6); white-space: nowrap;
}
.pp-sticker::before { content: ""; position: absolute; left: 50%; top: -6px; width: 64px; height: 18px; translate: -50% 0; rotate: 4deg; background: rgba(246, 196, 69, .75); }
.pp-sticker.on { animation: pp-stick 1.5s steps(1, end) forwards; }
@keyframes pp-stick {
  0% { opacity: 1; transform: translate(-50%, -30px) rotate(-12deg) scale(1.3); }
  8% { transform: translate(-50%, 4px) rotate(-3deg) scale(.95); }
  16% { transform: translate(-50%, 0) rotate(-5deg) scale(1.03); }
  24%, 82% { opacity: 1; transform: translate(-50%, 0) rotate(-4deg) scale(1); }
  90% { opacity: .6; transform: translate(-50%, -8px) rotate(-2deg) scale(.96); }
  100% { opacity: 0; transform: translate(-50%, -16px) rotate(0) scale(.9); }
}
html.halloween .pp-sticker { background: #2b1a3d; color: #ffb347; }
@media (prefers-reduced-motion: reduce) {
  .pp-sticker.on { animation: none; opacity: 1; transform: translate(-50%, 0) rotate(-4deg); }
}
/* sello ✓ / ✗ de papel junto a la respuesta */
.pp-stamp {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  display: grid; place-items: center; font: 900 21px/1 var(--font, "Outfit Local", sans-serif); color: #fff;
  box-shadow: 0 0 0 3px #fffdf7, 2px 4px 0 3px rgba(40, 15, 2, .3);
  animation: pp-stamp 760ms steps(1, end) forwards;
}
.pp-stamp.ok { background: #2f7a3b; }
.pp-stamp.ko { background: #c23a2b; }
@keyframes pp-stamp {
  0% { transform: scale(1.5) rotate(-14deg); opacity: 0; }
  12% { transform: scale(0.9) rotate(6deg); opacity: 1; }
  24%, 78% { transform: scale(1) rotate(-4deg); opacity: 1; }
  100% { transform: scale(.85) rotate(-4deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .pp-stamp { animation: none; transform: rotate(-4deg); } }
@media print { .pp-layer { display: none !important; } }

/* ---------- Micrófono (microfono.js): tocar con un piano de verdad ---------- */
.mic-pill {
  position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 10px;
  border: 0; color: #fff; font: 800 15px/1 var(--font, "Outfit", sans-serif); cursor: pointer; zoom: var(--pcz, 1);
  background: #2b1d16; border-radius: 8px; box-shadow: 0 3px 0 rgba(40, 15, 2, .3);
}
.mic-pill[hidden] { display: none; }
.mic-pill .mic-ico { font-size: 18px; }
.mic-pill .mic-note { min-width: 2.6em; padding: 4px 8px; border-radius: 4px; background: #fffdf7; color: #2b1d16; text-align: center; font-variant-numeric: tabular-nums; }
.mic-pill:not(.on) .mic-note, .mic-pill:not(.on) .mic-lvl { display: none; }
.mic-pill .mic-lvl { width: 26px; height: 8px; border-radius: 3px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.mic-pill .mic-lvl i { display: block; height: 100%; background: #ffd25c; transform: scaleX(0); transform-origin: 0 50%; }
.mic-pill.on { background: #2f7a3b; }
.mic-pill.hit .mic-note { animation: mic-hit 300ms steps(3, end); }
@keyframes mic-hit { 50% { transform: scale(1.25) rotate(-4deg); background: #ffd25c; } }
@media (prefers-reduced-motion: reduce) { .mic-pill.hit .mic-note { animation: none; } }
@media print { .mic-pill { display: none !important; } }
.mic-pill.in-bar { position: relative; right: auto; bottom: auto; zoom: 1; padding: 4px 10px 4px 8px; font-size: 14px; }
.play-bar .bar-right:has(.mic-pill.in-bar) { display: flex; align-items: center; gap: 8px; }
@media (max-width: 640px) { .mic-pill.in-bar .mic-txt { display: none; } .mic-pill.in-bar { gap: 6px; padding: 4px 8px; } }