/* css/tcg.css — ⚔️ LA ARENA (duelo de mazos). Tablero de 3 zonas:
   · IZQUIERDA (.ar-focus) → TU carta activa AMPLIADA: durante la pregunta solo se ve la
     ILUSTRACIÓN + la palabra en inglés (arriba); los paneles de abajo (significado, historia)
     están OCULTOS y ENTRAN CON FADE-IN al acertar (.ar-cover → se quita).
   · CENTRO (.ar-field)    → mini campo: Rival (vida + mazo + activa) arriba, Tú (vida + mazo)
     abajo; en medio el VS + efectividad.
   · DERECHA (.ar-action)  → el microreto sobre la carta.
   En móvil se apila. Paleta de la casa. */

#s-tcg{ padding:0 }
#tcgStage{ position:relative; display:flex; flex-direction:column; min-height:100% }

.ar-wrap{
  --ar-you:#10B981;    /* identidad TÚ = verde  */
  --ar-foe:#E11D48;    /* identidad RIVAL = rojo */
  position:relative;   /* ancla del banner de efectos (.ar-eff), que flota arriba */
  flex:1 1 auto; display:flex; flex-direction:column; min-height:100%;
  border-radius:22px; overflow:hidden; box-shadow:var(--shadow);   /* esquinas redondeadas como los demás juegos */
  /* fondo ilustrado (bosque mágico) + velo sutil arriba/abajo para legibilidad de los textos */
  background:
    linear-gradient(180deg, rgba(20,8,60,.30), rgba(20,8,60,.08) 42%, rgba(20,8,60,.44)),
    url('../assets/fondo_tcg.webp') center/cover no-repeat,
    #1a0b40;
}
.ar-field{ order:1 } .ar-focus{ order:2 } .ar-action{ order:3 }

/* ══ CENTRO: mini campo (rival arriba, tú abajo) ══ */
.ar-field{
  --mini-w: min(26vw,116px);
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center;
  gap:clamp(4px,1.2vh,10px); padding:clamp(8px,1.8vh,16px) 12px;
}
/* identidad de bando: la usan el aro de turno, la vida y el nameplate */
.ar-you{ --side:var(--ar-you) } .ar-enemy{ --side:var(--ar-foe) }
.ar-hero{ display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; max-width:360px }
.ar-heroinfo{ position:relative; display:flex; align-items:center; gap:10px; width:100% }
.ar-heroinfo.ar-hit{ animation:arShake .38s }
.ar-name{ font-weight:800; color:#fff; font-size:.86rem; opacity:.92; flex:0 0 auto; min-width:38px;
  transition:color .3s, text-shadow .3s }
.ar-you .ar-heroinfo{ flex-direction:row-reverse }
/* el nombre del bando activo se enciende con su color */
.ar-wrap.ar-turn-jug .ar-you .ar-name{ color:#6EE7B7; text-shadow:0 0 10px rgba(16,185,129,.75) }
.ar-wrap.ar-turn-maq .ar-enemy .ar-name{ color:#FDA4AF; text-shadow:0 0 10px rgba(225,29,72,.75) }
.ar-life{ position:relative; flex:1 1 auto; height:16px; border-radius:99px;
  background:rgba(255,255,255,.16); overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.35) }
.ar-life-fill{ position:absolute; inset:0 auto 0 0; height:100%; width:100%;
  background:linear-gradient(90deg,#34D399,#10B981); transition:width .5s cubic-bezier(.4,0,.2,1) }
/* vida por bando: verde tú / rojo rival. Poca vida ya no cambia de color (sería el rojo del
   rival) → LATE, para que color = bando y pulso = peligro no se pisen. */
.ar-you .ar-life-fill{ background:linear-gradient(90deg,#34D399,#10B981) }
.ar-enemy .ar-life-fill{ background:linear-gradient(90deg,#FB7185,#E11D48) }
.ar-life-fill.low{ animation:arLifeLow .8s ease-in-out infinite }
@keyframes arLifeLow{ 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.6) saturate(1.25)} }
.ar-life-num{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:.66rem; font-weight:800; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); letter-spacing:.02em }
.ar-fx{ position:absolute; inset:-30px 0 0 0; pointer-events:none; z-index:5 }

/* fila mazo + carta activa (del rival) */
.ar-row{ display:flex; align-items:center; gap:12px }
.ar-you .ar-row{ flex-direction:row-reverse }
.ar-deck{ position:relative; width:calc(var(--mini-w)*.5); flex:0 0 auto; filter:drop-shadow(0 4px 8px rgba(8,4,26,.5)) }
.ar-deck img{ width:100%; border-radius:8px; display:block; box-shadow:2px 2px 0 rgba(255,255,255,.14), 4px 4px 0 rgba(255,255,255,.08) }
.ar-deck-n{ position:absolute; right:-6px; bottom:-6px; min-width:18px; height:18px; padding:0 4px;
  display:flex; align-items:center; justify-content:center; border-radius:99px;
  background:var(--purple); color:#fff; font-size:.66rem; font-weight:800; box-shadow:0 2px 4px rgba(0,0,0,.4) }

.ar-slot{ position:relative; width:var(--mini-w); display:flex; flex-direction:column; align-items:center;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1) }
.ar-slot::before{ content:""; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%);
  width:112%; height:22px; border-radius:50%; filter:blur(7px); z-index:0;
  background:radial-gradient(ellipse,rgba(167,139,250,.5),transparent 70%) }   /* tú: violeta */
.ar-enemy .ar-slot::before{ background:radial-gradient(ellipse,rgba(99,128,237,.45),transparent 70%) }  /* rival: azul */
.ar-card{ width:100%; position:relative; z-index:1; transition:opacity .3s, filter .3s }
.ar-card .ccard{ filter:drop-shadow(0 6px 14px rgba(8,4,26,.5)) }
/* aro de turno alrededor de la ficha: color de bando; brilla (latido) en SU turno, oculto en el
   turno ajeno, donde además la ficha se atenúa un poco (está "esperando") */
.ar-slot::after{ content:""; position:absolute; inset:0; border-radius:12px; z-index:2; pointer-events:none;
  box-shadow:0 0 0 2px var(--side), 0 0 10px 1px var(--side); opacity:0; transition:opacity .3s }
.ar-wrap.ar-turn-jug .ar-you .ar-slot::after,
.ar-wrap.ar-turn-maq .ar-enemy .ar-slot::after{ opacity:1; animation:arTurnGlow 1.5s ease-in-out infinite }
@keyframes arTurnGlow{ 0%,100%{opacity:.45} 50%{opacity:1} }
.ar-wrap.ar-turn-jug .ar-enemy .ar-card,
.ar-wrap.ar-turn-maq .ar-you .ar-card{ opacity:.55; filter:saturate(.7) }

/* "el rival responde": tira breve sobre SU carta con lo que contesta (✓ / ✗). Roja = del rival,
   no interactiva. Refuerza la palabra sin parecer una pregunta para el jugador. */
.ar-think{ position:absolute; left:50%; bottom:7%; transform:translateX(-50%); z-index:8;
  width:90%; padding:5px 8px; border-radius:10px; text-align:center; pointer-events:none;
  background:rgba(15,6,40,.92); border:1.5px solid var(--ar-foe); box-shadow:0 4px 12px rgba(0,0,0,.45);
  display:flex; flex-direction:column; align-items:center; gap:1px; animation:arThink .25s ease both }
.ar-think small{ font-size:.52rem; font-weight:800; color:#FDA4AF; text-transform:uppercase; letter-spacing:.05em; line-height:1 }
.ar-think-line{ font-size:.74rem; font-weight:800; color:#fff; display:flex; align-items:center; gap:5px; line-height:1.1 }
.ar-think-ok{ color:#34D399 } .ar-think-bad{ color:#FB7185 }
.ar-think.bad s{ color:#d9c9ef; opacity:.9 }
@keyframes arThink{ from{opacity:0; transform:translateX(-50%) translateY(6px) scale(.9)} to{opacity:1; transform:translateX(-50%) translateY(0) scale(1)} }

/* swap de carta con FADE (para no ver el marco vacío al cambiar de carta) */
.ar-focus,.ar-card{ transition:opacity .2s ease }
.ar-swap-out{ opacity:0 }
/* la ilustración de La Arena va precargada → se muestra ya, sin el fade "ready" (que provocaba el pop) */
.ar-wrap .cc-ilus,.ar-focus .cc-ilus{ opacity:1 }

/* divisor "EN GUARDIA": ⚔️ flanqueada por dos líneas moradas (estilo barra de vida). Sale entre
   turnos y se RETIRA durante el choque de cartas (.ar-clash) para no estorbar. */
.ar-mid{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:30px;
  transition:opacity .25s ease }
.ar-wrap.ar-clash .ar-mid{ opacity:0 }
.ar-vs{ font-size:1.3rem; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)) }
.ar-guard-line{ width:clamp(22px,7vw,52px); height:6px; border-radius:99px; flex:0 0 auto;
  background:linear-gradient(90deg, transparent, #A78BFA 45%, #7C3AED);
  box-shadow:0 1px 5px rgba(124,58,237,.55) }
.ar-guard-line.r{ transform:scaleX(-1) }
/* mensajes de combate ("¡Súper eficaz!", "¡El rival falla!"…): callout flotante en el CENTRO,
   entre las dos cartas y POR ENCIMA de todo (z alto) — así el choque NUNCA lo tapa, y aparece
   justo donde el divisor ⚔️ se aparta. */
.ar-eff{ position:absolute; top:50%; left:50%; z-index:20;
  font-weight:900; font-size:clamp(.95rem,3.8vw,1.25rem); color:#fff; padding:7px 22px;
  border-radius:99px; white-space:nowrap; pointer-events:none; text-align:center;
  background:rgba(20,8,60,.86); box-shadow:0 8px 26px rgba(0,0,0,.5);
  opacity:0; transform:translate(-50%,-50%) scale(.6);
  transition:opacity .2s, transform .2s }
.ar-eff:not(:empty){ opacity:1; transform:translate(-50%,-50%) scale(1) }
.ar-eff-super{ background:linear-gradient(135deg,#FBBF24,#F97316); color:#3b1400;
  box-shadow:0 8px 28px rgba(249,115,22,.6); animation:arPop .34s }
.ar-eff-poco{ background:rgba(20,8,60,.86) }
/* la animación conserva el centrado (translate(-50%,-50%)) mientras hace el "pop" */
@keyframes arPop{ 0%{transform:translate(-50%,-50%) scale(.4)} 60%{transform:translate(-50%,-50%) scale(1.18)} 100%{transform:translate(-50%,-50%) scale(1)} }

/* embestida al atacar: la carta del campo se lanza hacia el centro (tú subes, rival baja) */
.ar-atk-up{ transform:translateY(-24%) scale(1.06) }
.ar-atk-down{ transform:translateY(24%) scale(1.06) }
@keyframes arShake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)}
  40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)} }
.ar-dmg{ position:absolute; left:50%; top:0; transform:translateX(-50%); font-weight:900;
  font-size:1.35rem; color:#FB7185; text-shadow:0 2px 6px rgba(0,0,0,.6); animation:arDmg .9s ease-out forwards }
.ar-dmg.big{ font-size:1.9rem; color:#FBBF24 }
@keyframes arDmg{ 0%{opacity:0; transform:translate(-50%,10px) scale(.6)}
  25%{opacity:1; transform:translate(-50%,-4px) scale(1.1)} 100%{opacity:0; transform:translate(-50%,-40px) scale(1)} }

/* chispas + flash de impacto (se inyectan en la carta golpeada); estallido dorado en súper */
.ar-spark{ position:absolute; left:50%; top:42%; width:7px; height:7px; border-radius:50%; z-index:6;
  background:radial-gradient(circle,#fff,#FBBF24); box-shadow:0 0 6px #FBBF24; pointer-events:none;
  transform:translate(-50%,-50%); animation:arSpark .62s ease-out forwards }
.ar-spark.big{ width:10px; height:10px; background:radial-gradient(circle,#fff,#F97316); box-shadow:0 0 11px #F97316 }
@keyframes arSpark{ 0%{opacity:1; transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0; transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.3)} }
.ar-flash{ position:absolute; left:50%; top:42%; width:22px; height:22px; border-radius:50%; z-index:5;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.9),transparent 70%); animation:arFlash .46s ease-out forwards }
.ar-flash.big{ background:radial-gradient(circle,rgba(251,191,36,.95),transparent 70%) }
@keyframes arFlash{ 0%{opacity:.9; transform:translate(-50%,-50%) scale(.4)} 100%{opacity:0; transform:translate(-50%,-50%) scale(4.2)} }
.ar-superflash{ position:absolute; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(circle at 50% 45%, rgba(251,191,36,.35), transparent 60%); animation:arSuperFlash .52s ease-out forwards }
@keyframes arSuperFlash{ 0%{opacity:0} 25%{opacity:1} 100%{opacity:0} }

/* DAÑO recibido: la carta atacada (tuya o del rival) se sacude y destella rojo */
.ar-slot.ar-hit-card{ animation:arHitShake .44s ease }
@keyframes arHitShake{ 0%,100%{transform:translate(0,0) rotate(0)}
  15%{transform:translate(-5px,2px) rotate(-2.5deg)} 35%{transform:translate(5px,-2px) rotate(2.5deg)}
  55%{transform:translate(-4px,1px) rotate(-1.5deg)} 78%{transform:translate(3px,-1px) rotate(1deg)} }
.ar-dmg-flash{ position:absolute; inset:0; border-radius:8%; pointer-events:none; z-index:4;
  background:rgba(239,68,68,.55); mix-blend-mode:hard-light; animation:arDmgFlash .46s ease-out forwards }
@keyframes arDmgFlash{ 0%{opacity:0} 16%{opacity:1} 100%{opacity:0} }

/* ══ IZQUIERDA / arriba: carta AMPLIADA (tu activa) ══ */
.ar-focus{ position:relative; width:100%; max-width:210px; margin:0 auto; padding:6px 0 }
/* la ampliada es la carta EN JUEGO: toma el color del bando activo y luce un halo firme
   (identidad + "esta es la que ataca ahora") */
.ar-wrap.ar-turn-jug .ar-focus{ --side:var(--ar-you) }
.ar-wrap.ar-turn-maq .ar-focus{ --side:var(--ar-foe) }
.ar-focus .ccard{ margin:0 auto; filter:drop-shadow(0 8px 18px rgba(8,4,26,.55)) drop-shadow(0 0 8px var(--side)) }
/* los paneles de abajo (historia, significado, tipo, nivel) y sus textos: fade suave.
   Aplica a TUS cartas de La Arena (ampliada + la del campo); la del rival nunca se tapa. */
.ar-wrap .cc-l-panel_historia,.ar-wrap .cc-l-palabra_esp,.ar-wrap .cc-l-palabra_esp_marc,
.ar-wrap .cc-l-sombra_tipo_palabra,.ar-wrap .cc-l-tipo_palabra,.ar-wrap .cc-l-nivel_palabra,
.ar-wrap .cc-es,.ar-wrap .cc-story,.ar-wrap .cc-type,.ar-wrap .cc-level{ transition:opacity .55s ease }
/* durante la pregunta (.ar-cover): OCULTOS → solo se ve la ilustración + la palabra en inglés */
.ar-cover .cc-l-panel_historia,.ar-cover .cc-l-palabra_esp,.ar-cover .cc-l-palabra_esp_marc,
.ar-cover .cc-l-sombra_tipo_palabra,.ar-cover .cc-l-tipo_palabra,.ar-cover .cc-l-nivel_palabra,
.ar-cover .cc-es,.ar-cover .cc-story,.ar-cover .cc-type,.ar-cover .cc-level{ opacity:0 }
/* al acertar (.ar-reveal): brillo dorado de premio mientras entran los paneles */
.ar-reveal .ccard{ animation:arReveal .6s ease }
@keyframes arReveal{ 0%{ filter:drop-shadow(0 0 0 rgba(251,191,36,0)) }
  30%{ filter:drop-shadow(0 0 18px rgba(251,191,36,.95)) } 100%{ filter:drop-shadow(0 10px 20px rgba(8,4,26,.55)) } }

/* ══ DERECHA / abajo: microreto ══ */
.ar-action{
  flex:0 0 auto; background:var(--surface); border-radius:26px 26px 0 0;
  margin-top:-10px; padding:16px 14px calc(14px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 30px rgba(20,8,60,.28); position:relative; z-index:4; min-height:120px;
}
.ar-q{ display:flex; flex-direction:column; align-items:center; gap:12px }
/* cronómetro de 5s: cuanto más lleno respondas, más fuerte pega tu carta */
.ar-timer{ width:100%; max-width:34rem; height:9px; border-radius:99px; background:var(--border); overflow:hidden }
.ar-timer-fill{ display:block; height:100%; width:100%; border-radius:99px; will-change:width;
  animation:arTimer 5s linear forwards }
@keyframes arTimer{ 0%{ width:100%; background:#10B981 } 55%{ background:#FBBF24 } 100%{ width:0%; background:#EF4444 } }
.ar-q-hint{ display:block; font-size:.72rem; font-weight:800; color:var(--text2);
  text-transform:uppercase; letter-spacing:.06em; margin-top:3px }
.ar-q-top{ font-weight:800; color:var(--text); text-align:center; font-size:clamp(1rem,3.8vw,1.15rem) }
.ar-q-top b{ color:var(--purple) }
.ar-bolt{ color:#F59E0B }
.ar-listen{ min-height:48px; padding:10px 22px; border:0; border-radius:99px; cursor:pointer;
  background:#F5F3FF; color:var(--purple); font-weight:800; font-size:1rem;
  transition:background .2s; display:inline-flex; align-items:center; gap:8px }
.ar-listen:hover{ background:#ECE9FF }
.ar-opts{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; width:100% }
.ar-op{ flex:1 1 40%; min-width:120px; max-width:220px; min-height:52px; padding:12px 16px;
  border:2px solid var(--border); border-radius:16px; background:var(--surface); color:var(--text);
  font-weight:800; font-size:1.02rem; cursor:pointer; transition:border-color .2s, background .2s, transform .12s }
.ar-op:hover:not(:disabled){ border-color:var(--purple-light); background:#FAF9FF }
.ar-op:active:not(:disabled){ transform:translateY(1px) }
.ar-op.ok{ border-color:#10B981; background:#ECFDF5; color:#065F46 }
.ar-op.bad{ border-color:#E11D48; background:#FFF1F2; color:#9F1239 }

.ar-thinking{ display:flex; align-items:center; justify-content:center; gap:10px;
  color:var(--text2); font-weight:700; padding:20px 0; font-size:1.02rem }
.ar-dots{ display:inline-flex; gap:4px }
.ar-dots i{ width:8px; height:8px; border-radius:50%; background:var(--purple-light); animation:arBlink 1s infinite }
.ar-dots i:nth-child(2){ animation-delay:.15s } .ar-dots i:nth-child(3){ animation-delay:.3s }
@keyframes arBlink{ 0%,100%{opacity:.3} 50%{opacity:1} }

/* ── pantalla bloqueada (menos de 8 cartas) ── */
.ar-lock{ margin:auto; max-width:min(420px,92vw); text-align:center; padding:32px 24px; color:var(--text) }
.ar-lock-emo{ font-size:3.2rem; margin-bottom:10px }
.ar-lock h2{ font-size:1.5rem; color:var(--deep); margin-bottom:8px }
.ar-lock p{ color:var(--text2); line-height:1.6; margin-bottom:18px }
.ar-lock p b{ color:var(--purple) }
.ar-lock-bar{ height:12px; border-radius:99px; background:var(--border); overflow:hidden; margin:0 auto 22px; max-width:280px }
.ar-lock-bar span{ display:block; height:100%; background:linear-gradient(90deg,var(--purple-light),var(--purple)); border-radius:99px }
.ar-lock .btn{ margin:0 auto }

/* ══ PANTALLA FINAL ÉPICA (estilo LoL) ══ */
.ar-fin{ position:absolute; inset:0; z-index:20; border-radius:22px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:radial-gradient(circle at 50% 42%, rgba(26,11,64,.55), rgba(8,3,26,.92));
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:arFinIn .35s ease both }
@keyframes arFinIn{ from{opacity:0} to{opacity:1} }
/* rayos de luz girando detrás del título (dorados en victoria, violeta en derrota) */
.ar-fin-rays{ position:absolute; left:50%; top:44%; width:150%; aspect-ratio:1; transform:translate(-50%,-50%);
  z-index:0; opacity:.7; animation:arRays 26s linear infinite;
  background:repeating-conic-gradient(from 0deg, rgba(251,191,36,.16) 0deg 5deg, transparent 5deg 17deg);
  -webkit-mask:radial-gradient(circle, #000 8%, transparent 60%); mask:radial-gradient(circle, #000 8%, transparent 60%) }
.ar-fin-lose .ar-fin-rays{ background:repeating-conic-gradient(from 0deg, rgba(129,140,248,.14) 0deg 5deg, transparent 5deg 17deg) }
@keyframes arRays{ to{ transform:translate(-50%,-50%) rotate(360deg) } }

.ar-fin-card{ position:relative; z-index:1; padding:22px; max-width:92% }
.ar-fin-emblem{ font-size:clamp(2.6rem,10vw,4rem); filter:drop-shadow(0 5px 12px rgba(0,0,0,.55));
  animation:arEmblem .6s cubic-bezier(.34,1.56,.64,1) both }
@keyframes arEmblem{ 0%{opacity:0; transform:scale(0) rotate(-30deg)} 100%{opacity:1; transform:scale(1) rotate(0)} }
.ar-fin-title{ font-family:'Cormorant Garamond', Georgia, serif; font-weight:700; line-height:1;
  font-size:clamp(3rem,13vw,6rem); letter-spacing:.04em; margin:2px 0 6px;
  background:linear-gradient(180deg,#FFF6DA,#FBBF24 46%,#B45309);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 12px rgba(251,191,36,.5)); animation:arTitle .7s cubic-bezier(.2,.8,.2,1) both }
.ar-fin-lose .ar-fin-title{ background:linear-gradient(180deg,#EEF2FF,#A78BFA 50%,#6D28D9);
  -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 3px 12px rgba(167,139,250,.45)) }
@keyframes arTitle{ 0%{opacity:0; transform:translateY(-20px) scale(1.28); letter-spacing:.22em}
  60%{opacity:1} 100%{opacity:1; transform:translateY(0) scale(1); letter-spacing:.04em} }
.ar-fin-sub{ color:#EDE9FE; font-weight:700; font-size:clamp(.95rem,3.6vw,1.15rem); opacity:.92;
  margin-bottom:16px; animation:arFinFade .6s .28s both }
.ar-fin-stats{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:20px; animation:arFinFade .6s .42s both }
.ar-fin-chip{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22); color:#fff; font-weight:800; font-size:.95rem; padding:7px 14px; border-radius:99px }
.ar-fin-gem{ width:18px; height:18px; vertical-align:-3px }
.ar-fin-btns{ display:flex; flex-direction:column; gap:10px; align-items:center; animation:arFinFade .6s .56s both }
@keyframes arFinFade{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
/* confeti (solo victoria) */
.ar-confeti{ position:absolute; top:-24px; width:9px; height:14px; border-radius:2px; z-index:2; opacity:.95;
  animation-name:arConfeti; animation-timing-function:linear; animation-fill-mode:forwards }
@keyframes arConfeti{ 0%{ transform:translateY(0) rotate(var(--rot)) }
  100%{ transform:translateY(115vh) rotate(calc(var(--rot) + 380deg)); opacity:.15 } }

/* móvil: la carta AMPLIADA (protagonista del turno) SÍ se muestra ahora — es donde se ve el
   detalle, porque las del campo son fichas mudas. Se apila compacta bajo el campo. */
@media (max-width:1023px){
  .ar-focus{ max-width:150px; padding:2px 0 }
  .ar-field{ --mini-w:min(30vw,140px) }
}

/* ══ ESCRITORIO / TABLET APAISADA: 3 zonas en fila ══ */
@media (min-width:1024px){
  .ar-wrap{
    display:grid; align-items:center; min-height:100%;
    grid-template-columns:minmax(230px,1fr) minmax(230px,320px) minmax(300px,1.15fr);
    gap:clamp(16px,2.5vw,40px); padding:clamp(20px,3vw,40px);
  }
  .ar-focus{ order:0; max-width:300px }
  .ar-field{ order:0; --mini-w:134px; align-self:center }
  .ar-vs{ font-size:1.6rem }
  .ar-action{ order:0; position:static; margin:0; border-radius:24px; box-shadow:var(--shadow);
    padding:clamp(22px,2.4vw,30px); min-height:0; align-self:center }
  .ar-q{ gap:18px }
  .ar-q-top{ font-size:clamp(1.05rem,1.5vw,1.25rem) }
  .ar-listen{ font-size:1.05rem; min-height:52px }
  .ar-op{ min-height:58px; font-size:1.1rem }
}

/* accesibilidad: sin movimiento si el sistema lo pide */
@media (prefers-reduced-motion:reduce){
  .ar-life-fill,.ar-eff,.ar-slot{ transition:none }
  .ar-atk-up,.ar-atk-down{ transform:none }
  /* sin latidos: el aro de turno se queda fijo (visible) y la vida baja no parpadea */
  .ar-slot::after,.ar-life-fill.low{ animation:none !important }
  .ar-think{ animation:none !important }
  .ar-heroinfo.ar-hit,.ar-dmg,.ar-eff-super,.ar-dots i,.ar-reveal .ccard,
  .ar-spark,.ar-flash,.ar-superflash,.ar-slot.ar-hit-card,.ar-dmg-flash{ animation:none !important }
  .ar-spark,.ar-flash,.ar-superflash{ display:none }
  .ar-slot.ar-hit-card{ transform:none }
  .ar-fin,.ar-fin-rays,.ar-fin-emblem,.ar-fin-title,.ar-fin-sub,.ar-fin-stats,.ar-fin-btns,.ar-confeti{ animation:none !important }
  .ar-confeti{ display:none }
  .ar-wrap .cc-l-panel_historia,.ar-wrap .cc-es,.ar-wrap .cc-story{ transition:none }
}