/* Círculo completo de 22 cartas, sin card/fondo propio — solo un glow
   dorado bajo cada una para separarlas del fondo espacial. Cada carta es
   un flip-card: reverso (caratula compartida) visible por defecto, frente
   (arte real) revelado al pasar el cursor (o al tocar, en móvil) vía
   rotateY. La posición en el círculo y el desfase de entrada llegan por
   variables CSS puestas inline desde <v-baraja-wheel> (js/components/
   v-baraja-wheel.js). El nombre + significado de la carta activa aparecen
   en #baraja-center, en el centro exacto del círculo — nada de modal. */
.baraja-circle{
  position:relative;
  width:100%;max-width:440px;aspect-ratio:1;
  margin:24px auto 0;
}
.baraja-cards{
  position:absolute;inset:0;
  transform-origin:center;
  transition:transform 0.85s var(--ease-premium);
}
.baraja-card{
  position:absolute;top:50%;left:50%;
  width:50px;height:84px;
  margin:-42px 0 0 -25px;
  cursor:pointer;
  perspective:700px;
  opacity:0;
  transform:translate(var(--arc-x,0px), var(--arc-y,0px)) rotate(var(--arc-rot,0deg)) scale(0.6);
  transition:transform 0.9s var(--ease-premium) var(--delay,0s), opacity var(--dur-base) var(--ease-premium) var(--delay,0s);
}
.baraja-card::after{
  content:'';
  position:absolute;inset:-14px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(237,237,235,0.32), transparent 72%);
  filter:blur(14px);
  z-index:-1;
  pointer-events:none;
}
.baraja-cards.in-view .baraja-card{
  opacity:1;
  transform:translate(var(--arc-x,0px), var(--arc-y,0px)) rotate(var(--arc-rot,0deg)) scale(1);
}
.baraja-card-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform 0.55s var(--ease-card-flip);
}
.baraja-card:hover .baraja-card-inner,
.baraja-card.active .baraja-card-inner{transform:rotateY(180deg) scale(1.35);}
.baraja-card:focus-visible{outline:2px solid var(--gold);outline-offset:4px;}
.baraja-face{
  position:absolute;inset:0;
  backface-visibility:hidden;
  border-radius:6px;
  overflow:hidden;
  border:1px solid rgba(237,237,235,0.55);
  box-shadow:0 6px 20px rgba(0,0,0,0.16), inset 0 0 0 1px rgba(237,237,235,0.15);
}
.baraja-face img{width:100%;height:100%;object-fit:cover;display:block;}
.baraja-face-front{transform:rotateY(180deg);}

/* Panel central — vacío/hint por defecto, se llena con nombre+significado
   de la carta activa. */
.baraja-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56%;
  text-align:center;
  pointer-events:none;
}
.baraja-center-hint{
  font-size:11px;letter-spacing:1px;color:var(--muted);opacity:0.55;
  transition:opacity var(--dur-micro) var(--ease-premium);
}
.baraja-center-title{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-style:italic;font-weight:300;
  font-size:19px;color:var(--gold-soft);
  margin-bottom:8px;
  opacity:0;transform:translateY(6px);
  transition:opacity var(--dur-micro) var(--ease-premium), transform var(--dur-micro) var(--ease-premium);
}
.baraja-center-text{
  font-size:12px;line-height:1.55;color:var(--ink);opacity:0;
  transform:translateY(6px);
  transition:opacity var(--dur-micro) var(--ease-premium), transform var(--dur-micro) var(--ease-premium);
}
.baraja-center.showing .baraja-center-hint{opacity:0;}
.baraja-center.showing .baraja-center-title,
.baraja-center.showing .baraja-center-text{opacity:1;transform:translateY(0);}

@media (max-width:820px){
  .baraja-circle{
    width:auto;max-width:100%;height:auto;aspect-ratio:auto;
    display:block;
  }
  .baraja-cards{
    position:static;
    display:flex;gap:20px;overflow-x:auto;
    padding:16px 24px 24px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .baraja-card{
    position:static;margin:0;flex:0 0 auto;
    scroll-snap-align:center;
    transform:scale(0.85);
  }
  .baraja-cards.in-view .baraja-card{transform:scale(1);}
  /* En móvil el panel no puede quedar centrado dentro del círculo (ya no
     hay círculo) — pasa a ser una franja fija debajo de la fila de cartas. */
  .baraja-center{
    position:static;transform:none;width:100%;
    margin-top:4px;min-height:64px;
    display:flex;flex-direction:column;justify-content:center;
  }
}
@media (prefers-reduced-motion: reduce){
  .baraja-cards, .baraja-card, .baraja-card-inner{transition:none;}
}