/* Cartas coleccionables — frente y reverso reales, sobre que se rasga. */
#album{color:#452671}

.album-cabecera{
  margin:16px 0;padding:18px 16px;text-align:center;color:#523179;
  background:linear-gradient(145deg,#fffdf8f5,#faf3fff0);
  border:2px solid #fff;border-radius:30px;
  box-shadow:0 7px 0 #dac9ea80,0 16px 35px #7546a518;
}
.colecciones{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.col-chip{
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:7px 14px;
  border:2px solid #fff;border-radius:99px;background:#f3ebfd;color:#6a4b95;box-shadow:0 3px #d8c8ec;
}
.col-chip.on{background:linear-gradient(#a763f5,#7a3ada);color:#fff;border-color:#d4b4ff;box-shadow:0 3px #5d28a8}
.col-chip.cerrada{background:#efeaf6;color:#a596b8;box-shadow:0 3px #ddd3e9;cursor:default}
.col-chip .ico{font-size:16px;vertical-align:-2px}

.tabs-album{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.tabs-album .tab{
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:9px 4px;line-height:1.15;
  border:2px solid #fff;border-radius:16px;background:#ffffffb5;color:#6a4b95;box-shadow:0 3px #d8c8ec;
}
.tabs-album .tab.on{background:linear-gradient(#a763f5,#7a3ada);color:#fff;border-color:#d4b4ff;box-shadow:0 3px #5d28a8}
.tabs-album .tab small{display:block;font-size:11px;opacity:.8;font-weight:400}

.marcadores{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.marcadores .caja{
  background:#fffaf3;border:2px solid #fff;border-radius:18px;padding:8px 14px;
  box-shadow:0 4px #d9c1ea;font-size:13px;line-height:1.2;color:#6d4190;
}
.marcadores .caja b{display:block;font-size:19px;color:#532b83}
.marcadores .caja small{font-size:11px;color:#856aa0}

#al-comprar{min-height:56px;font-size:17px;border:2px solid #fff0b4;border-radius:19px;
  background:linear-gradient(#ffe887,#ffc83e);color:#623782;box-shadow:0 5px #d7a638}
#al-comprar .ico{font-size:26px;vertical-align:middle}
#al-forjar{margin-top:10px;min-height:50px;font-size:15px;border:2px solid #e6d2f9;border-radius:18px;
  background:linear-gradient(#fff,#f2e7ff);color:#6b4795;box-shadow:0 4px #d2b8e6}
#al-comprar:disabled,#al-forjar:disabled{
  background:linear-gradient(#f6f1fb,#e9e0f3);border-color:#fff;color:#9c8cb0;box-shadow:0 4px #d3c6e0;cursor:default}

/* ---------- la carta ---------- */
.carta{position:relative;aspect-ratio:2.5/3.5;perspective:1000px;cursor:pointer}
.giro{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .75s cubic-bezier(.2,.85,.25,1.15)}
.carta.tapada .giro{transform:rotateY(180deg)}
/* .giro> para no alcanzar la .cara del memorama: ahí es la pieza que gira, y con
   overflow y backface ocultos desaparecía entera al voltearla, números incluidos */
.giro>.cara{position:absolute;inset:0;border-radius:13px;overflow:hidden;padding:6px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 4px 0 #00000024,0 8px 15px #4a2a7a2b}
.frente.comun {background:linear-gradient(160deg,#e7e0f2,#b7a9cf)}
.frente.rara  {background:linear-gradient(160deg,#9fe8ff,#3a86c8)}
.frente.epica {background:linear-gradient(160deg,#e2a9ff,#7a35d8)}
.frente.legend{background:linear-gradient(160deg,#ffe98b,#e0a020)}
.reverso{transform:rotateY(180deg);display:grid;place-items:center;
  background:linear-gradient(150deg,#8b3ff0,#4a1a96);border:2px solid #b98cf5}
.reverso:after{content:'';width:54%;aspect-ratio:1;background:var(--hoja) no-repeat;
  background-size:var(--hoja-tam);background-position:14.2857% 0%;
  opacity:.9;filter:drop-shadow(0 3px 4px #0006)}
.marco{position:relative;height:100%;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(#fffdf8,#f0e6ff)}
.arte{position:relative;flex:1;display:grid;place-items:center;
  background:radial-gradient(ellipse at 50% 38%,#fff 0,#efe4ff 62%,#d9c8f5 100%)}
.rara   .arte{background:radial-gradient(ellipse at 50% 38%,#fff 0,#ddf1ff 62%,#a8d6f5 100%)}
.epica  .arte{background:radial-gradient(ellipse at 50% 38%,#fff 0,#f2e2ff 62%,#d0aef5 100%)}
.legend .arte{background:radial-gradient(ellipse at 50% 38%,#fffdf0 0,#fff0c2 62%,#ffd98a 100%)}
.arte .figura{width:80%;height:auto;aspect-ratio:1;filter:drop-shadow(0 4px 4px #5a3a8a30)}
.num{position:absolute;top:4px;right:6px;font-size:8.5px;font-weight:600;color:#7c62a0;
  background:#ffffffcc;border-radius:99px;padding:1px 5px}
.gema{position:absolute;top:4px;left:5px;width:12px;height:12px;border-radius:50%;
  border:1.5px solid #fff;box-shadow:0 1px 2px #0003}
.comun .gema{background:#b9aecb}.rara .gema{background:#46a6e8}
.epica .gema{background:#a855f7}.legend .gema{background:linear-gradient(#ffe96d,#f5a623)}
.placa{padding:5px 5px 6px;text-align:center;background:linear-gradient(#fff,#f3ebff);border-top:1px solid #e3d5f7}
.placa b{display:block;font-size:11px;line-height:1.1;color:#4d2a7d}
.placa small{display:block;font-size:8px;line-height:1.25;color:#836aa0;margin-top:2px;font-style:italic}
/* Lámina holográfica. Dos capas sobre el arte:
   :before el grano del metal, quieto, que le da el tono (overlay, para teñir sin
           apagar el dibujo);
   :after  un destello angosto que barre la carta (color-dodge, el brillo del foil).
   La legendaria va en dorado y la épica en plateado. `.holo` no lleva ni z-index ni
   mezcla propia: si creara contexto de apilado, las capas se mezclarían entre ellas
   y no con la ilustración, que es justo lo que se quiere ver. */
.holo{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:13px;
  overflow:hidden;transition:opacity .3s}
.rara .holo,.epica .holo,.legend .holo{opacity:1}
.rara .holo{background:linear-gradient(105deg,transparent 34%,#ffffff4d 47%,#8ef7ff3d 50%,#ff9ae33d 54%,transparent 66%);
  mix-blend-mode:screen}

.legend .holo:before,.epica .holo:before{content:'';position:absolute;inset:0;mix-blend-mode:overlay}
.legend .holo:before{background:repeating-linear-gradient(114deg,
  #ffdf8a4d 0 2px,#fff8dd26 2px 4px,#e8992633 4px 7px)}
.epica .holo:before{background:repeating-linear-gradient(114deg,
  #e9f1fa4d 0 2px,#ffffff26 2px 4px,#8a9eb833 4px 7px)}

/* El destello va en `overlay` y no en `color-dodge`: sobre una ilustración tan
   clara, dodge solo la empuja a blanco y no se ve nada. Con overlay la franja lleva
   un borde oscuro y un centro claro, así que se nota tanto sobre el cielo blanco
   como sobre el zorro naranja. */
.legend .holo:after,.epica .holo:after{content:'';position:absolute;
  top:-25%;bottom:-25%;left:-70%;right:-70%;mix-blend-mode:overlay;
  animation:holo-barre 5s ease-in-out infinite}
.legend .holo:after{background:linear-gradient(102deg,transparent 38%,#6b47003d 44%,
  #fff8d9cc 50%,#6b47003d 56%,transparent 62%)}
.epica .holo:after{background:linear-gradient(102deg,transparent 38%,#33445a3d 44%,
  #ffffffcc 50%,#33445a3d 56%,transparent 62%);animation-duration:6.5s}
@keyframes holo-barre{
  0%      {transform:translateX(-42%)}
  55%,100%{transform:translateX(42%)}   /* descansa antes de volver a barrer */
}
/* la carta grande del detalle se luce más */
.carta-grande .legend .holo:after,.carta-grande .epica .holo:after{animation-duration:3.6s}
.carta.falta{cursor:default}
.carta.falta .frente{background:linear-gradient(160deg,#ded6ec,#c6bbda)}
.carta.falta .marco,.carta.falta .arte{background:#efe9f8}
.carta.falta .arte .figura{filter:brightness(0) opacity(.12)}
.carta.falta .placa b{color:#b3a6c6}
.carta.falta .gema,.carta.falta .holo,.carta.falta .placa small{display:none}

.rejilla-cartas{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}
@media(max-width:380px){.rejilla-cartas{gap:7px}}
.album-vacio{grid-column:1/-1;text-align:center;color:#7a5f95;font-size:14px;padding:26px 10px}
.carta-grande{width:170px;margin:0 auto 6px}

/* ---------- capa del sobre ---------- */
#capa-sobre{
  position:fixed;inset:0;z-index:75;display:none;align-items:center;justify-content:center;
  padding:18px 14px;overflow-y:auto;background:#2a1550e8;backdrop-filter:blur(6px);
}
#capa-sobre.visible{display:flex}
#sobre-caja{max-width:430px;width:100%;margin:auto;text-align:center;color:#fff;
  background:none;border:0;box-shadow:none;padding:0}
.escena-titulo{font-size:19px;margin:0 0 12px;font-weight:600;color:#fff}
.pista-sobre{font-size:13.5px;color:#e2d2ff;margin-top:12px}
#sobre-caja .btn{margin-top:14px}

/* el sobre: dos piezas recortadas por la misma línea de zigzag */
.sobre-caja{position:relative;width:196px;aspect-ratio:2.4/3.4;margin:0 auto;cursor:pointer}
.pieza{position:absolute;inset:0;border-radius:13px;
  background:linear-gradient(150deg,#8b3ff0,#5a1fb0 55%,#3d1284);box-shadow:inset 0 0 40px #ffffff22}
.pieza:before{content:'';position:absolute;inset:0;border-radius:13px;
  background:linear-gradient(115deg,transparent 34%,#fff6 47%,#8ef7ff55 52%,transparent 66%);
  background-size:250% 250%;animation:brilla-sobre 3.2s linear infinite}
.zorro-sobre{position:absolute;left:12%;right:12%;top:16%;width:76%;height:50%;
  filter:drop-shadow(0 6px 6px #00000055)}
.pieza .marca{position:absolute;bottom:11px;left:0;right:0;font-size:12.5px;font-weight:700;
  color:#ffe789;text-shadow:0 2px 4px #0007;letter-spacing:.5px}
.tapa{z-index:2;transition:transform .75s cubic-bezier(.4,.1,.7,1),opacity .7s}
.tapa .franja{position:absolute;top:0;left:0;right:0;height:23px;background:linear-gradient(#ffe96d,#ffcb29)}
.sobre-caja.flota{animation:flota-sobre 2.4s ease-in-out infinite}
.sobre-caja.rasgado{animation:tiembla-sobre .5s}
.sobre-caja.rasgado .tapa{transform:translate(14px,-135%) rotate(-15deg);opacity:0}
.destello-blanco{position:absolute;inset:-20%;border-radius:50%;opacity:0;pointer-events:none;z-index:3;
  background:radial-gradient(circle,#fff 0,transparent 62%)}
.sobre-caja.rasgado .destello-blanco{animation:fogonazo .7s ease-out}
@keyframes fogonazo{0%{opacity:0;transform:scale(.4)}25%{opacity:.95}100%{opacity:0;transform:scale(1.5)}}
@keyframes flota-sobre{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes brilla-sobre{0%{background-position:120% 0}100%{background-position:-40% 0}}
@keyframes tiembla-sobre{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px) rotate(-2deg)}
  40%{transform:translateX(8px) rotate(2deg)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}

/* el mazo que se voltea */
.mazo{position:relative;height:min(56vh,382px);display:grid;place-items:center}
.mazo .carta{position:absolute;width:min(60vw,215px);
  transition:transform .55s cubic-bezier(.2,1.25,.4,1),opacity .4s}
.mazo .aura{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,#ffe98b99 0,transparent 62%)}
.mazo .carta.brillo{filter:drop-shadow(0 0 22px #ffd96e99)}
.sello-repetida{position:absolute;z-index:6;top:42%;left:50%;
  transform:translate(-50%,-50%) rotate(-12deg) scale(0);
  background:linear-gradient(#ffe96d,#ffbe2b);color:#5c3487;border:2px solid #fff;border-radius:12px;
  padding:6px 12px;font-size:13px;font-weight:700;box-shadow:0 4px 10px #0006;white-space:nowrap}
.carta.revelada .sello-repetida{animation:sello .5s .45s forwards}
@keyframes sello{to{transform:translate(-50%,-50%) rotate(-12deg) scale(1)}}
.contador{font-size:13.5px;color:#d9c6ff;margin-top:8px}

/* forja */
.rejilla-forja{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 4px;
  max-height:52vh;overflow-y:auto;padding:4px}
.opcion-forja{font:inherit;padding:0;border:0;background:none;cursor:pointer;color:#fff}
.nom-forja{display:block;font-size:11px;margin-top:4px;color:#e2d2ff;line-height:1.15}
.opcion-forja:active .carta{transform:scale(.94)}

/* aviso en la portada */
#sticker-album.listo{animation:latido 1.6s ease-in-out infinite}
#sticker-album.listo:after{
  content:'¡Sobre listo!';position:absolute;top:-9px;right:14px;
  background:linear-gradient(#ffe96d,#ffcb29);color:#452180;
  border:2px solid #fff;border-radius:99px;padding:3px 12px;font-size:12px;font-weight:600;
  box-shadow:0 3px #e0a92c;
}
#sticker-album.listo .album-cta{background:linear-gradient(#fff6c0,#ffd94f)}
@keyframes latido{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* tarjeta de la portada: ancha, turquesa, más baja que la de Aventura */
#inicio .sticker.ancho#sticker-album{
  display:grid;grid-template-columns:auto 1fr;grid-template-areas:'emo t' 'emo d' 'emo cta';
  align-items:center;justify-items:start;text-align:left;gap:0 16px;
  min-height:0;padding:18px 20px;
  background:linear-gradient(120deg,#19b8c8,#0e8fae);
  border:2px solid #86e6f0;box-shadow:0 5px 0 #0a7089,0 10px 20px #148ba824;color:#fff;
  /* las tarjetas anchas recortan su dibujo girado; esta lo lleva en flujo, y el
     recorte le cortaba el aviso de "¡Sobre listo!" que asoma por el borde */
  overflow:visible;
}
#inicio .sticker.ancho#sticker-album .emo{grid-area:emo;position:static;transform:none;
  font-size:84px;height:84px;filter:drop-shadow(0 5px 4px #05455733)}
#inicio .sticker.ancho#sticker-album .t{grid-area:t;font-size:25px;line-height:1.1;margin:0}
#inicio .sticker.ancho#sticker-album .d{grid-area:d;color:#e3fbff;font-size:13px;line-height:1.3;
  margin:4px 0 0;max-width:none;text-align:left}
.album-cta{grid-area:cta;margin-top:10px;display:inline-block;
  background:linear-gradient(#ffe96d,#ffcb29);color:#0c5f75;border-radius:16px;padding:7px 18px;
  box-shadow:0 3px #e0a92c;font-size:16px;font-weight:600}
#inicio .sticker.ancho#sticker-album:active{transform:translateY(4px);box-shadow:0 1px 0 #0a7089}
@media(max-width:360px){
  #inicio .sticker.ancho#sticker-album{padding:14px;gap:0 12px}
  #inicio .sticker.ancho#sticker-album .emo{font-size:68px;height:68px}
  #inicio .sticker.ancho#sticker-album .t{font-size:21px}
  .album-cta{font-size:14px;padding:6px 14px}
}
@media(prefers-reduced-motion:reduce){
  #sticker-album.listo,.sobre-caja.flota,.pieza:before{animation:none}
  .giro{transition:none}
}

/* ---------- contador de estrellas en todas las pantallas ---------- */
.contador-estrellas{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  background:linear-gradient(#fff7cb,#ffe175);border:2px solid #fff6c8;
  border-radius:99px;padding:5px 12px 5px 8px;color:#5b3488;
  box-shadow:0 3px #e0bd54;font-size:15px;font-weight:700;line-height:1;
  transition:transform .16s;
}
.contador-estrellas .ico{font-size:21px}
.contador-estrellas.brinca-contador{transform:scale(1.18)}
#inicio .marcador.brinca-contador{transform:scale(1.07)}
@media(max-width:380px){
  .contador-estrellas{font-size:13px;padding:4px 9px 4px 6px;gap:3px}
  .contador-estrellas .ico{font-size:17px}
}
.estrella-vuela{
  position:fixed;z-index:90;pointer-events:none;font-size:34px;line-height:1;
  transform:translate(-50%,-50%);filter:drop-shadow(0 3px 6px #7a4bb055);
}
@media(prefers-reduced-motion:reduce){.contador-estrellas{transition:none}}

/* ---------- contador flotante durante el vuelo ---------- */
#contador-vuelo{
  position:fixed;z-index:95;left:50%;top:calc(env(safe-area-inset-top) + 12px);
  transform:translate(-50%,-24px);opacity:0;pointer-events:none;
  display:inline-flex;align-items:center;gap:7px;padding:8px 18px 8px 13px;
  background:linear-gradient(#fff7cb,#ffe175);border:2px solid #fff;border-radius:99px;
  box-shadow:0 5px 0 #e0bd54,0 10px 22px #3a1a6a44;
  color:#5b3488;font-size:20px;font-weight:700;line-height:1;
  transition:opacity .3s,transform .35s cubic-bezier(.2,1.5,.4,1);
}
#contador-vuelo.visible{opacity:1;transform:translate(-50%,0)}
#contador-vuelo .ico{font-size:28px}

/* ---------- pila de cartas por pegar ---------- */
.pila-pendiente{display:none}
.pila-pendiente.visible{
  display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:12px 14px;
  background:linear-gradient(135deg,#fff5d6,#ffe9a8);border:2px solid #fff;
  border-radius:24px;box-shadow:0 5px #e5c268,0 12px 24px #8a6a2a1a;color:#5c3a1e;
}
.pila-cartas{position:relative;flex:0 0 62px;height:86px}
.pila-carta{position:absolute;left:0;top:0;width:62px;
  transform:translate(calc(var(--i) * 4px), calc(var(--i) * -3px)) rotate(calc(var(--i) * -3deg));
  filter:drop-shadow(0 3px 4px #00000026)}
.pila-carta .carta{cursor:default;pointer-events:none}
.pila-cuenta{
  position:absolute;right:-9px;top:-7px;z-index:5;min-width:24px;padding:2px 6px;
  background:linear-gradient(#ff8a5c,#ef5b2b);color:#fff;border:2px solid #fff;border-radius:99px;
  font-size:13px;font-weight:700;text-align:center;box-shadow:0 2px 5px #0003;
}
.pila-texto{flex:1;min-width:0;line-height:1.3}
.pila-texto b{display:block;font-size:15px;color:#7a4a12}
.pila-texto span{display:block;font-size:12.5px;color:#8b6432;margin-top:3px}

/* hueco donde va una carta que traes en la pila */
.carta.falta.por-pegar{cursor:pointer}
.carta.falta.por-pegar .frente{
  border:2px dashed #e0a63c;box-shadow:0 0 0 3px #ffe8a855,0 4px 0 #00000024;
}
.carta.falta.señalada .frente{animation:llamada 1.3s ease-in-out infinite}
@keyframes llamada{0%,100%{box-shadow:0 0 0 3px #ffe8a855,0 4px 0 #00000024}
  50%{box-shadow:0 0 0 8px #ffd25f88,0 4px 0 #00000024}}

/* aviso de cartas pendientes en la pestaña del álbum */
.tabs-album .tab{position:relative}
.tabs-album .tab .pendiente{
  position:absolute;top:-6px;right:-4px;min-width:21px;padding:1px 5px;
  background:linear-gradient(#ff8a5c,#ef5b2b);color:#fff;border:2px solid #fff;
  border-radius:99px;font-size:11px;font-weight:700;box-shadow:0 2px 4px #0003;
}
#sticker-album.listo:after{content:attr(data-aviso)}
@media(prefers-reduced-motion:reduce){
  #contador-vuelo{transition:none}
  /* el grano del metal se queda; el destello se detiene a media carta */
  .holo:after{animation:none!important;transform:translateX(0)!important}
  .carta.falta.señalada .frente{animation:none}
}

/* ---------- la racha crece en vez de tirar confeti ---------- */
#t-juego .racha{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px}
.llama-racha{display:inline-flex;align-items:center;line-height:1}
.llama-racha .ico{
  font-size:calc(19px + var(--n,3) * 3.4px);
  filter:drop-shadow(0 0 calc(var(--n,3) * 1.6px) #ff9c3caa);
  transition:font-size .25s;
}
@media(prefers-reduced-motion:reduce){.llama-racha .ico{transition:none}}

/* ---------- saludo en la portada ---------- */
#inicio .saludo{display:none}
#inicio .saludo.visible{
  display:block;margin-top:6px;font-size:clamp(15px,4vw,19px);font-weight:600;color:#6b3fa0;
}

/* ---------- pantalla de ajustes ---------- */
#ajustes{color:#452671}
.ajustes-caja{
  margin:16px 0;padding:18px 16px;color:#523179;
  background:linear-gradient(145deg,#fffdf8f5,#faf3fff0);
  border:2px solid #fff;border-radius:28px;
  box-shadow:0 6px 0 #dac9ea80,0 14px 30px #7546a516;
}
.ajustes-caja .campo{display:block;font-size:16px;font-weight:600;margin-bottom:9px;color:#532b83}
.ajustes-caja input[type=text],.campo-nombre{
  display:block;width:100%;font:inherit;font-size:19px;text-align:center;
  padding:13px 14px;margin-bottom:12px;color:#4d2a7d;
  background:#fff;border:2px solid #e3d2f6;border-radius:18px;box-shadow:0 3px #e2d5f0 inset;
}
.ajustes-caja input:focus,.campo-nombre:focus{outline:3px solid #a56ef0;outline-offset:2px;border-color:#c9a5f7}
.ajustes-caja .btn{min-height:54px;font-size:16px}
.ajustes-caja .btn.full+.btn.full{margin-top:10px}
.ajustes-caja .btn .ico{font-size:24px;vertical-align:middle;margin-right:4px}
.ajustes-caja .nota{margin:10px 0 0;font-size:13px;line-height:1.45;color:#8a6aa3;text-align:center}
.ajustes-caja .btn.peligro{
  background:linear-gradient(#ffe2e2,#ffc7c7);border-color:#fff0f0;color:#a33a3a;box-shadow:0 4px #e0a0a0;
}
.version-pie{text-align:center;font-size:13px;color:#8a72a8;margin:6px 0 20px}
.campo-nombre{margin-top:6px}

/* ---------- Junta 3: números más grandes y arrastre en vivo ---------- */
#match .ficha{font-size:clamp(13px,3.7vw,19px)}
/* El número va encima de la gema: blanco, con contorno morado dibujado en ocho
   puntos y una sombra suave debajo. En em, para que crezca con la ficha. */
#match{--contorno:
  0 -.095em 0 #4a2378, .067em -.067em 0 #4a2378, .095em 0 0 #4a2378, .067em .067em 0 #4a2378,
  0 .095em 0 #4a2378, -.067em .067em 0 #4a2378, -.095em 0 0 #4a2378, -.067em -.067em 0 #4a2378}
#match .gema-numero{
  font-size:1.25em;font-weight:700;letter-spacing:-.3px;color:#fff;
  text-shadow:var(--contorno), 0 .09em .14em rgba(40,14,70,.45);
}
#match .ficha.arrastrando{transition:none;will-change:transform}
#match .ficha{transition:transform .16s cubic-bezier(.3,1.3,.5,1)}

/* Marcadores de objetivo y movimientos, en Junta 3 y en Lluvia.
   Rejilla y no flex: el icono y la cifra van SIEMPRE en el mismo renglón, y el
   texto debajo ocupando las dos columnas. Con flex, en cuanto la cifra tenía dos
   dígitos el texto se bajaba y la caja crecía de golpe. */
#match .meta,#caida .meta{gap:12px}
#match .meta .caja,#caida .meta .caja{
  display:grid;grid-template-columns:auto auto;
  grid-template-areas:"ico cifra" "txt txt";
  align-items:center;justify-items:center;column-gap:11px;
  padding:9px 20px 8px;font-weight:700;line-height:1;
}
#match .meta .caja .ico,#caida .meta .caja .ico,
#match .meta .caja .gema-meta{grid-area:ico;font-size:42px}
#match .meta .caja .cifra,#caida .meta .caja .cifra{grid-area:cifra;font-size:34px;letter-spacing:-.5px}
#match .meta .caja small,#caida .meta .caja small{
  grid-area:txt;display:block;font-size:12.5px;font-weight:400;margin-top:4px;white-space:nowrap;
}
/* la gema del objetivo: el mismo dibujo del tablero, con su número encima */
#match .meta .gema-meta{position:relative;width:1em;height:1em;display:grid;place-items:center;
  background-repeat:no-repeat;filter:drop-shadow(0 2px 3px #5a2e8a33)}
#match .meta .gema-meta .gema-numero{font-size:.4em}
@media(max-width:380px){
  #match .meta .caja,#caida .meta .caja{padding:8px 15px 7px;column-gap:8px}
  #match .meta .caja .ico,#caida .meta .caja .ico,
  #match .meta .caja .gema-meta{font-size:36px}
  #match .meta .caja .cifra,#caida .meta .caja .cifra{font-size:29px}
}
@media(prefers-reduced-motion:reduce){#match .ficha{transition:none}}

/* ---------- piezas especiales de Junta 3 ---------- */
/* sobre el rayo, la bomba o la estrella del dibujo, la sombra sube un punto */
#match .ficha.esp .gema-numero{text-shadow:var(--contorno), 0 .09em .16em rgba(40,14,70,.6)}
#match .ficha.esp:before{
  content:'';position:absolute;inset:-2px;z-index:-1;border-radius:14px;pointer-events:none;
}
/* rayo: franja luminosa en el sentido del estallido */
#match .esp-rayo:before{
  background:linear-gradient(90deg,transparent,#fff7c2 35%,#ffe066 50%,#fff7c2 65%,transparent);
  animation:rayo-brilla 1.2s linear infinite;
}
#match .esp-rayo.dir-v:before{
  background:linear-gradient(180deg,transparent,#fff7c2 35%,#ffe066 50%,#fff7c2 65%,transparent);
}
@keyframes rayo-brilla{0%,100%{opacity:.55}50%{opacity:1}}
/* bomba: anillo que late */
#match .esp-bomba:before{
  background:radial-gradient(circle,#ff9a5c88 0,transparent 62%);
  box-shadow:inset 0 0 0 3px #ff7a3ccc;border-radius:50%;
  animation:bomba-late 1s ease-in-out infinite;
}
@keyframes bomba-late{0%,100%{transform:scale(.9)}50%{transform:scale(1.08)}}
/* estrella: arcoíris girando */
#match .esp-estrella:before{
  background:conic-gradient(#ff6fae,#ffd93d,#6be7b8,#63c8ff,#a97bff,#ff6fae);
  border-radius:50%;filter:blur(1px);opacity:.85;
  animation:estrella-gira 2.4s linear infinite;
}
@keyframes estrella-gira{to{transform:rotate(360deg)}}
/* sellito de esquina para identificarlas de un vistazo */
#match .ficha.esp:after{
  position:absolute;right:-3px;top:-5px;z-index:4;
  width:19px;height:19px;display:grid;place-items:center;border-radius:50%;
  border:1.5px solid #fff;font-size:11px;line-height:1;box-shadow:0 2px 4px #0004;
  content:'⚡';background:linear-gradient(#ffe96d,#ffbe2b);color:#7a4a12;
}
#match .esp-bomba:after{content:'💥';background:linear-gradient(#ffb07c,#ff7a3c)}
#match .esp-estrella:after{content:'★';background:linear-gradient(#fff,#e9d8ff);color:#7a35d8}
#match .ficha.meta-obj.esp:after{right:-3px;top:-5px}
/* Con arte propio (gemas.webp) el aro y el sellito de CSS sobran: el dibujo ya
   trae el distintivo del especial, o la corona de la gema de la misión. */
#match .ficha.arte-esp:before{display:none}
#match .ficha.arte-esp:after{content:none}
/* salvo si es especial Y de la misión: el dibujo es el del especial, así que la
   misión se sigue marcando con la estrellita de la esquina */
#match .ficha.meta-obj.esp.arte-esp:after{content:'★'}

/* Los boosters se mecen despacio para que se noten entre las demás. Va sobre el
   dibujo, no sobre la ficha, para que el número no se mueva ni se desalinee.
   El desfase por columna evita que todos se mezan al mismo tiempo. */
@keyframes menea-booster{
  0%,100%{transform:rotate(-3.5deg) scale(1)}
  50%    {transform:rotate(3.5deg) scale(1.05)}
}
#match .ficha.arte-esp.esp .gema-arte{animation:menea-booster 1.7s ease-in-out infinite}
#match .ficha.arte-esp.esp:nth-child(6n+2) .gema-arte{animation-delay:-.35s}
#match .ficha.arte-esp.esp:nth-child(6n+3) .gema-arte{animation-delay:-.7s}
#match .ficha.arte-esp.esp:nth-child(6n+4) .gema-arte{animation-delay:-1.05s}
#match .ficha.arte-esp.esp:nth-child(6n+5) .gema-arte{animation-delay:-1.4s}
@media(prefers-reduced-motion:reduce){
  #match .esp-rayo:before,#match .esp-bomba:before,#match .esp-estrella:before{animation:none}
}

/* ---------- efectos al detonar un especial ---------- */
#match .m3{position:relative}
.efecto-rayo,.efecto-bomba,.vuelta-estrella{position:absolute;pointer-events:none;z-index:8}
.efecto-rayo{
  overflow:hidden;border-radius:10px;
  background:linear-gradient(90deg,#fff0 0,#fff7c2 40%,#fff 50%,#fff7c2 60%,#fff0 100%);
  box-shadow:0 0 18px #ffe06699;
  animation:barrido-h .55s cubic-bezier(.4,0,.3,1) forwards;
}
.efecto-rayo.v{
  background:linear-gradient(180deg,#fff0 0,#fff7c2 40%,#fff 50%,#fff7c2 60%,#fff0 100%);
  animation-name:barrido-v;
}
@keyframes barrido-h{
  0%{transform:translateX(-100%) scaleX(.5);opacity:0}
  18%{opacity:1}
  100%{transform:translateX(100%) scaleX(1);opacity:0}
}
@keyframes barrido-v{
  0%{transform:translateY(-100%) scaleY(.5);opacity:0}
  18%{opacity:1}
  100%{transform:translateY(100%) scaleY(1);opacity:0}
}
.efecto-bomba{
  width:var(--tam);height:var(--tam);margin-left:calc(var(--tam) / -2);margin-top:calc(var(--tam) / -2);
  border-radius:50%;
  background:radial-gradient(circle,#fff 0,#ffd36e 28%,#ff8a3c99 55%,transparent 72%);
  animation:estalla .58s ease-out forwards;
}
@keyframes estalla{
  0%{transform:scale(.12);opacity:0}
  22%{opacity:1}
  100%{transform:scale(1);opacity:0}
}
.vuelta-estrella{
  inset:0;display:grid;place-items:center;
  background:radial-gradient(circle,#fffbe8cc 0,#ffe9a066 60%,transparent 75%);
  border-radius:12px;
}
.vuelta-estrella .ico{font-size:min(9vw,42px);filter:drop-shadow(0 2px 4px #c9963a66)}
@media(prefers-reduced-motion:reduce){
  .efecto-rayo,.efecto-bomba{display:none}
}

/* ---------- la ilustración cubre toda la cara de la carta ----------
   Los dibujos son escenas completas de 512×512, así que se estiran a
   sangre y la placa del nombre va encima, con un velo para que se lea.
   Cuando la carta todavía trae dibujo provisional (una celda de la hoja
   de sprites), se sigue viendo centrada y chica, como antes. */
.marco{display:block}
.arte{position:absolute;inset:0;display:grid;place-items:center}
.arte img.figura{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;filter:none;
}
.arte span.figura{width:80%;height:auto;aspect-ratio:1}   /* provisional */
.placa{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:16px 5px 6px;border-top:0;
  background:linear-gradient(180deg,#ffffff00 0,#fffdf8e8 42%,#fffdf8f7 100%);
  backdrop-filter:blur(1.5px);
}
.placa b{text-shadow:0 1px 0 #fff}
.num,.gema{z-index:3}
.num{background:#ffffffe0;backdrop-filter:blur(2px)}
/* en la pila, la carta es mínima: solo el nombre */
.pila-carta .placa{padding:10px 2px 3px}
.pila-carta .placa b{font-size:7.5px;line-height:1}
.pila-carta .placa small,.pila-carta .num{display:none}

/* ---------- el mazo del sobre, anclado al centro exacto ---------- */
.mazo .carta{left:50%;top:50%;transform:translate(-50%,-50%)}
.mazo .aura{left:50%;top:50%;transform:translate(-50%,-50%)}

/* ---------- sobre con arte propio ----------
   Las dos piezas usan la MISMA imagen estirada al 100%, así el corte de
   zigzag coincide exacto entre la tapa y el cuerpo. El brillo que corre y
   el rasgado son CSS encima, así que siguen funcionando igual. */
.sobre-caja.con-arte .pieza{
  background-image:var(--sobre-img);
  background-size:100% 100%;
  background-repeat:no-repeat;
}
/* Dorso de las cartas con arte propio (estilo.reverso): cubre toda la cara y
   deja fuera el dibujo de respaldo que salía de la hoja de sprites. */
.con-reverso .reverso{background:var(--reverso-img) center/cover no-repeat}
.con-reverso .reverso:after{display:none}

.sobre-caja.con-arte .zorro-sobre,
.sobre-caja.con-arte .marca{display:none}
.sobre-caja.con-arte .tapa .franja{opacity:.85;mix-blend-mode:multiply}

/* capa donde se dibujan los efectos Lottie, encima del tablero */
#match .capa-fx{position:absolute;inset:0;pointer-events:none;z-index:9}
#match .capa-fx .fx{position:absolute;pointer-events:none}

/* Álbum compacto y detalle ampliado. Reglas limitadas a estas dos vistas. */
#album{padding-bottom:110px}
#album .album-cabecera{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0;padding:12px;border-radius:22px;text-align:left}
#album .album-selector{position:relative;flex:1;min-width:130px;font-size:12px;color:#806397}
#album .album-selector summary{cursor:pointer;padding:6px 2px}
#album .album-selector .colecciones{position:absolute;top:100%;left:0;z-index:12;width:240px;padding:12px;background:#fffaf5;border:1px solid #e4d1f2;border-radius:16px;box-shadow:0 8px 24px #45267125}
#album .marcadores{display:flex;gap:10px;flex-wrap:nowrap;margin:0;justify-content:flex-end;font-size:12px}
#album .marcadores .caja{padding:0;border:0;background:none;box-shadow:none;font-size:12px}
#album .marcadores .caja b{display:inline;font-size:14px;margin-right:4px}
#album .marcadores .caja small{font-size:10px}
#album .marcadores .caja:last-child{background:#eee4fb;border-radius:20px;padding:6px 9px}
#album .tabs-album{order:3;flex-basis:100%;margin:0;gap:6px}
#album .tabs-album .tab{padding:10px 4px}
#album .tabs-album .tab small{display:inline;margin-left:5px;font-size:11px}
#album .album-acciones{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,560px);z-index:25;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:10px;padding:12px 16px calc(14px + env(safe-area-inset-bottom));background:#fffaf5f5;border:1px solid #fff;box-shadow:0 -5px 24px #69419818;border-radius:22px 22px 0 0}
#album #al-comprar,#album #al-forjar{margin:0;min-height:55px;padding:8px 10px;font-size:14px;line-height:1.2;border-radius:15px}
#album .album-acciones small{display:block;font-size:11px;font-weight:400;margin-top:4px}
#album #al-comprar .ico{font-size:20px}
#capa:has(.album-detalle){background:#2d174ccc;backdrop-filter:blur(7px);padding:24px 20px;overflow-y:auto}
#tarjeta:has(.album-detalle){background:none;border:0;box-shadow:none;padding:0;width:min(350px,calc(100vw - 56px),calc((100dvh - 112px)*.7143));max-width:none;border-radius:0;overflow:visible}
.album-detalle{position:relative}
.album-detalle .carta-grande{position:relative;width:100%;margin:0}
.album-detalle .cara{padding:8px;border-radius:20px}
.album-detalle .marco{border-radius:13px}
.album-detalle .placa{padding:34px 12px 16px}
.album-detalle .placa b{font-size:clamp(17px,5vw,24px);line-height:1.15}
.album-detalle .placa small{font-size:clamp(11px,3.2vw,14px);line-height:1.35;margin-top:8px}
.album-detalle .num{font-size:11px;top:8px;right:8px;padding:4px 7px}
.album-detalle .gema{display:none}
.album-detalle .album-rareza{position:absolute;top:16px;left:16px;z-index:4;padding:5px 9px;border:1px solid white;border-radius:20px;background:#eee6f7;color:#73548e;font-size:12px;box-shadow:0 2px 4px #0002}
.album-detalle .album-rareza.rara{background:#d7f1ff;color:#20618e}
.album-detalle .album-rareza.epica{background:#ead3ff;color:#6a279e}
.album-detalle .album-rareza.legend{background:#ffe99a;color:#72500b}
.album-detalle .album-cerrar{position:absolute;top:-15px;right:-15px;z-index:8;width:44px;height:44px;border:2px solid white;border-radius:50%;background:#fffaf2;color:#613489;font:30px/1 inherit;font-family:inherit;font-size:28px;cursor:pointer;box-shadow:0 3px #b89ad5}
.album-detalle .album-origen{margin:20px 0 0;color:#eee2ff;font-size:14px;text-align:center}
.album-detalle button:focus-visible{outline:3px solid #20b6dc;outline-offset:3px}
@media(max-width:380px){#album .album-selector{flex-basis:100%}#album .marcadores{width:100%;justify-content:space-between}}