:root {
  --teal: #0d4f4a;
  --teal-dark: #051f1d;
  --teal-deep: #082c2a;
  --gold: #d4af37;
  --gold-light: #f0d97e;
  --gold-dark: #9b7d22;
  --terracotta: #b85c3c;
  --cream: #f4ebd7;
  --error: #c44;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { min-height: 100%; }

body {
  font-family: 'Lora', Georgia, serif;
  background:
    radial-gradient(ellipse at 50% 0%, #1a6661 0%, var(--teal) 35%, var(--teal-dark) 100%);
  color: var(--cream);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Patrón andalusí de fondo (estrella de 8 puntas) */
.bg-pattern {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%23d4af37' stroke-width='0.8' opacity='0.5'><polygon points='40,8 47,25 64,25 53,38 60,55 40,46 20,55 27,38 16,25 33,25'/><circle cx='40' cy='40' r='3'/></g></svg>");
  background-size: 80px 80px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

#app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

/* ====== Pantallas ====== */
.screen {
  display: none;
  min-height: 100vh;
  min-height: 100dvh; /* móvil: cuenta sin barra de direcciones */
  padding: max(1.2rem, env(safe-area-inset-top)) 1rem max(1.2rem, env(safe-area-inset-bottom));
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}
.screen.active { display: flex; }

/* ====== Arco / tarjeta ====== */
.arco {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 200px 200px 12px 12px / 140px 140px 12px 12px;
  padding: 3.5rem 2.5rem 2.5rem;
  max-width: 540px;
  width: 100%;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(212,175,55,0.2);
  position: relative;
  backdrop-filter: blur(4px);
}

.arco::before {
  content: '';
  position: absolute;
  top: 12px; left: 12px; right: 12px; bottom: 12px;
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 190px 190px 6px 6px / 130px 130px 6px 6px;
  pointer-events: none;
}

.arco-grande { max-width: 620px; }

/* ====== Tipografía ====== */
.kicker {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-size: 0.8rem;
  margin-bottom: 0.8rem;
}

.titulo {
  font-family: 'Cinzel', serif;
  font-size: clamp(2rem, 6vw, 3.2rem);
  color: var(--gold);
  letter-spacing: 0.05em;
  margin-bottom: 1.2rem;
  font-weight: 700;
}

.titulo span {
  color: var(--gold-light);
  font-style: italic;
  font-weight: 500;
}

.titulo-mini {
  font-family: 'Cinzel', serif;
  font-size: clamp(1rem, 3vw, 1.3rem);
  color: var(--cream);
  letter-spacing: 0.08em;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.subtitulo {
  font-size: 1.05rem;
  margin-bottom: 2rem;
  line-height: 1.6;
  font-style: italic;
  color: rgba(244,235,215,0.9);
}

.ayuda {
  font-size: 0.85rem;
  margin-top: 1.2rem;
  color: rgba(244,235,215,0.6);
  font-style: italic;
}

/* ====== Botones ====== */
.btn-principal {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--teal-dark);
  border: none;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  cursor: pointer;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(212,175,55,0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-principal:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(212,175,55,0.55);
}
.btn-principal:active { transform: translateY(0); }

.btn-secundario {
  background: transparent;
  color: var(--gold-light);
  border: 1px solid rgba(212,175,55,0.5);
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  padding: 0.7rem 1.6rem;
  border-radius: 50px;
  cursor: pointer;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: 1.5rem;
  transition: all 0.2s;
}
.btn-secundario:hover {
  background: rgba(212,175,55,0.15);
  color: var(--gold);
}

/* ====== Juego ====== */
.titulo-juego {
  font-family: 'Cinzel', serif;
  color: var(--gold);
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  margin-bottom: 1.5rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.palabra {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin-bottom: 2rem;
  max-width: 720px;
  padding: 0 0.5rem;
}

.letra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.6rem;
  border-bottom: 3px solid var(--gold);
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  color: var(--gold-light);
  font-weight: 700;
}
.letra.revelada {
  animation: revelar 0.45s ease;
}
@keyframes revelar {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(5deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.espacio {
  width: 0.9rem;
  height: 2.6rem;
}

/* ====== Transición mágica ====== */
.magic-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.magic-bg {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.magic-overlay.oscurecer .magic-bg { opacity: 1; }
.magic-overlay.aclarar  .magic-bg {
  opacity: 0;
  transition-duration: 0.65s;
}

/* Canvas único donde se renderizan estrellas + purpurina */
.magic-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ====== Carta cayendo + texto manuscrito ====== */
#carta { padding: 1rem; gap: 1rem; }

.carta-wrap {
  position: relative;
  width: 100%;
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
}

.carta {
  position: relative;
  width: min(380px, 90vw);
  min-height: 480px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(184, 92, 60, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(74, 46, 26, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, #f5ecd5 0%, #efe1bd 100%);
  border: 1px solid rgba(184, 146, 58, 0.55);
  border-radius: 4px;
  padding: 3rem 2.5rem;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.55),
    inset 0 0 30px rgba(184, 92, 60, 0.10);
  font-family: 'Caveat', cursive;
  color: #4a2e1a;
  text-align: left;
  animation: caerCarta 4s cubic-bezier(0.4, 0.05, 0.45, 1) forwards;
}

/* Líneas de pauta sutiles, como en cuaderno antiguo */
.carta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 31px,
    rgba(184, 92, 60, 0.10) 31px,
    rgba(184, 92, 60, 0.10) 32px
  );
  pointer-events: none;
  border-radius: 4px;
  opacity: 0.6;
}

/* Esquinas dobladas — sutil sombra interna */
.carta::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, transparent 50%, rgba(74, 46, 26, 0.15) 50%);
  pointer-events: none;
}

.carta-sello {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: 'Cinzel', serif;
  font-size: 4rem;
  color: var(--gold);
  text-shadow:
    0 0 12px rgba(212, 175, 55, 0.85),
    0 0 24px rgba(240, 217, 126, 0.6);
  transform: translate(-50%, -50%);
  animation: romperSello 1s ease forwards 4.2s;
  z-index: 2;
  pointer-events: none;
}

@keyframes romperSello {
  0%   { transform: translate(-50%, -50%) scale(1) rotate(0);     opacity: 1; }
  35%  { transform: translate(-50%, -50%) scale(1.6) rotate(180deg); opacity: 0.95; filter: brightness(1.5); }
  100% { transform: translate(-50%, -50%) scale(3.2) rotate(360deg); opacity: 0;    filter: brightness(2); }
}

.carta-texto {
  font-family: 'Caveat', cursive;
  font-size: 1.55rem;
  line-height: 1.95;
  white-space: pre-wrap;
  margin: 0;
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: aparecerTexto 0.5s ease forwards 4.7s;
  letter-spacing: 0.01em;
}

@keyframes aparecerTexto {
  to { opacity: 1; }
}

.carta-cursor {
  display: inline-block;
  font-family: 'Caveat', cursive;
  font-size: 1.55rem;
  color: #4a2e1a;
  margin-left: 1px;
  opacity: 0;
  animation:
    aparecerTexto 0.4s ease forwards 4.7s,
    parpadeoCursor 0.8s steps(2) infinite 4.7s;
  position: relative;
  z-index: 1;
}
.carta-cursor.oculto { display: none; }
@keyframes parpadeoCursor {
  to { opacity: 0; }
}

@keyframes caerCarta {
  0%   { transform: translate(0, -120vh) rotate(-12deg); opacity: 0; }
  6%   { opacity: 1; }
  18%  { transform: translate(70px, -85vh) rotate(15deg); }
  32%  { transform: translate(-60px, -58vh) rotate(-13deg); }
  48%  { transform: translate(50px, -32vh) rotate(11deg); }
  64%  { transform: translate(-32px, -12vh) rotate(-8deg); }
  80%  { transform: translate(18px, 2vh) rotate(5deg); }
  92%  { transform: translate(-6px, -1vh) rotate(-2deg); }
  100% { transform: translate(0, 0) rotate(0); }
}

.carta-continuar {
  margin-top: 1.5rem;
  display: none !important;
}
.carta-continuar.visible {
  display: inline-block !important;
  animation: fadeIn 0.6s ease;
}

/* Overlay de testing — ?fase=X */
.test-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(5, 31, 29, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.test-overlay-msg {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-size: 1rem;
  padding: 1.4rem 2.4rem;
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 50px;
  text-align: center;
  animation: pulso 1.6s ease-in-out infinite;
}

/* Botón de silenciar música */
.btn-mute {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 200;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(8, 44, 42, 0.55);
  border: 1px solid rgba(212, 175, 55, 0.5);
  color: var(--cream);
  font-size: 1.2rem;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  transition: all 0.2s;
  padding: 0;
}
.btn-mute.visible { display: flex; }
.btn-mute:hover {
  background: rgba(8, 44, 42, 0.8);
  border-color: var(--gold);
  transform: scale(1.06);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.4);
}

/* Canvas persistente durante la fase de juego — para letras volantes */
.fx-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
}
.fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.btn-casteando {
  animation: castear 1.2s ease forwards;
  pointer-events: none;
}
@keyframes castear {
  0%   { transform: scale(1);    filter: brightness(1); }
  20%  { transform: scale(1.06); filter: brightness(1.4); box-shadow: 0 0 30px rgba(240,217,126,0.7); }
  60%  { transform: scale(1.02); filter: brightness(1.2); }
  100% { transform: scale(0.85); filter: brightness(2);   opacity: 0; }
}

/* ====== Área de juego (lámparas mágicas) ====== */
.area-juego {
  position: relative;
  width: 100%;
  max-width: 760px;
  height: clamp(320px, 52vh, 480px);
  margin: 0 auto 1.5rem;
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(212,175,55,0.08), transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(184,92,60,0.08), transparent 50%),
    linear-gradient(180deg, rgba(13,79,74,0.4) 0%, rgba(8,44,42,0.7) 100%);
  overflow: hidden;
  box-shadow: inset 0 0 50px rgba(0,0,0,0.45);
  touch-action: none;
}
.area-juego::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,0.55), transparent 50%),
    radial-gradient(1px 1px at 28% 60%, rgba(255,255,255,0.4), transparent 50%),
    radial-gradient(2px 2px at 48% 30%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(1px 1px at 65% 75%, rgba(255,255,255,0.4), transparent 50%),
    radial-gradient(1.5px 1.5px at 82% 22%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(1px 1px at 90% 55%, rgba(255,255,255,0.45), transparent 50%);
  pointer-events: none;
  animation: titilar 4s ease-in-out infinite;
}
@keyframes titilar {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* ====== Lámpara ====== */
.lampara-wrap {
  position: absolute;
  top: 0; left: 0;
  width: 60px;
  height: 60px;
  will-change: transform;
}
@media (max-width: 480px) {
  .lampara-wrap { width: 52px; height: 52px; }
}

.lampara {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--gold-light);
  background: radial-gradient(circle at 35% 28%, #fff5c8 0%, #f0d97e 30%, #d4af37 65%, #9b7d22 100%);
  color: var(--teal-dark);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.4rem;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow:
    0 0 18px rgba(240, 217, 126, 0.55),
    inset 0 -4px 10px rgba(0,0,0,0.22),
    inset 0 2px 6px rgba(255,255,255,0.6);
  animation: brillo 2s ease-in-out infinite;
  transition: filter 0.1s;
}
.lampara:active { filter: brightness(1.25); }

@keyframes brillo {
  0%, 100% { box-shadow: 0 0 16px rgba(240,217,126,0.5),  inset 0 -4px 10px rgba(0,0,0,0.22), inset 0 2px 6px rgba(255,255,255,0.6); }
  50%      { box-shadow: 0 0 28px rgba(240,217,126,0.85), inset 0 -4px 10px rgba(0,0,0,0.22), inset 0 2px 6px rgba(255,255,255,0.6); }
}

.lampara.acierto {
  animation: estallaDorado 0.4s forwards;
}
@keyframes estallaDorado {
  0%   { transform: scale(1); filter: brightness(1); }
  40%  { transform: scale(1.4); filter: brightness(1.8); }
  100% { transform: scale(2); opacity: 0; filter: brightness(2.5); }
}

.lampara.fallo {
  animation: estallaRojo 0.5s forwards;
  background: radial-gradient(circle at 35% 28%, #ffc0c0 0%, #e07070 35%, #c44 65%, #802222 100%);
  border-color: #e88;
}
@keyframes estallaRojo {
  0%   { transform: scale(1) rotate(0); }
  20%  { transform: scale(1.15) rotate(12deg); }
  40%  { transform: scale(1) rotate(-12deg); }
  60%  { transform: scale(1.1) rotate(8deg); }
  100% { transform: scale(0.4) rotate(0); opacity: 0; }
}

/* ====== Contador y bandeja de letras (Fase 1) ====== */
.contador-letras {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--gold-light);
  margin: 0 0 0.8rem;
  text-align: center;
}

.bandeja {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  margin-bottom: 1rem;
  padding: 0.6rem 0.8rem;
  background: rgba(0,0,0,0.2);
  border: 1px dashed rgba(212,175,55,0.3);
  border-radius: 12px;
  max-width: 600px;
  width: 100%;
}

/* ====== Moneda árabe antigua ====== */
.ficha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%,
      #fff5c8 0%,
      #f0d97e 14%,
      #d4af37 38%,
      #9b7d22 78%,
      #5b4814 100%);
  color: #3a2410;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.15rem;
  position: relative;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.55),
    inset 0 -3px 8px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 245, 200, 0.55),
    inset 0 0 0 2.5px #6b5418;
  text-shadow:
    0 1px 0 rgba(255, 245, 200, 0.6),
    0 -1px 1px rgba(0, 0, 0, 0.45);
  user-select: none;
  animation: aterrizar 0.4s ease both;
}

/* Anillo dentado interior decorativo */
.ficha::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1.5px dashed rgba(91, 72, 20, 0.55);
  pointer-events: none;
}

/* Reflejo metálico sutil arriba-izquierda */
.ficha::after {
  content: '';
  position: absolute;
  top: 10%;
  left: 18%;
  width: 32%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 245, 200, 0.55) 0%, transparent 75%);
  pointer-events: none;
}

@keyframes aterrizar {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(15deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ====== Fase 2: Pistas ====== */
.pistas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  width: 100%;
  max-width: 760px;
  margin: 1.5rem 0 2rem;
}
@media (max-width: 600px) {
  .pistas-grid { grid-template-columns: 1fr; }
}

.pista-card {
  display: flex;
  flex-direction: column;
}
.pista-card .mini-rascable {
  aspect-ratio: 1.1 / 1;
}
.pista-card .mini-fondo {
  font-size: 0.95rem;
  padding: 1rem;
}

.mini-fondo-imagen {
  padding: 0.6rem !important;
}

.pista-svg {
  width: 78%;
  height: 78%;
  filter: drop-shadow(0 0 12px rgba(212,175,55,0.35));
  transition: opacity 0.3s ease;
}

/* Clon flotante del SVG cuando sale volando al pulsar Continuar */
.pista-clon {
  transform-origin: center;
  filter: drop-shadow(0 0 14px rgba(240, 217, 126, 0.85));
  will-change: transform, opacity, filter;
}
.pista-clon.volando {
  animation: pistaVuela 1.2s cubic-bezier(0.4, 0, 0.65, 1) forwards;
}
@keyframes pistaVuela {
  0% {
    transform: scale(1) rotate(0);
    opacity: 1;
    filter: drop-shadow(0 0 14px rgba(240, 217, 126, 0.85));
  }
  35% {
    transform: scale(1.55) rotate(180deg);
    opacity: 1;
    filter: drop-shadow(0 0 28px rgba(255, 245, 200, 1)) brightness(1.7);
  }
  100% {
    transform: scale(0.15) rotate(720deg);
    opacity: 0;
    filter: drop-shadow(0 0 36px rgba(255, 245, 200, 0)) brightness(2.6);
  }
}

#btn-a-ordenar:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.4);
  box-shadow: none;
  transform: none !important;
}

/* Estado "alimentando" — solo visibles las cards mientras les llegan letras */
#pistas .kicker,
#pistas .titulo-mini,
#pistas #btn-a-ordenar,
#pistas #pistas-ayuda,
#pistas .mini-label {
  transition: opacity 0.6s ease;
}
#pistas.alimentando .kicker,
#pistas.alimentando .titulo-mini,
#pistas.alimentando #btn-a-ordenar,
#pistas.alimentando #pistas-ayuda,
#pistas.alimentando .mini-label {
  opacity: 0;
  pointer-events: none;
}

/* Card "energizándose" cuando recibe una letra */
.pista-card.energizando .mini-rascable {
  animation: energizarCard 0.6s ease;
}
@keyframes energizarCard {
  0%   {
    box-shadow:
      0 6px 18px rgba(0, 0, 0, 0.35),
      inset 0 0 0 3px rgba(212, 175, 55, 0.1);
  }
  35%  {
    box-shadow:
      0 6px 22px rgba(0, 0, 0, 0.35),
      0 0 36px rgba(240, 217, 126, 0.85),
      0 0 60px rgba(212, 175, 55, 0.5),
      inset 0 0 0 3px rgba(240, 217, 126, 0.7);
    transform: scale(1.04);
  }
  100% {
    box-shadow:
      0 6px 18px rgba(0, 0, 0, 0.35),
      inset 0 0 0 3px rgba(212, 175, 55, 0.1);
    transform: scale(1);
  }
}

/* ====== Fase 3: Invocar al genio (lámpara mágica) ====== */
.lamp-zona {
  position: relative;
  width: min(380px, 92vw);
  aspect-ratio: 320 / 200;
  margin: 1rem auto 0.5rem;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.lamp-zona.frotando { cursor: grabbing; }

.lamp-glow {
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle at center, rgba(240,217,126,0.55) 0%, rgba(212,175,55,0.18) 40%, transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}
.lamp-zona.frotando .lamp-glow { opacity: 0.6; }
.lamp-zona.invocada .lamp-glow {
  opacity: 1;
  background: radial-gradient(circle at center, rgba(255,245,200,0.95) 0%, rgba(240,217,126,0.7) 30%, rgba(212,175,55,0.3) 55%, transparent 75%);
  animation: lampHaloPulso 1.6s ease-in-out infinite;
}
@keyframes lampHaloPulso {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

.lamp-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,0.55));
  position: relative;
  z-index: 1;
  transition: filter 0.4s ease;
}
.lamp-zona.frotando .lamp-svg {
  animation: lampShake 0.18s ease-in-out infinite;
}
.lamp-zona.invocada .lamp-svg {
  filter: drop-shadow(0 0 24px rgba(255,245,200,1)) drop-shadow(0 0 48px rgba(240,217,126,0.8)) brightness(1.4);
  animation: lampLevitar 2.5s ease-in-out infinite;
}
@keyframes lampShake {
  0%, 100% { transform: translate(0, 0) rotate(-1.4deg); }
  50%      { transform: translate(2px, -2px) rotate(1.4deg); }
}
@keyframes lampLevitar {
  0%, 100% { transform: translateY(0)    rotate(-2deg); }
  50%      { transform: translateY(-12px) rotate(2deg); }
}

/* Humo saliendo del pico — solo visible cuando se invoca */
.lamp-humo {
  position: absolute;
  top: 6%;
  right: -2%;
  width: 60%;
  height: 90%;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}
.lamp-zona.invocada .lamp-humo { opacity: 1; }

.humo {
  position: absolute;
  bottom: 30%;
  right: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,235,215,0.7) 0%, rgba(244,235,215,0.3) 50%, transparent 75%);
  filter: blur(4px);
  opacity: 0;
}
.lamp-zona.invocada .humo {
  animation: humoSube 3s ease-out infinite;
}
.humo.h1 { animation-delay: 0s;   right: 5%; }
.humo.h2 { animation-delay: 0.4s; right: 15%; width: 70px; height: 70px; }
.humo.h3 { animation-delay: 0.9s; right: 8%;  width: 80px; height: 80px; }
.humo.h4 { animation-delay: 1.4s; right: 18%; width: 65px; height: 65px; }
.humo.h5 { animation-delay: 2.0s; right: 12%; width: 90px; height: 90px; }

@keyframes humoSube {
  0%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
  20%  { opacity: 0.85; }
  100% { transform: translate(-30px, -240px) scale(2.3); opacity: 0; }
}

/* Barra de progreso */
.lamp-barra {
  width: 80%;
  max-width: 340px;
  height: 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 5px;
  margin: 1.5rem auto 0.6rem;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}
.lamp-barra-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
  background-size: 200% 100%;
  box-shadow: 0 0 14px rgba(240, 217, 126, 0.7);
  transition: width 0.15s ease-out;
  animation: lampBarraBrillo 1.4s linear infinite;
}
.lamp-barra-fill.drenando {
  transition: width 0.65s cubic-bezier(0.5, 0, 0.7, 0.4);
  background: linear-gradient(90deg, #c44, #d4af37, var(--gold-light));
  box-shadow: 0 0 8px rgba(196, 68, 68, 0.5);
}
@keyframes lampBarraBrillo {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* ===== El Genio ===== */
.genio-zona {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px) scale(0.85);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1.05), visibility 0s 0.9s;
  pointer-events: none;
}
#ordenar.genio-activo .genio-zona {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
  pointer-events: auto;
}

#ordenar.genio-activo .lamp-zona,
#ordenar.genio-activo .lamp-barra,
#ordenar.genio-activo > #lamp-titulo,
#ordenar.genio-activo > .kicker,
#ordenar.genio-activo > #lamp-ayuda {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  overflow: hidden;
  transition:
    opacity 0.5s ease,
    max-height 0.6s ease 0.4s,
    margin 0.6s ease 0.4s,
    padding 0.6s ease 0.4s,
    visibility 0s 1s;
}

.genio-svg {
  width: min(220px, 50vw);
  height: auto;
  filter: drop-shadow(0 0 20px rgba(124, 196, 191, 0.5)) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.4));
  animation: genioFlota 4s ease-in-out infinite;
}
@keyframes genioFlota {
  0%, 100% { transform: translateY(0)    rotate(-1.5deg); }
  50%      { transform: translateY(-12px) rotate(1.5deg); }
}

/* Contador de preguntas */
.genio-contador {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-size: 0.78rem;
  margin: 0;
  opacity: 0.85;
}

/* Burbuja de pregunta tipo pergamino */
.genio-burbuja {
  position: relative;
  background: linear-gradient(180deg, #f5ecd5 0%, #efe1bd 100%);
  border: 1px solid rgba(184, 146, 58, 0.6);
  border-radius: 14px;
  padding: 1rem 1.6rem;
  max-width: 90%;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), inset 0 0 18px rgba(184, 92, 60, 0.10);
  text-align: center;
}
.genio-burbuja::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 18px;
  height: 18px;
  background: linear-gradient(180deg, #f5ecd5 0%, #efe1bd 100%);
  border-left: 1px solid rgba(184, 146, 58, 0.6);
  border-top: 1px solid rgba(184, 146, 58, 0.6);
}
.genio-pregunta {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  color: #4a2e1a;
  margin: 0;
  line-height: 1.4;
}

/* Botones de respuesta */
.genio-respuestas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
  width: 100%;
  max-width: 540px;
  padding: 0 0.5rem;
}
@media (max-width: 480px) {
  .genio-respuestas { grid-template-columns: 1fr; }
}

.btn-genio {
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.55);
  color: var(--cream);
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.btn-genio:hover:not(:disabled):not(.correcta):not(.incorrecta) {
  background: rgba(212, 175, 55, 0.28);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.3);
}
.btn-genio:disabled { cursor: not-allowed; }
.btn-genio.correcta {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--teal-dark);
  border-color: var(--gold-light);
  box-shadow: 0 0 22px rgba(240, 217, 126, 0.7);
  animation: respuestaCorrecta 0.5s ease;
}
@keyframes respuestaCorrecta {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); filter: brightness(1.5); }
  100% { transform: scale(1.05); }
}
.btn-genio.incorrecta {
  background: rgba(196, 68, 68, 0.25);
  border-color: rgba(196, 68, 68, 0.6);
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through;
  animation: respuestaIncorrecta 0.4s ease;
}
@keyframes respuestaIncorrecta {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

.genio-feedback {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-light);
  text-align: center;
  min-height: 1.4em;
  opacity: 0;
  transition: opacity 0.3s;
}
.genio-feedback.mostrar { opacity: 1; }

/* Sacudida del genio cuando se equivoca */
.genio-svg.negar {
  animation: genioNegar 0.6s ease;
}
@keyframes genioNegar {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-8deg); }
  40% { transform: rotate(8deg); }
  60% { transform: rotate(-6deg); }
  80% { transform: rotate(6deg); }
}

/* ===== Fusión de los 3 símbolos (tornado) ===== */
.fusion-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  z-index: 240;
  background: radial-gradient(ellipse at center, rgba(8,44,42,0.55) 0%, rgba(5,31,29,0.88) 70%, rgba(5,31,29,0.97) 100%);
  transition: opacity 0.5s ease, visibility 0s 0.5s;
  overflow: hidden;
}
.fusion-stage {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  transform-origin: center center;
  transition: transform 0.3s ease;
}

/* Pulso de fondo: turquesa → oro creciendo */
.fusion-bgpulse {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  background: radial-gradient(circle at center, rgba(124,196,191,0) 0%, rgba(124,196,191,0) 60%);
  mix-blend-mode: screen;
}
.fusion-overlay.tornado-on .fusion-bgpulse {
  animation: fusionBgPulse 10s ease-in forwards;
}
@keyframes fusionBgPulse {
  0%   { opacity: 0; background: radial-gradient(circle at center, rgba(124,196,191,0)   0%, rgba(8,44,42,0)     65%); }
  25%  { opacity: 0.8; background: radial-gradient(circle at center, rgba(124,196,191,0.35) 0%, rgba(8,44,42,0)   65%); }
  55%  { opacity: 1; background: radial-gradient(circle at center, rgba(212,175,55,0.45)   0%, rgba(124,196,191,0.15) 70%); }
  85%  { opacity: 1; background: radial-gradient(circle at center, rgba(255,245,200,0.85)  0%, rgba(240,217,126,0.3)  70%); }
  100% { opacity: 0; background: radial-gradient(circle at center, rgba(255,255,255,0)     0%, rgba(240,217,126,0)    70%); }
}

/* Rayos de luz radiales que rotan */
.fusion-rays {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  filter: blur(3px);
  mix-blend-mode: screen;
  background:
    conic-gradient(
      from 0deg,
      rgba(240,217,126,0.0) 0deg,
      rgba(240,217,126,0.22) 6deg,
      rgba(240,217,126,0.0) 14deg,
      rgba(240,217,126,0.0) 38deg,
      rgba(240,217,126,0.18) 44deg,
      rgba(240,217,126,0.0) 52deg,
      rgba(240,217,126,0.0) 78deg,
      rgba(240,217,126,0.25) 84deg,
      rgba(240,217,126,0.0) 92deg,
      rgba(240,217,126,0.0) 122deg,
      rgba(240,217,126,0.20) 128deg,
      rgba(240,217,126,0.0) 136deg,
      rgba(240,217,126,0.0) 168deg,
      rgba(240,217,126,0.22) 174deg,
      rgba(240,217,126,0.0) 182deg,
      rgba(240,217,126,0.0) 215deg,
      rgba(240,217,126,0.18) 221deg,
      rgba(240,217,126,0.0) 229deg,
      rgba(240,217,126,0.0) 260deg,
      rgba(240,217,126,0.24) 266deg,
      rgba(240,217,126,0.0) 274deg,
      rgba(240,217,126,0.0) 305deg,
      rgba(240,217,126,0.20) 311deg,
      rgba(240,217,126,0.0) 319deg,
      rgba(240,217,126,0.0) 350deg,
      rgba(240,217,126,0.22) 356deg,
      rgba(240,217,126,0.0) 360deg
    );
}
.fusion-overlay.tornado-on .fusion-rays {
  animation: fusionRays 10s linear forwards;
}
@keyframes fusionRays {
  0%   { opacity: 0;   transform: rotate(0deg)    scale(0.6); }
  20%  { opacity: 0.55; transform: rotate(540deg)  scale(1.0); }
  60%  { opacity: 0.85; transform: rotate(2160deg) scale(1.25); }
  90%  { opacity: 1;   transform: rotate(3960deg) scale(1.6); }
  100% { opacity: 0;   transform: rotate(4500deg) scale(0.5); }
}

/* Contenedor de partículas */
.fusion-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 2;
}
.fusion-particle {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-top: -3px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff5c8 0%, #f0d97e 45%, rgba(212,175,55,0) 100%);
  box-shadow: 0 0 8px rgba(240,217,126,0.85), 0 0 16px rgba(212,175,55,0.5);
  pointer-events: none;
  will-change: transform, opacity;
}
.fusion-particle.cyan {
  background: radial-gradient(circle, #e8fffd 0%, #7cc4bf 45%, rgba(74,142,138,0) 100%);
  box-shadow: 0 0 10px rgba(124,196,191,0.85), 0 0 18px rgba(124,196,191,0.5);
}

/* Flash final */
.fusion-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 6;
  background: radial-gradient(circle at center, #ffffff 0%, #fff5c8 25%, rgba(240,217,126,0.4) 60%, rgba(240,217,126,0) 90%);
}
.fusion-flash.bang {
  animation: fusionFlash 1.1s ease-out forwards;
}
@keyframes fusionFlash {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  35%  { opacity: 0.85; }
  100% { opacity: 0; }
}

/* Onda expansiva */
.fusion-shockwave {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 5px solid rgba(255,245,200,0.95);
  box-shadow: 0 0 60px rgba(255,245,200,0.85), inset 0 0 30px rgba(240,217,126,0.5);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.fusion-shockwave.bang {
  animation: fusionShockwave 1.6s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes fusionShockwave {
  0%   { transform: translate(-50%, -50%) scale(0);  opacity: 1; border-width: 8px; }
  60%  { opacity: 0.6; border-width: 3px; }
  100% { transform: translate(-50%, -50%) scale(80); opacity: 0; border-width: 1px; }
}

/* Vibración de cámara */
.fusion-shake-soft   { animation: fusionShake 0.42s ease-in-out infinite; }
.fusion-shake-medium { animation: fusionShake 0.22s ease-in-out infinite; }
.fusion-shake-strong { animation: fusionShake 0.10s ease-in-out infinite; }
@keyframes fusionShake {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-3px, 2px); }
  50%      { transform: translate(3px, -2px); }
  75%      { transform: translate(-2px, 3px); }
}
.fusion-shake-medium { animation-name: fusionShakeM; }
@keyframes fusionShakeM {
  0%, 100% { transform: translate(0, 0); }
  20%      { transform: translate(-5px, 3px); }
  40%      { transform: translate(5px, -4px); }
  60%      { transform: translate(-4px, -3px); }
  80%      { transform: translate(4px, 4px); }
}
.fusion-shake-strong { animation-name: fusionShakeS; }
@keyframes fusionShakeS {
  0%, 100% { transform: translate(0, 0); }
  20%      { transform: translate(-9px, 5px); }
  40%      { transform: translate(8px, -7px); }
  60%      { transform: translate(-6px, -5px); }
  80%      { transform: translate(7px, 7px); }
}

/* Zoom de cámara en el bang */
.fusion-stage.bang-zoom { transform: scale(1.06); }
.fusion-overlay.mostrar {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.5s ease, visibility 0s 0s;
}

.fusion-intro {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.05rem, 3vw, 1.6rem);
  color: #fff5c8;
  text-shadow: 0 0 16px rgba(240, 217, 126, 0.55);
  letter-spacing: 0.08em;
  text-align: center;
  margin: 0 0 1.4rem;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fusion-overlay.mostrar .fusion-intro {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.05s;
}

.fusion-evoca {
  margin-top: 1.6rem;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}
.fusion-overlay.mostrar .fusion-evoca {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0.7s;
}
.fusion-evoca.fuera {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition-delay: 0s;
}
.fusion-overlay.tornado-on .fusion-intro,
.fusion-overlay.tornado-on .fusion-evoca {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
#btn-fusion-siguiente {
  min-width: 200px;
  letter-spacing: 0.4em;
}

.fusion-cards {
  position: relative;
  width: min(900px, 95vw);
  height: min(260px, 38vh);
  display: flex;
  align-items: center;
  justify-content: space-around;
  perspective: 800px;
}

.fusion-card {
  position: relative;
  width: clamp(120px, 22vw, 200px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.6rem;
  background: linear-gradient(180deg, rgba(245,236,213,0.08) 0%, rgba(0,0,0,0.25) 100%);
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 14px;
  box-shadow: 0 0 24px rgba(212, 175, 55, 0.25), inset 0 0 18px rgba(240,217,126,0.08);
  opacity: 0;
  transform: translateY(30px) scale(0.85);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1.05);
  will-change: transform, opacity, filter;
}
.fusion-card::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 20px;
  background: radial-gradient(circle at center, rgba(240,217,126,0.6) 0%, rgba(212,175,55,0.25) 45%, rgba(240,217,126,0) 75%);
  opacity: 0;
  filter: blur(10px);
  pointer-events: none;
  z-index: -1;
}
.fusion-overlay.tornado-on .fusion-card::before {
  animation: fusionCardAura 10s ease-in forwards;
}
@keyframes fusionCardAura {
  0%   { opacity: 0;   transform: scale(0.8); }
  30%  { opacity: 0.5; transform: scale(1.0); }
  70%  { opacity: 1;   transform: scale(1.4); }
  90%  { opacity: 1;   transform: scale(2.0); filter: blur(14px); }
  100% { opacity: 0;   transform: scale(0.4); }
}
.fusion-overlay.tornado-on .fusion-card {
  animation: fusionCardGlow 10s ease-in forwards;
}
@keyframes fusionCardGlow {
  0%   { box-shadow: 0 0 24px rgba(212,175,55,0.25), inset 0 0 18px rgba(240,217,126,0.08); filter: brightness(1) drop-shadow(0 0 0 rgba(240,217,126,0)); }
  50%  { box-shadow: 0 0 40px rgba(240,217,126,0.5), inset 0 0 26px rgba(240,217,126,0.18); filter: brightness(1.2) drop-shadow(0 0 8px rgba(240,217,126,0.6)); }
  85%  { box-shadow: 0 0 70px rgba(255,245,200,0.9), inset 0 0 36px rgba(255,245,200,0.35); filter: brightness(1.7) drop-shadow(0 0 18px rgba(255,245,200,0.95)); }
  100% { box-shadow: 0 0 90px rgba(255,255,255,1), inset 0 0 50px rgba(255,245,200,0.6); filter: brightness(2.5) drop-shadow(0 0 26px rgba(255,255,255,1)); }
}
.fusion-overlay.mostrar .fusion-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.fusion-overlay.mostrar .fusion-card[data-fcard="0"] { transition-delay: 0.10s; }
.fusion-overlay.mostrar .fusion-card[data-fcard="1"] { transition-delay: 0.30s; }
.fusion-overlay.mostrar .fusion-card[data-fcard="2"] { transition-delay: 0.50s; }

.fusion-icon {
  width: clamp(60px, 12vw, 90px);
  height: clamp(60px, 12vw, 90px);
  filter: drop-shadow(0 0 10px rgba(240, 217, 126, 0.55));
}
.fusion-icon svg { width: 100%; height: 100%; display: block; }

.fusion-label {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.25em;
  font-size: 0.95rem;
  color: var(--gold-light);
  margin: 0;
}
.fusion-pregunta {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(245, 236, 213, 0.85);
  margin: 0;
  text-align: center;
  line-height: 1.25;
}

/* Vórtice luminoso central que aparece durante el tornado */
.fusion-vortice {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff5c8 0%, #f0d97e 30%, rgba(212,175,55,0.6) 60%, rgba(212,175,55,0) 100%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  filter: blur(0.5px);
  box-shadow: 0 0 40px rgba(240,217,126,0.8), 0 0 90px rgba(212,175,55,0.6);
}
.fusion-vortice.activo {
  animation: fusionVortice 10s linear forwards;
}
@keyframes fusionVortice {
  0%   { transform: translate(-50%, -50%) scale(0)    rotate(0deg);     opacity: 0; }
  12%  { transform: translate(-50%, -50%) scale(1.2)  rotate(540deg);   opacity: 0.7; }
  40%  { transform: translate(-50%, -50%) scale(2.6)  rotate(1800deg);  opacity: 0.9; }
  70%  { transform: translate(-50%, -50%) scale(5)    rotate(3240deg);  opacity: 1; }
  92%  { transform: translate(-50%, -50%) scale(9)    rotate(4680deg);  opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.6)  rotate(5040deg);  opacity: 0; }
}

/* Pregunta final + botón VER */
.fusion-final {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}
.fusion-final.mostrar {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.fusion-pregunta-final {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.3rem, 3.6vw, 2rem);
  color: #fff5c8;
  text-shadow: 0 0 18px rgba(240, 217, 126, 0.7), 0 0 38px rgba(212, 175, 55, 0.4);
  letter-spacing: 0.06em;
  margin: 0;
  text-align: center;
}
#btn-fusion-ver {
  min-width: 180px;
  letter-spacing: 0.4em;
}

/* Cuando arranca el tornado, ocultamos las cartas (la animación JS las moverá) */
.fusion-cards.tornado .fusion-card {
  transition: none;
}

@media (max-width: 600px) {
  .fusion-cards {
    height: auto;
    gap: 0.6rem;
  }
  .fusion-card { padding: 0.7rem 0.4rem; }
  .fusion-pregunta { font-size: 0.75rem; }
}

/* Revelación de la frase — overlay full-screen */
.lamp-revelacion {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  z-index: 250;
  background: radial-gradient(ellipse at center, rgba(8,44,42,0.5) 0%, rgba(5,31,29,0.75) 60%, rgba(5,31,29,0.85) 100%);
  transition: opacity 1.4s ease;
}
.lamp-revelacion.mostrar { opacity: 1; }

.lamp-frase {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(2rem, 7vw, 4.2rem);
  color: #fff5c8;
  text-shadow:
    0 0 22px rgba(240, 217, 126, 0.95),
    0 0 44px rgba(212, 175, 55, 0.7),
    0 0 68px rgba(212, 175, 55, 0.4);
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 1.1;
  transform: scale(0.7);
  opacity: 0;
}
.lamp-revelacion.mostrar .lamp-frase {
  animation: fraseAparece 1.6s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes fraseAparece {
  0%   { transform: scale(0.4) translateY(40px); opacity: 0; filter: blur(20px); }
  35%  { opacity: 1; filter: blur(2px); }
  60%  { transform: scale(1.1) translateY(0); }
  100% { transform: scale(1)   translateY(0); opacity: 1; filter: blur(0); }
}

/* ====== Fase 3 antigua: Ordenar (mantenida por si acaso) ====== */
.frase-slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin: 1.5rem 0 2rem;
  max-width: 760px;
  padding: 0 0.5rem;
  min-height: 3.4rem;
}
.slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.7rem;
  border-bottom: 3px solid var(--gold);
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  color: var(--gold-light);
  font-weight: 700;
  transition: background 0.2s;
}
.slot.lleno {
  animation: revelar 0.45s ease;
}
.slot.error {
  animation: sacudir 0.4s ease;
  border-color: var(--error);
  color: #ffaaaa;
}
@keyframes sacudir {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.espacio-slot {
  width: 0.9rem;
  height: 2.7rem;
}

.bandeja-ordenar {
  background: rgba(0,0,0,0.25);
  border-style: solid;
  padding: 1rem;
  gap: 0.6rem;
}

.ficha-ordenar {
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}
.ficha-ordenar:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(212,175,55,0.5);
}
.ficha-ordenar:active { transform: translateY(0); }
.ficha-ordenar.activada {
  animation: fichaActivada 0.45s ease;
}
@keyframes fichaActivada {
  0%   { transform: translateY(0)    scale(1);     filter: brightness(1); }
  35%  {
    transform: translateY(-4px) scale(1.22);
    filter: brightness(1.6);
    box-shadow:
      0 4px 10px rgba(0,0,0,0.55),
      0 0 22px rgba(240,217,126,0.85),
      inset 0 -3px 8px rgba(0,0,0,0.4),
      inset 0 2px 4px rgba(255,245,200,0.55);
  }
  100% { transform: translateY(0)    scale(1);     filter: brightness(1); }
}

.slot.llenado-energia {
  animation: slotEnergia 0.6s ease;
}
@keyframes slotEnergia {
  0%, 100% {
    transform: scale(1);
    text-shadow: none;
    border-bottom-color: var(--gold);
  }
  40% {
    transform: scale(1.25);
    color: #fff5c8;
    text-shadow:
      0 0 12px rgba(240,217,126,0.95),
      0 0 24px rgba(212,175,55,0.7),
      0 0 36px rgba(212,175,55,0.4);
    border-bottom-color: var(--gold-light);
  }
}

.ficha-ordenar.bounce {
  animation: rebote 0.45s ease;
}
@keyframes rebote {
  0%, 100% { transform: translateY(0); }
  30% {
    transform: translateY(-12px) rotate(-8deg);
    background: radial-gradient(circle at 35% 28%, #ffaaaa 0%, #c44 35%, #802222 75%, #4a1010 100%);
  }
  60% { transform: translateY(0) rotate(4deg); }
}

.botones-ordenar {
  display: flex;
  gap: 0.8rem;
  margin: 0.5rem 0;
}

#ordenar-feedback.exito {
  color: var(--gold-light);
  font-style: italic;
  font-size: 1rem;
}

/* Chispas al acertar */
.chispa {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #fff5c8 0%, #f0d97e 50%, transparent 100%);
  box-shadow: 0 0 8px var(--gold-light);
  transform: translate(-50%, -50%);
  animation: chispaVuela 0.8s ease-out forwards;
}
@keyframes chispaVuela {
  0%   { transform: translate(-50%, -50%) translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* ====== Victoria ====== */
.titulo-final {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  color: var(--gold);
  line-height: 1.05;
  margin-bottom: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.titulo-final span {
  color: var(--gold-light);
  font-style: italic;
  font-size: 0.7em;
  display: inline-block;
  margin-top: 0.2em;
}

.hammam-art {
  margin: 0 auto 1.2rem;
  max-width: 280px;
  filter: drop-shadow(0 4px 12px rgba(212,175,55,0.3));
}

/* ====== Escena animada de baños árabes ====== */
.hammam-escena {
  width: 100%;
  max-width: 520px;
  margin: 1.8rem auto 1.2rem;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.4);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.55),
    inset 0 0 0 4px rgba(212, 175, 55, 0.08);
  aspect-ratio: 400 / 260;
  background: #051f1d;
}
.hammam-escena svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Estrellas titilando independientemente */
.hs-star {
  animation: hsTwinkle 3s ease-in-out infinite;
  transform-origin: center;
}
.hs-star.s1 { animation-delay: 0s;    animation-duration: 2.8s; }
.hs-star.s2 { animation-delay: 0.6s;  animation-duration: 3.4s; }
.hs-star.s3 { animation-delay: 1.2s;  animation-duration: 2.6s; }
.hs-star.s4 { animation-delay: 1.8s;  animation-duration: 3.2s; }
.hs-star.s5 { animation-delay: 0.3s;  animation-duration: 2.4s; }
.hs-star.s6 { animation-delay: 2.4s;  animation-duration: 3.6s; }
.hs-star.s7 { animation-delay: 0.9s;  animation-duration: 2.9s; }
.hs-star.s8 { animation-delay: 1.5s;  animation-duration: 3.1s; }

@keyframes hsTwinkle {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

/* Vapor saliendo del agua — wisps que suben y se desvanecen */
.hs-vapor {
  animation: hsSubirVapor 6s ease-out infinite;
  transform-origin: center bottom;
  transform-box: fill-box;
  opacity: 0;
}
.hs-vapor.v1 { animation-delay: 0s;    animation-duration: 5.5s; }
.hs-vapor.v2 { animation-delay: 1.4s;  animation-duration: 6.5s; }
.hs-vapor.v3 { animation-delay: 2.8s;  animation-duration: 5.8s; }
.hs-vapor.v4 { animation-delay: 0.7s;  animation-duration: 6.2s; }
.hs-vapor.v5 { animation-delay: 4.2s;  animation-duration: 6.0s; }
.hs-vapor.v6 { animation-delay: 3.5s;  animation-duration: 5.4s; }
.hs-vapor.v7 { animation-delay: 2.1s;  animation-duration: 6.8s; }

@keyframes hsSubirVapor {
  0%   { transform: translateY(0)     scale(0.55); opacity: 0; }
  12%  { opacity: 0.55; }
  60%  { opacity: 0.35; }
  100% { transform: translateY(-100px) scale(1.7);  opacity: 0; }
}

/* Oleaje suave en la superficie del agua */
.hs-agua {
  animation: hsOleaje 7s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes hsOleaje {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-18px); }
}

/* Reflejos dorados centelleando en el agua */
.hs-reflejo {
  animation: hsBrillarReflejo 4.5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
  mix-blend-mode: screen;
}
.hs-reflejo.r1 { animation-delay: 0s;    animation-duration: 4.2s; }
.hs-reflejo.r2 { animation-delay: 1.3s;  animation-duration: 5.0s; }
.hs-reflejo.r3 { animation-delay: 2.6s;  animation-duration: 4.6s; }

@keyframes hsBrillarReflejo {
  0%, 100% { opacity: 0.18; transform: scaleX(0.85); }
  50%      { opacity: 0.55; transform: scaleX(1.15); }
}

/* Lámparas árabes balanceándose */
.hs-lamp {
  transform-origin: var(--cx) 0px;
  animation: hsBalanceo 5s ease-in-out infinite;
}
.hs-lamp.lamp1 { animation-delay: 0s;   animation-duration: 5.4s; }
.hs-lamp.lamp2 { animation-delay: 2.2s; animation-duration: 6.0s; }

@keyframes hsBalanceo {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2.5deg); }
}

.info {
  font-size: 1rem;
  margin: 0.4rem 0;
  line-height: 1.5;
  color: var(--cream);
}
.info strong { color: var(--gold-light); font-family: 'Cinzel', serif; letter-spacing: 0.05em; }

.firma {
  margin-top: 1rem;
  font-style: italic;
  color: var(--gold-light);
  font-size: 1.05rem;
}
.firma-extra {
  margin-top: 0.5rem;
  font-style: italic;
  color: rgba(244,235,215,0.85);
  font-size: 0.95rem;
}

.fade-in { animation: fadeIn 0.8s ease both; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ====== Rascable ====== */
.rascable {
  position: relative;
  width: min(560px, 92vw);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.5),
    0 0 0 1px rgba(212,175,55,0.4),
    inset 0 0 0 6px rgba(212,175,55,0.15);
  margin-bottom: 1rem;
  isolation: isolate;
}

.rascable-fondo {
  background: linear-gradient(160deg, #0e3b3a 0%, #082c2a 100%);
  padding: 2.5rem 1.5rem 2rem;
  text-align: center;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rascable-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
  transition: opacity 0.6s ease;
}
.rascable-canvas:active { cursor: grabbing; }
.rascable-canvas.revelado {
  opacity: 0;
  pointer-events: none;
}

.rascable-pista {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: 'Cinzel', serif;
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  letter-spacing: 0.3em;
  color: rgba(8,44,42,0.55);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
  animation: pulso 1.8s ease-in-out infinite;
  transition: opacity 0.4s;
}
.rascable-pista.oculto { opacity: 0; }

@keyframes pulso {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

.post-rascable {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.8s ease, max-height 1s ease;
  width: 100%;
  max-width: 720px;
}
.post-rascable.mostrar {
  opacity: 1;
  max-height: 2400px;
}

/* ====== Sorpresas extra (mini-rascables) ====== */
.sorpresas-titulo {
  font-family: 'Cinzel', serif;
  color: var(--gold-light);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin: 2.5rem 0 1.2rem;
  text-align: center;
  line-height: 1.6;
}
.sorpresas-titulo span {
  display: block;
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: none;
  color: rgba(244,235,215,0.65);
  margin-top: 0.3rem;
}

.sorpresas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (max-width: 600px) {
  .sorpresas-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
}

.mini-card {
  display: flex;
  flex-direction: column;
}

.mini-label {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  color: var(--gold-light);
  letter-spacing: 0.15em;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  text-align: center;
}

.mini-rascable {
  position: relative;
  aspect-ratio: 1.3 / 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(212,175,55,0.4);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35), inset 0 0 0 3px rgba(212,175,55,0.1);
  isolation: isolate;
  background: linear-gradient(160deg, #0e3b3a 0%, #082c2a 100%);
}

.mini-fondo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--cream);
}
.mini-fondo strong {
  color: var(--gold-light);
  font-family: 'Cinzel', serif;
  letter-spacing: 0.03em;
}

.mini-rascable canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
  transition: opacity 0.5s ease;
}
.mini-rascable canvas:active { cursor: grabbing; }
.mini-rascable canvas.revelado {
  opacity: 0;
  pointer-events: none;
}

.mini-pista {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.3em;
  font-size: 0.75rem;
  color: rgba(8,44,42,0.6);
  transition: opacity 0.3s;
  animation: pulso 1.8s ease-in-out infinite;
}
.mini-pista.oculto { opacity: 0; animation: none; }

/* ============================================
   ====== OPTIMIZACIONES PARA MÓVIL ===========
   ============================================ */

/* Botón de mute respetando notch */
.btn-mute {
  top: max(0.8rem, env(safe-area-inset-top, 0.8rem));
  right: max(0.8rem, env(safe-area-inset-right, 0.8rem));
}

/* === Tablet / móvil grande (≤ 768px) === */
@media (max-width: 768px) {
  .screen {
    padding: max(0.8rem, env(safe-area-inset-top)) 0.8rem max(0.8rem, env(safe-area-inset-bottom));
    justify-content: flex-start;
    padding-top: max(2rem, env(safe-area-inset-top));
    gap: 0.6rem;
  }

  /* Intro, carta y lámpara/genio: centrados verticalmente */
  #intro,
  #carta,
  #ordenar {
    justify-content: center;
  }

  /* Pistas: 3 cards apiladas en vertical, todas en una pantalla sin scroll */
  #pistas {
    justify-content: center;
    overflow: hidden;
    gap: 0.5rem;
  }
  .pistas-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    height: min(56vh, 440px);
    width: min(420px, 92vw);
    margin: 0.5rem auto;
    gap: 0.5rem;
  }
  .pista-card {
    min-height: 0; /* permitir que el grid lo encoja */
  }
  .pista-card .mini-rascable {
    aspect-ratio: auto;
    height: 100%;
  }
  .pista-card .mini-label {
    font-size: 0.7rem;
    margin-bottom: 0.2rem;
  }

  /* Arco menos pronunciado para que quepa */
  .arco {
    border-radius: 140px 140px 8px 8px / 100px 100px 8px 8px;
    padding: 2.5rem 1.6rem 2rem;
  }
  .arco::before {
    border-radius: 130px 130px 4px 4px / 90px 90px 4px 4px;
  }

  /* Hammam-escena más compacta */
  .hammam-escena {
    margin: 1rem auto;
    max-width: 100%;
  }

  /* Carta cae más cerca para que sea visible bajo barra de direcciones */
  .carta {
    padding: 2.2rem 1.6rem;
    font-size: 1.4rem;
  }
  .carta-texto, .carta-cursor { font-size: 1.35rem; line-height: 1.85; }
}

/* === Móvil estándar (≤ 480px) === */
@media (max-width: 480px) {
  /* Tipografía más compacta */
  .titulo { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .titulo-juego { font-size: clamp(1.05rem, 4.5vw, 1.4rem); }
  .titulo-mini { font-size: clamp(0.9rem, 3.6vw, 1.1rem); letter-spacing: 0.06em; }
  .kicker { font-size: 0.72rem; letter-spacing: 0.25em; }
  .subtitulo { font-size: 0.95rem; }

  /* Botones — touch target mínimo */
  .btn-principal {
    padding: 0.85rem 2rem;
    font-size: 0.95rem;
    min-height: 44px;
  }
  .btn-secundario {
    padding: 0.7rem 1.4rem;
    font-size: 0.8rem;
    min-height: 40px;
  }

  /* Área de juego de lámparas más pequeña */
  .area-juego {
    height: clamp(280px, 48vh, 400px);
  }

  /* Bandeja con espacios y monedas más pequeñas en móvil */
  .ficha {
    width: 2.3rem;
    height: 2.3rem;
    font-size: 1rem;
  }
  .bandeja { gap: 0.3rem; padding: 0.5rem; }
  .contador-letras { font-size: 0.78rem; letter-spacing: 0.15em; }

  .mini-label { font-size: 0.7rem; letter-spacing: 0.08em; }
  .pista-svg { width: 70%; height: 70%; }

  /* Mini-rascables del win (si vuelven a aparecer) */
  .sorpresas-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }

  /* === Lámpara mágica móvil === */
  .lamp-zona {
    width: min(310px, 88vw);
    margin: 0.5rem auto;
  }
  .lamp-barra {
    width: 88%;
    margin: 0.8rem auto 0.4rem;
  }

  /* === Genio móvil === */
  .genio-svg { width: min(180px, 45vw); }
  .genio-burbuja { padding: 0.85rem 1.2rem; }
  .genio-pregunta { font-size: 1rem; line-height: 1.35; }
  .genio-respuestas {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .btn-genio {
    padding: 0.95rem 1rem;
    font-size: 0.92rem;
    min-height: 48px;
  }

  /* === Carta móvil === */
  .carta {
    width: min(340px, 92vw);
    min-height: 380px;
    padding: 2rem 1.4rem;
  }
  .carta-texto, .carta-cursor {
    font-size: 1.25rem;
    line-height: 1.8;
  }
  .carta-sello { font-size: 3rem; }

  /* === Pantalla del win en móvil === */
  .titulo-final {
    font-size: clamp(1.8rem, 9vw, 2.8rem);
    line-height: 1.05;
  }
  .info { font-size: 0.95rem; }
  .firma { font-size: 0.95rem; }
  .firma-extra { font-size: 0.85rem; }
  .hammam-art { max-width: 220px; }

  /* === Frase de revelación final === */
  .lamp-frase {
    font-size: clamp(1.6rem, 9vw, 2.6rem);
    letter-spacing: 0.05em;
  }

  /* Botón de mute más pequeño */
  .btn-mute {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}

/* === Móvil muy pequeño (≤ 360px) === */
@media (max-width: 360px) {
  .screen { padding: 1.2rem 0.6rem; gap: 0.4rem; }
  .titulo { font-size: 1.4rem; }
  .titulo-juego { font-size: 0.95rem; letter-spacing: 0.1em; }
  .pistas-grid { gap: 0.35rem; }
  .ficha { width: 2rem; height: 2rem; font-size: 0.9rem; }
  .area-juego { height: 60vh; max-height: 360px; }
}

/* === Modo paisaje en móvil — ajustes específicos === */
@media (max-height: 480px) and (orientation: landscape) {
  .screen {
    justify-content: center;
    padding: 0.6rem 1rem;
    gap: 0.4rem;
  }
  .area-juego { height: 65vh; }
  .hammam-escena { max-width: 380px; }
  .lamp-zona { width: min(280px, 28vw); }
  .lamp-barra { margin: 0.4rem auto; }
  .genio-svg { width: 130px; }
  .carta { min-height: auto; padding: 1.5rem 1.4rem; }
}

/* === Imputs táctiles: target mínimo y feedback inmediato === */
@media (hover: none) and (pointer: coarse) {
  .btn-principal:hover, .btn-secundario:hover, .btn-genio:hover, .tecla:hover {
    /* Anular el hover en táctil para evitar estados pegados */
    transform: none;
    box-shadow: inherit;
  }

  /* Aumentar target de las lámparas (área de tap) */
  .lampara { min-width: 52px; min-height: 52px; }
}

/* Evitar zoom involuntario al doble tap en iOS y selección de texto fortuita */
button, .lamp-zona, .lampara, .ficha {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.lamp-zona, .area-juego { touch-action: none; }