/* ---------- Cabecera de cada tarjeta = escena de acción ---------- */
.gc-top {
  container-type: inline-size; position: relative; aspect-ratio: 16 / 9; padding: 0; overflow: hidden;
  background-image: none; display: block;
}
.gc-top .gc-no { position: absolute; right: 10px; top: 8px; z-index: 5; }
.gc-art { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sc-p { position: absolute; width: auto; filter: drop-shadow(0 1.5cqw 0 rgba(31, 29, 46, 0.4)); transition: transform 0.25s; transform-origin: 50% 100%; }
.sc-p.flip { transform: scaleX(-1); }
.sc-p.sil { filter: brightness(0); opacity: 0.9; }
.game-card:hover .sc-p, .game-card:focus-visible .sc-p { transform: translateY(-3cqw) scale(1.06); }
.game-card:hover .sc-p.flip, .game-card:focus-visible .sc-p.flip { transform: translateY(-3cqw) scale(-1.06, 1.06); }

/* Fondos de campo (cielo + césped) */
.scene-battle, .scene-catch, .scene-whack {
  background:
    radial-gradient(ellipse 22% 10% at 18% 22%, #fff 0 58%, transparent 62%),
    radial-gradient(ellipse 16% 8% at 62% 14%, #fff 0 58%, transparent 62%),
    linear-gradient(#8fd3ff, #d9f2ff 62%);
}
.sc-ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%; border-top: 3px solid #3d8a35;
  background: conic-gradient(#78c95c 25%, #6fc054 0 50%, #78c95c 0 75%, #6fc054 0) 0 0 / 7cqw 7cqw;
}
.sc-ground.full { height: 100%; border-top: 0; }
.scene-whack { background: none; }
.sc-pad { position: absolute; right: 8%; bottom: 14%; width: 40%; height: 12%; border-radius: 50%; border: 3px solid #3d8a35; background: radial-gradient(ellipse at 50% 38%, #cdeb9f, #8ec45f 72%); }

/* ¿Quién es ese Pokémon? */
.scene-whos { background: #12306b; }
.sc-rays { position: absolute; inset: -90%; will-change: transform; background: repeating-conic-gradient(from 0deg, #1f56b8 0 10deg, #2f78e0 10deg 20deg); animation: spin 60s linear infinite; }
.whos-p { height: 82%; left: 40%; bottom: -4%; }
.sc-q {
  position: absolute; left: 18%; top: 22%; font-family: var(--px); font-size: 17cqw; color: var(--yellow);
  -webkit-text-stroke: 1.8cqw var(--blue-d); paint-order: stroke fill; text-shadow: 0 1cqw 0 var(--ink); animation: bob 1.4s steps(2) infinite;
}
@keyframes bob { 50% { transform: translateY(-5px); } }

/* Combate */
.bat-l { height: 70%; left: 2%; bottom: 6%; }
.bat-r { height: 74%; right: 2%; bottom: 4%; }
.sc-spark { position: absolute; color: #fff2a8; text-shadow: 0 0 6px #ffd23f, 2px 2px 0 var(--ink); animation: pulse 0.9s steps(3) infinite; z-index: 3; }
.sc-spark.s1 { left: 44%; top: 30%; font-size: 12cqw; }
.sc-spark.s2 { left: 53%; top: 52%; font-size: 7cqw; animation-delay: 0.3s; }
@keyframes pulse { 50% { transform: scale(1.5) rotate(20deg); opacity: 0.6; } }

/* Captura */
.cat-p { height: 70%; right: 12%; bottom: 20%; }
.gc-ball {
  position: absolute; left: 14%; bottom: 14%; width: 11cqw; height: 11cqw; border-radius: 50%; border: 0.9cqw solid var(--ink); z-index: 3;
  background: linear-gradient(var(--red) 0 42%, var(--ink) 42% 58%, #fff 58%); box-shadow: inset 0 -1.2cqw 0 rgba(0, 0, 0, 0.12);
  animation: toss 2.2s ease-in infinite;
}
.gc-ball::after { content: ''; position: absolute; left: 50%; top: 50%; width: 3.4cqw; height: 3.4cqw; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; border: 0.8cqw solid var(--ink); }
@keyframes toss {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  45% { transform: translate(24cqw, -30cqw) rotate(360deg); }
  75% { transform: translate(44cqw, -14cqw) rotate(720deg); opacity: 1; }
  100% { transform: translate(46cqw, -12cqw) rotate(760deg); opacity: 0; }
}

/* Memory */
.scene-memory { background: radial-gradient(circle at 20% 20%, #c06fc0 0 8%, transparent 9%) 0 0 / 14cqw 14cqw, #8a2f88; }
.sc-tile {
  position: absolute; width: 27cqw; height: 36cqw; bottom: 8%; border: 1cqw solid var(--ink); border-radius: 2.4cqw;
  background: linear-gradient(var(--red) 0 44%, var(--ink) 44% 56%, #fff 56%); box-shadow: 0 1.5cqw 0 rgba(0, 0, 0, 0.35);
}
.sc-tile::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8cqw; height: 8cqw; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; border: 1cqw solid var(--ink); }
.sc-tile.t1 { left: 8%; transform: rotate(-9deg); }
.sc-tile.t3 { right: 8%; transform: rotate(9deg); }
.sc-tile.t2 { left: 36.5%; bottom: 14%; width: 27cqw; height: 36cqw; background: var(--cream); z-index: 2; animation: hop 1.8s ease-in-out infinite; }
.sc-tile.t2::after { display: none; }
@keyframes hop { 50% { transform: translateY(-3cqw) rotate(2deg); } }
.mem-p { position: absolute; left: 4%; top: 12%; width: 92%; height: auto; filter: none; }

/* Más o menos */
.scene-higher { background: radial-gradient(circle at 50% 120%, #8fe07d 0 40%, transparent 41%), linear-gradient(#ffe98a, #ffc94a); }
.hi-l { height: 72%; left: 3%; bottom: 4%; }
.hi-r { height: 70%; right: 3%; bottom: 4%; }
.sc-vs {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: 14cqw; height: 14cqw; display: grid; place-items: center; border-radius: 50%;
  background: var(--red); color: #fff; border: 1cqw solid var(--ink); font-family: var(--px); font-size: 4.4cqw; text-shadow: 2px 2px 0 var(--ink);
}

/* Quiz de tipos */
.scene-typequiz { background: radial-gradient(circle at 70% 55%, #ffd1e2 0 30%, transparent 31%), linear-gradient(#f95587, #c23a6a); }
.quiz-p { height: 80%; right: 8%; bottom: 2%; }
.sc-chip { position: absolute; padding: 1.4cqw 2.6cqw; border: 0.7cqw solid var(--ink); border-radius: 1.6cqw; font-family: var(--px); font-size: 4cqw; color: #fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6); animation: bob 1.8s steps(2) infinite; }
.sc-chip.c1 { left: 8%; top: 34%; }
.sc-chip.c2 { left: 16%; top: 55%; animation-delay: 0.4s; }
.sc-chip.c3 { left: 7%; top: 76%; animation-delay: 0.8s; }

/* Caza rápida */
.sc-hole { position: absolute; width: 30%; height: 15%; border-radius: 50%; border: 0.8cqw solid #3a2616; background: radial-gradient(ellipse at 50% 55%, #2a1a0d 0 52%, #6b4a2b 55% 100%); }
.sc-hole.a { left: 6%; bottom: 10%; }
.sc-hole.c { right: 6%; bottom: 10%; }
.sc-hole.b { left: 35%; bottom: 36%; width: 30%; height: 15%; background: none; border: 0; overflow: visible; }
.sc-hole .sc-back, .sc-hole .sc-front { position: absolute; left: 0; right: 0; height: 100%; border-radius: 50%; }
.sc-hole .sc-back { background: radial-gradient(ellipse at 50% 55%, #2a1a0d 0 52%, #6b4a2b 55% 100%); border: 0.8cqw solid #3a2616; bottom: 0; }
.sc-hole .sc-front { bottom: 0; height: 50%; border-radius: 0 0 50% 50% / 0 0 100% 100%; border: 0.8cqw solid #3a2616; border-top: 0; background: #6b4a2b; z-index: 3; top: auto; }
.sc-hole .sc-clip { position: absolute; left: 0; right: 0; bottom: 50%; height: 120cqw; overflow: hidden; z-index: 2; pointer-events: none; }
.whack-p { height: 34cqw; left: 50%; bottom: -34cqw; transform: translateX(-50%); will-change: translate; animation: whack-pop 1.4s ease-in-out infinite; filter: none; }
.game-card:hover .whack-p, .game-card:focus-visible .whack-p { transform: translateX(-50%); }
@keyframes whack-pop { 0%, 100% { translate: 0 0; } 40%, 60% { translate: 0 34cqw; } }

@media (prefers-reduced-motion: reduce) { .sc-rays, .sc-q, .sc-spark, .gc-ball, .sc-tile.t2, .sc-chip, .whack-p { animation: none; } .whack-p { bottom: -4cqw; } }

/* Tarjeta fuera de pantalla: animaciones en pausa (las gestiona un IntersectionObserver) */
.game-card.off * { animation-play-state: paused !important; }

/* ---------- Efectos al pasar el cursor (solo transform/opacity: baratos) ---------- */
.gc-art { transition: transform 0.4s ease-out; will-change: transform; }
.game-card:hover .gc-art, .game-card:focus-visible .gc-art { transform: scale(1.07); }
/* los Pokémon rebotan suavemente (propiedad `translate`, independiente del `transform` de la elevación) */
.game-card:hover .sc-p:not(.whack-p), .game-card:focus-visible .sc-p:not(.whack-p) { animation: card-hop 0.7s ease-in-out infinite alternate; }
@keyframes card-hop { from { translate: 0 0; } to { translate: 0 -2.2cqw; } }
/* borde y resplandor amarillo */
.game-card::after {
  content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 4px #ffd23f, inset 0 0 22px 2px #ffd23f;
  opacity: 0; transition: opacity 0.2s ease-out;
}
.game-card:hover::after, .game-card:focus-visible::after { opacity: 0.9; }
@media (prefers-reduced-motion: reduce) {
  .game-card:hover .gc-art, .game-card:focus-visible .gc-art { transform: none; }
  .game-card:hover .sc-p, .game-card:focus-visible .sc-p { animation: none; }
}