/* EnglishAngel — Ludoteca: sistema visual compartido
   ====================================================
   UN solo archivo controla el aspecto del hub y de las 81 paginas de juego.
   Va enlazado con <link>, NO incrustado: si se incrusta, build.py lo estampa
   en 82 archivos y afinar un color vuelve a costar 82 subidas.

   Criterio: suelo tranquilo, figura vibrante.
   El fondo es apacible y de bajo contraste para que se pueda estar ahi mucho
   rato sin cansancio. Todo el contraste se concentra en lo que se toca.

   Las tres cosas que hacen que se sienta bien y que no son decorativas:
     1. Los controles tienen un borde inferior solido (no blur): eso los vuelve
        objetos con grosor, no rectangulos pintados.
     2. Al pulsar bajan 2px y el borde inferior se come. Es el 'clic' visual.
     3. El acierto es saturado; el fallo se RETIRA (gris, opacidad) en vez de
        pintarse de rojo. Nada en pantalla castiga al estudiante.
*/

:root{
  /* Halos del fondo — dan profundidad sin subir el contraste */
  --halo-sea: rgba(79,163,165,.16);
  --sea: #4FA3A5;
  --sea-deep: #266E78;

  /* Superficie fisica de los controles */
  --key-top: #33465F;
  --key-bot: #1B2A41;
  --key-edge: rgba(15,24,38,.85);
  --key-hit-top: #3E9A6B;
  --key-hit-bot: #2F7D4F;
  --key-hit-edge: #235F3B;
  --key-off-top: #E4E7DF;
  --key-off-bot: #D3D8CE;
  --key-off-txt: #9AA096;

  --cta-top: #C9A24A;
  --cta-bot: #B08428;
  --cta-edge: #8A6414;

  /* Profundidad */
  --lift: 0 1px 2px rgba(27,42,65,.05), 0 14px 40px rgba(27,42,65,.09);
  --lift-sm: 0 1px 2px rgba(27,42,65,.05), 0 6px 18px rgba(27,42,65,.07);

  --e-spring: cubic-bezier(.34,1.56,.64,1);
  --e-out: cubic-bezier(.22,1,.36,1);
}

/* ---------- Suelo: fondo apacible con dos halos ---------- */

.ea-ground{
  position:relative;
  background:radial-gradient(120% 90% at 12% 0%, var(--paper-hi) 0%, #F3F4EE 45%, var(--paper-lo) 100%);
}
.ea-ground::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(38% 44% at 82% 8%,  var(--halo-gold), transparent 70%),
    radial-gradient(34% 40% at 8% 88%,  var(--halo-sea),  transparent 70%);
}
.ea-ground > *{ position:relative; z-index:1 }

/* ---------- Controles fisicos ---------- */

.ea-key{
  height:44px; min-width:44px;              /* objetivo tactil minimo */
  border:none; border-radius:11px; cursor:pointer;
  font-family:var(--mono); font-size:14px; font-weight:500; color:#fff;
  background:linear-gradient(165deg, var(--key-top) 0%, var(--key-bot) 100%);
  box-shadow:0 2px 0 var(--key-edge), 0 4px 12px rgba(27,42,65,.22);
  transition:transform .1s var(--e-out), box-shadow .1s var(--e-out), opacity .3s;
}
.ea-key:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 3px 0 var(--key-edge), 0 7px 16px rgba(27,42,65,.28);
}
.ea-key:active:not(:disabled){
  transform:translateY(2px);
  box-shadow:0 0 0 var(--key-edge), 0 2px 6px rgba(27,42,65,.2);
}
.ea-key:disabled{ cursor:default }

.ea-key.is-hit{
  background:linear-gradient(165deg, var(--key-hit-top), var(--key-hit-bot));
  box-shadow:0 2px 0 var(--key-hit-edge), 0 4px 12px rgba(47,125,79,.3);
}
/* El fallo se retira, no se castiga */
.ea-key.is-miss{
  background:linear-gradient(165deg, var(--key-off-top), var(--key-off-bot));
  color:var(--key-off-txt); box-shadow:none; opacity:.55;
}

/* Llamada a la accion — oro, la unica pieza calida y saturada */
.ea-cta{
  border:none; border-radius:999px; padding:12px 24px; cursor:pointer;
  font-family:var(--sans); font-size:15px; font-weight:600; color:#fff;
  min-height:48px;
  background:linear-gradient(165deg, var(--cta-top), var(--cta-bot));
  box-shadow:0 2px 0 var(--cta-edge), 0 5px 14px rgba(201,150,47,.35);
  transition:transform .1s var(--e-out), box-shadow .1s var(--e-out);
}
.ea-cta:hover{ transform:translateY(-1px); box-shadow:0 3px 0 var(--cta-edge), 0 8px 20px rgba(201,150,47,.42) }
.ea-cta:active{ transform:translateY(2px); box-shadow:0 0 0 var(--cta-edge), 0 2px 6px rgba(201,150,47,.3) }

/* ---------- Refuerzo de los componentes que ya existen ---------- */
/* No se reescriben: se les da grosor y una pulsacion que se siente. */

.btn{
  box-shadow:0 2px 0 rgba(27,42,65,.10), var(--lift-sm);
  transition:transform .1s var(--e-out), box-shadow .1s var(--e-out), background var(--t-fast), border-color var(--t-fast);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 3px 0 rgba(27,42,65,.12), 0 8px 20px rgba(27,42,65,.12) }
.btn:active{ transform:translateY(2px); box-shadow:0 0 0 rgba(27,42,65,.10), 0 2px 6px rgba(27,42,65,.10) }

.btn.pri{
  background:linear-gradient(165deg,#C25243,var(--red)); border-color:transparent;
  box-shadow:0 2px 0 #7E2117, 0 5px 14px rgba(178,58,46,.32);
}
.btn.pri:hover{ background:linear-gradient(165deg,#C25243,#9d3227); box-shadow:0 3px 0 #7E2117, 0 8px 20px rgba(178,58,46,.4) }
.btn.pri:active{ box-shadow:0 0 0 #7E2117, 0 2px 6px rgba(178,58,46,.3) }

/* Opciones de respuesta: se quedan claras (cuatro barras oscuras cansan),
   pero ganan grosor, y la seleccion si es saturada. */
.opt{
  background:linear-gradient(165deg,#fff,#FAFBF7);
  box-shadow:0 2px 0 rgba(27,42,65,.07), 0 4px 12px rgba(27,42,65,.06);
  transition:transform .1s var(--e-out), box-shadow .1s var(--e-out), border-color var(--t-fast), background var(--t-fast);
}
.opt:hover:not(:disabled){ transform:translateY(-1px); border-color:var(--ink-12); box-shadow:0 3px 0 rgba(27,42,65,.09), 0 8px 18px rgba(27,42,65,.10) }
.opt:active:not(:disabled){ transform:translateY(2px); box-shadow:0 0 0 rgba(27,42,65,.07), 0 2px 6px rgba(27,42,65,.08) }
.opt.ok{ background:linear-gradient(165deg,#57A97A,var(--ok)); border-color:transparent; color:#fff; box-shadow:0 2px 0 #235F3B, 0 6px 16px rgba(47,125,79,.3) }
.opt.err{ background:linear-gradient(165deg,#EDE9E4,#DFDCD5); border-color:transparent; color:#8B8880; box-shadow:none; opacity:.7 }

.chip{
  box-shadow:0 2px 0 rgba(27,42,65,.08), var(--lift-sm);
  transition:transform .1s var(--e-out), box-shadow .1s var(--e-out), background var(--t-fast), border-color var(--t-fast);
}
.chip:hover{ transform:translateY(-1px); box-shadow:0 3px 0 rgba(27,42,65,.10), 0 8px 18px rgba(27,42,65,.12) }
.chip:active{ transform:translateY(2px); box-shadow:0 0 0 rgba(27,42,65,.08), 0 2px 6px rgba(27,42,65,.08) }

.glass{ box-shadow:var(--lift) }

/* ---------- Ranura de letra ----------
   Mismo lenguaje que el hueco de los ejercicios: raya inferior, no caja. */

.ea-slot{
  width:40px; height:52px;
  border-bottom:4px solid rgba(27,42,65,.22);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:34px; font-weight:700; color:var(--ink);
  transition:border-color .3s var(--e-out);
}
.ea-slot.is-on{ border-bottom-color:var(--gold) }
.ea-slot.is-on > span{ display:inline-block; animation:eaPop .4s var(--e-spring) }
@keyframes eaPop{ from{ transform:translateY(7px) scale(.7); opacity:0 } to{ transform:none; opacity:1 } }

/* ---------- Escena de La Marea ---------- */

.ea-scene{
  position:relative; height:150px; border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg,var(--paper-hi) 0%,#EFF2EC 100%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 10px rgba(27,42,65,.06);
}
.ea-phone{
  position:absolute; left:50%; top:30px; transform:translateX(-50%);
  width:42px; height:70px; border-radius:8px; z-index:1;
  background:linear-gradient(160deg,#2B3A52,var(--ink));
  box-shadow:0 3px 8px rgba(27,42,65,.3);
}
.ea-phone::after{ content:''; position:absolute; inset:4px 4px 8px; border-radius:3px; background:rgba(201,150,47,.35) }
.ea-water{ position:absolute; left:0; right:0; bottom:0; height:0; z-index:2; transition:height .7s var(--e-out) }
.ea-water-fill{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(79,163,165,.55), rgba(38,110,120,.78)) }
.ea-water-top{ position:absolute; left:0; right:0; top:-13px; width:200%; height:16px; animation:eaSwell 5s linear infinite }
@keyframes eaSwell{ to{ transform:translateX(-50%) } }
.ea-tag{
  position:absolute; left:14px; bottom:10px; z-index:3;
  font-family:var(--hand); font-size:17px; color:var(--ink);
  background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding:4px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.9);
  box-shadow:0 2px 8px rgba(27,42,65,.08);
}

/* ---------- Rejilla de teclado ----------
   Ancho tope: sin el, en pantallas anchas las teclas se estiran a rectangulos
   de 130px y pierden el aspecto de tecla. */

.ea-keys{ display:grid; grid-template-columns:repeat(9,minmax(0,46px)); gap:8px;
  justify-content:center; max-width:520px; margin:0 auto }
@media (max-width:560px){
  .ea-keys{ grid-template-columns:repeat(7,minmax(0,44px)); gap:6px; max-width:360px }
}

/* ---------- Accesibilidad ---------- */

.ea-key:focus-visible, .ea-cta:focus-visible, .btn:focus-visible, .opt:focus-visible, .chip:focus-visible{
  outline:3px solid var(--gold); outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  .ea-water-top{ animation:none }
  .ea-water{ transition:none }
  .ea-slot.is-on > span{ animation:none }
  .ea-key, .ea-cta, .btn, .opt, .chip{ transition:none }
  .ea-key:hover, .ea-cta:hover, .btn:hover, .opt:hover, .chip:hover,
  .ea-key:active, .ea-cta:active, .btn:active, .opt:active, .chip:active{ transform:none }
}

/* ---------- La Marea: palabra y miniatura del hub ---------- */

.ea-word{ display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin:20px 0 22px }

/* Miniatura de la tarjeta en el hub: una ola que sube en bucle */
.mini-marea{ position:relative; width:100%; height:100%; overflow:hidden; border-radius:8px;
  background:linear-gradient(180deg,var(--paper-hi),#EAEEE8) }
.mini-marea i{ position:absolute; left:0; right:0; bottom:0; height:42%; display:block;
  background:linear-gradient(180deg,rgba(79,163,165,.5),rgba(38,110,120,.75));
  animation:miniTide 3.2s ease-in-out infinite alternate }
@keyframes miniTide{ from{ height:26% } to{ height:58% } }
@media (prefers-reduced-motion:reduce){ .mini-marea i{ animation:none; height:42% } }

/* ---------- Empareja: imagen y palabra ---------- */

.em-board{ display:grid; grid-template-columns:auto 1fr; gap:12px 18px; margin:16px 0; align-items:start }
.em-col{ display:flex; flex-direction:column; gap:10px }

.em-tile{
  width:76px; height:66px; border:none; border-radius:14px; cursor:grab;
  background:linear-gradient(165deg,#fff,#F4F6F0);
  box-shadow:0 2px 0 rgba(27,42,65,.10), 0 6px 16px rgba(27,42,65,.10);
  display:flex; align-items:center; justify-content:center;
  transition:transform .12s var(--e-out), box-shadow .12s var(--e-out), opacity .3s;
  touch-action:none;                       /* sin esto el arrastre hace scroll en movil */
}
.em-tile:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 4px 0 rgba(27,42,65,.12), 0 10px 22px rgba(27,42,65,.14) }
.em-tile.is-sel{ transform:translateY(-2px) scale(1.04); box-shadow:0 0 0 3px var(--gold), 0 10px 22px rgba(201,150,47,.3); cursor:grabbing }
.em-tile.is-done{ opacity:0 }
.em-face{ font-size:36px; line-height:1 }

/* el fantasma que sigue al dedo */
.em-ghost{ position:fixed; z-index:9999; pointer-events:none; margin:0;
  box-shadow:0 12px 28px rgba(27,42,65,.28); transform:scale(1.06); opacity:.95 }

.em-slot{
  min-height:66px; border-radius:14px; padding:12px 16px; cursor:pointer;
  display:flex; align-items:center;
  background:linear-gradient(165deg,#fff,#FAFBF7);
  border:2px dashed rgba(27,42,65,.16);
  box-shadow:0 2px 0 rgba(27,42,65,.05);
  transition:border-color .16s var(--e-out), background .16s, transform .12s var(--e-out), box-shadow .12s;
}
.em-slot.is-target{ border-color:var(--gold); border-style:solid; background:linear-gradient(165deg,#FFFDF7,#FDF6E6);
  transform:translateY(-1px); box-shadow:0 4px 0 rgba(201,150,47,.25), 0 8px 18px rgba(201,150,47,.18) }
.em-slot.is-done{ border:2px solid var(--ok); background:linear-gradient(165deg,#F1F8F3,#E9F4EC); cursor:default;
  box-shadow:0 2px 0 rgba(47,125,79,.25) }
.em-slot.is-wrong, .em-tile.is-wrong{ animation:emShake .4s }
@keyframes emShake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }

.em-word{ font-family:var(--serif); font-size:20px; font-weight:600; color:var(--ink) }
.em-mini{ font-size:22px; margin-right:4px }
.em-slot:focus-visible{ outline:3px solid var(--gold); outline-offset:3px }

@media (max-width:560px){
  .em-tile{ width:62px; height:56px }
  .em-face{ font-size:30px }
  .em-word{ font-size:17px }
  .em-board{ gap:10px 12px }
}

/* miniatura en la tarjeta del hub */
.mini-match2{ display:flex; align-items:center; justify-content:center; gap:8px; height:100% }
.mini-match2 i{ display:block; width:22px; height:22px; border-radius:6px; background:rgba(27,42,65,.16);
  animation:miniPull 2.6s ease-in-out infinite alternate }
.mini-match2 i:last-child{ background:rgba(201,150,47,.4); animation-delay:.5s }
@keyframes miniPull{ from{ transform:translateX(-5px) } to{ transform:translateX(5px) } }
@media (prefers-reduced-motion:reduce){ .mini-match2 i{ animation:none } .em-slot.is-wrong,.em-tile.is-wrong{ animation:none } }

/* ============================================================
   Spell It · Sopa de Letras · Crucigrama
   ============================================================
   Los tres respetan la regla de la casa: el acierto SATURA (verde de --key-hit),
   el fallo se RETIRA (gris, opacidad baja). En ninguno de los tres hay rojo:
   nada en pantalla castiga al estudiante.
*/

/* ---------- Puerta de sonido (Spell It) ---------- */

.ea-gate{
  text-align:center; padding:38px 22px; margin:18px 0;
  background:rgba(255,255,255,.62); border:1px solid var(--line); border-radius:18px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:var(--lift-sm);
}
.ea-gate-ico{ font-size:40px; line-height:1; margin-bottom:10px }
.ea-gate h3{ font-family:var(--serif); font-size:21px; margin:0 0 6px; color:var(--ink) }
.ea-gate .p-note{ margin:0 0 18px }

/* ---------- Spell It ---------- */

.ea-audio-scene{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:26px 18px 22px; margin:18px 0;
  background:radial-gradient(60% 80% at 50% 20%, rgba(79,163,165,.14), transparent 70%);
  border-radius:18px;
}
/* Tres barras que solo se mueven mientras habla: es la unica pista visual de
   que el audio esta sonando, importante con el volumen bajo. */
.ea-spk{ display:flex; align-items:flex-end; gap:7px; height:44px }
.ea-spk span{
  display:block; width:9px; height:14px; border-radius:5px;
  background:linear-gradient(180deg,var(--sea),var(--sea-deep)); opacity:.45;
  transition:height .18s var(--e-out), opacity .18s;
}
.ea-audio-scene.is-talking .ea-spk span{ opacity:1; animation:eaSpk .62s ease-in-out infinite alternate }
.ea-audio-scene.is-talking .ea-spk span:nth-child(2){ animation-delay:.12s }
.ea-audio-scene.is-talking .ea-spk span:nth-child(3){ animation-delay:.24s }
@keyframes eaSpk{ from{ height:12px } to{ height:40px } }

.ea-spellbox{ display:flex; flex-direction:column; align-items:center; gap:12px; margin:6px 0 4px }
.ea-spell-lab{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.ea-spell-in{
  font-family:var(--serif); font-size:27px; text-align:center; letter-spacing:.06em;
  width:min(340px,86vw); padding:10px 14px; color:var(--ink);
  background:rgba(255,255,255,.75); border:none; border-bottom:2px solid var(--line);
  border-radius:10px 10px 0 0; outline:none;
  transition:border-color var(--t-fast), background var(--t-fast);
}
.ea-spell-in:focus{ border-bottom-color:var(--gold); background:rgba(255,255,255,.95) }
.ea-spell-in.is-ok{ border-bottom-color:var(--key-hit-bot); color:var(--key-hit-bot) }
.ea-spell-in.is-bad{ border-bottom-color:var(--key-off-bot); color:var(--muted); opacity:.75 }
.ea-spell-btns{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:4px }

.ea-ghost{
  border:1px solid var(--line); border-radius:999px; padding:11px 20px; cursor:pointer;
  font-family:var(--sans); font-size:14px; font-weight:500; color:var(--muted);
  background:rgba(255,255,255,.6); min-height:44px;
  transition:color var(--t-fast), border-color var(--t-fast), transform .1s var(--e-out);
}
.ea-ghost:hover:not(:disabled){ color:var(--ink); border-color:var(--ink) }
.ea-ghost:active:not(:disabled){ transform:translateY(1px) }
.ea-ghost:disabled{ opacity:.4; cursor:default }

.ea-hint{
  font-family:var(--hand); font-size:20px; color:var(--red); text-align:center;
  margin:10px 0 0; min-height:26px; transition:opacity .3s;
}
.ea-hint.is-hidden{ opacity:0 }

/* ---------- Sopa de Letras ---------- */

.ea-sopa{
  display:grid; grid-template-columns:repeat(var(--n),1fr);
  gap:3px; margin:18px auto; width:min(430px,94vw);
}
.ea-cel{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:clamp(11px,2.7vw,15px); font-weight:500;
  color:var(--ink); background:rgba(255,255,255,.62);
  border:1px solid var(--line); border-radius:6px; cursor:pointer;
  opacity:0; transform:scale(.86);
  transition:background var(--t-fast), color var(--t-fast), transform .16s var(--e-spring), opacity .3s;
}
.ea-cel.in{ opacity:1; transform:scale(1) }
.ea-cel:hover:not(:disabled){ background:#fff; border-color:var(--ink) }
.ea-cel.is-sel{
  background:linear-gradient(165deg,var(--cta-top),var(--cta-bot)); color:#fff;
  border-color:var(--cta-edge); transform:scale(1.08);
}
.ea-cel.is-found{
  background:linear-gradient(165deg,var(--key-hit-top),var(--key-hit-bot));
  color:#fff; border-color:var(--key-hit-edge); cursor:default;
}

.ea-clues{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:6px }
.ea-clue{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 13px; border-radius:999px;
  background:rgba(255,255,255,.6); border:1px solid var(--line);
  font-family:var(--sans); font-size:14px; color:var(--ink);
  transition:opacity var(--t-fast);
}
.ea-clue-n{ font-family:var(--mono); font-size:10px; color:var(--muted) }
/* Encontrada = se retira, no se premia con color: el premio esta en la rejilla. */
.ea-clue.is-done{ opacity:.38; text-decoration:line-through }

/* ---------- Crucigrama ---------- */

.ea-cruci-wrap{ overflow-x:auto; margin:18px 0; padding:2px; -webkit-overflow-scrolling:touch }
.ea-cruci{
  display:grid; grid-template-columns:repeat(var(--cols),34px);
  gap:2px; margin:0 auto; width:max-content;
}
.ea-cru-void{ width:34px; height:34px }
.ea-cru-cel{
  position:relative; width:34px; height:34px;
  background:rgba(255,255,255,.8); border:1px solid var(--line); border-radius:4px;
}
.ea-cru-num{
  position:absolute; top:1px; left:3px; z-index:2;
  font-family:var(--mono); font-size:8px; color:var(--muted); pointer-events:none;
}
.ea-cru-in{
  width:100%; height:100%; border:none; background:transparent; outline:none;
  text-align:center; text-transform:uppercase;
  font-family:var(--serif); font-size:18px; font-weight:600; color:var(--ink);
  border-radius:4px; padding:0; cursor:pointer;
}
.ea-cru-in.is-act{ background:rgba(201,150,47,.17) }
.ea-cru-in:focus{ background:rgba(201,150,47,.34) }
.ea-cru-in.is-ok{ background:rgba(47,125,79,.2); color:var(--key-hit-bot) }
/* Fallo: se retira en gris. Sin rojo, coherente con el resto de la ludoteca. */
.ea-cru-in.is-bad{ background:rgba(154,160,150,.26); color:var(--key-off-txt) }
.ea-cru-in.is-rev{ background:rgba(154,160,150,.18); color:var(--muted); font-style:italic }

.ea-cru-clues{ display:flex; gap:26px; flex-wrap:wrap; justify-content:center; margin:6px 0 14px }
.ea-cru-col{ flex:1 1 220px; max-width:320px }
.ea-cru-h{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:0 0 8px; padding-bottom:5px; border-bottom:1px solid var(--line);
}
.ea-cru-clue{
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:7px 10px; margin-bottom:3px; border:none; border-radius:8px;
  background:transparent; font-family:var(--sans); font-size:14px; color:var(--ink);
  transition:background var(--t-fast), opacity var(--t-fast);
}
.ea-cru-clue b{ font-family:var(--mono); font-size:11px; color:var(--gold-txt); margin-right:5px }
.ea-cru-clue i{ font-family:var(--mono); font-size:10px; color:var(--muted); font-style:normal }
.ea-cru-clue:hover{ background:rgba(255,255,255,.7) }
.ea-cru-clue.is-act{ background:rgba(201,150,47,.16) }
.ea-cru-clue.is-done{ opacity:.4; text-decoration:line-through }

@media (max-width:420px){
  .ea-cruci{ grid-template-columns:repeat(var(--cols),29px) }
  .ea-cru-void,.ea-cru-cel{ width:29px; height:29px }
  .ea-cru-in{ font-size:15px }
}

/* ---------- Miniaturas del hub ---------- */

.mini-spell{ position:relative; width:100%; height:100%; display:flex; align-items:flex-end;
  justify-content:center; gap:5px; padding-bottom:26% }
.mini-spell i{ display:block; width:7px; height:12px; border-radius:4px;
  background:linear-gradient(180deg,var(--sea),var(--sea-deep));
  animation:miniSpk 1.1s ease-in-out infinite alternate }
.mini-spell i:nth-child(2){ animation-delay:.16s }
.mini-spell i:nth-child(3){ animation-delay:.32s }
@keyframes miniSpk{ from{ height:9px } to{ height:30px } }

.mini-sopa{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; width:100%; height:100%; padding:18% }
.mini-sopa i{ display:block; border-radius:3px; background:rgba(27,42,65,.14) }
.mini-sopa i:nth-child(1),.mini-sopa i:nth-child(5),.mini-sopa i:nth-child(9){
  background:rgba(47,125,79,.55); animation:miniDiag 2.4s ease-in-out infinite alternate }
.mini-sopa i:nth-child(5){ animation-delay:.2s }
.mini-sopa i:nth-child(9){ animation-delay:.4s }
@keyframes miniDiag{ from{ opacity:.4 } to{ opacity:1 } }

.mini-cruci{ position:relative; width:100%; height:100%; display:grid;
  grid-template-columns:repeat(5,1fr); align-content:center; gap:2px; padding:22% 14% }
.mini-cruci i{ display:block; aspect-ratio:1; border-radius:2px; background:rgba(255,255,255,.9);
  border:1px solid var(--line) }
.mini-cruci i:nth-child(3){ background:rgba(201,150,47,.45);
  animation:miniCru 2s ease-in-out infinite alternate }
@keyframes miniCru{ from{ opacity:.45 } to{ opacity:1 } }

@media (prefers-reduced-motion:reduce){
  .mini-spell i,.mini-sopa i,.mini-cruci i{ animation:none }
  .ea-audio-scene.is-talking .ea-spk span{ animation:none; height:30px }
  .ea-cel{ transition:none }
}