/* Duelo · «Elige tu rival» con el reparto humano (30-sep-2026).
   La variante 1 «LUCHA», la que eligió Nico (30-sep); la cebra y el carrusel
   se borraron (games/duelo/elige-rival.js).
   --c es el color de la dificultad del rival elegido (verde / ámbar / rojo).
   Todo lo que se anima es transform/opacity. Letra: ≥15 px lo que se lee,
   ≥12 px las etiquetas, en móvil. */

.s1-cpu-screen.er-on::after{ display:none; }
/* en tablet el juego vive en una columna de 680 px; esta escena ocupa la pantalla entera */
.s1-cpu-screen.er-on{ position:fixed; inset:0; }
.er{ position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; overflow:hidden; isolation:isolate;
  --c:#ffb020; --pop:cubic-bezier(.3,1.6,.5,1); --cae:cubic-bezier(.2,.9,.3,1.25);
  padding:calc(env(safe-area-inset-top,0px) + clamp(58px,8vh,84px)) clamp(14px,4.4vw,32px) calc(env(safe-area-inset-bottom,0px) + clamp(10px,2vh,22px));
  background:#060608; color:#f2f2f7; font-family:'DM Sans',system-ui,sans-serif; -webkit-tap-highlight-color:transparent; }
.er > *{ position:relative; z-index:1; }

/* cabecera común */
.er-cab{ flex:none; text-align:center; }
.er-h2{ margin:0; white-space:nowrap; font:800 clamp(1.3rem,6.3vw,3rem)/1 'Syne',system-ui,sans-serif; letter-spacing:0; text-transform:uppercase;
  color:#fbf6ea; text-shadow:0 2px 0 rgba(0,0,0,.6), 0 0 26px color-mix(in srgb, var(--c) 70%, transparent), 0 4px 22px rgba(0,0,0,.9); }

.er-chip{ display:inline-block; vertical-align:middle; padding:5px 11px; border-radius:999px; white-space:nowrap;
  font:800 clamp(.76rem,3.1vw,.92rem)/1 'DM Sans',sans-serif; letter-spacing:.1em; text-transform:uppercase;
  color:var(--c); background:color-mix(in srgb, var(--c) 16%, rgba(0,0,0,.6)); border:1px solid color-mix(in srgb, var(--c) 70%, transparent);
  box-shadow:0 0 16px -4px var(--c); }

/* pie: botón oro + pista + volver */
.er-pie{ flex:none; display:flex; flex-direction:column; align-items:center; gap:clamp(4px,.9vh,10px); width:100%; max-width:560px; margin:0 auto; }
.er-pie .s1-cta{ width:100%; }
.er-pista{ margin:0; min-height:1.2em; font:600 clamp(.8rem,3.2vw,.95rem)/1.2 'DM Sans',sans-serif; color:#bdb4a2; text-shadow:0 1px 8px rgba(0,0,0,.95); }
.er-pie .s1-volver{ width:auto; padding:8px 18px; font-size:clamp(.8rem,3.3vw,.95rem); }

/* destello a pantalla completa del color del rival */
.er-flash{ position:absolute !important; inset:0; z-index:20 !important; pointer-events:none; opacity:0;
  background:radial-gradient(70% 55% at 50% 45%, rgba(255,255,255,.55), color-mix(in srgb, var(--c) 60%, transparent) 45%, transparent 80%); }
.er-flash.on{ animation:erFlash 460ms ease-out; }
@keyframes erFlash{ 0%{ opacity:.9; } 100%{ opacity:0; } }

/* los personajes son botones sin pinta de botón */
.er-pj{ appearance:none; border:0; padding:0; margin:0; background:none; color:inherit; font:inherit; cursor:pointer; touch-action:manipulation; }
.er-pj:focus-visible{ outline:3px solid var(--c); outline-offset:4px; }
.er-pj img{ -webkit-user-drag:none; user-select:none; pointer-events:none; }

/* entrada común: el título cae con golpe */
.er.entra .er-h2{ animation:erSlam 520ms var(--pop) 60ms backwards; }
.er.entra .er-pie{ animation:erSube 420ms var(--cae) 720ms backwards; }
@keyframes erSlam{ 0%{ opacity:0; transform:scale(2.3); } 60%{ opacity:1; transform:scale(.94); } 100%{ transform:none; } }
@keyframes erSube{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

/* ═══════════════════════ 1 · LUCHA ═══════════════════════ */
.er-v1 .era-fondo{ position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(6,6,8,.55), rgba(6,6,8,.2) 30%, rgba(6,6,8,.75) 70%, #060608 100%),
    url(../assets/duelo/s1-v3/fondo-rivales.webp) center 40%/cover no-repeat; }
.er-v1 .era-fondo::after{ content:""; position:absolute; inset:0; transition:opacity 300ms;
  background:linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--c) 34%, transparent) 62%, transparent 92%); }
.er-v1 .era-rayas{ position:absolute; inset:-20% -40%; z-index:0; pointer-events:none; opacity:.22;
  background:repeating-linear-gradient(-62deg, transparent 0 34px, var(--c) 34px 37px, transparent 37px 80px);
  animation:eraRayas 6s linear infinite; }
@keyframes eraRayas{ to{ transform:translate3d(-80px,0,0); } }

.er-v1 .era-ficha{ flex:1 1 auto; min-height:0; position:relative; margin:clamp(4px,1vh,12px) calc(-1 * clamp(14px,4.4vw,32px)) 0; }
.er-v1 .era-fotos{ position:absolute; top:0; bottom:18%; right:-2%; width:min(64%,520px); }
.er-v1 .era-foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 4%; opacity:0;
  transform:translateX(14%); transition:opacity 260ms ease, transform 420ms var(--cae);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 28%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 70%, transparent 100%);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg, transparent 0, #000 28%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 70%, transparent 100%); mask-composite:intersect; }
.er-v1 .era-foto.on{ opacity:1; transform:none; }
.er-v1 .era-texto{ position:absolute; left:clamp(14px,4.4vw,32px); right:clamp(14px,4.4vw,32px); bottom:clamp(6px,1.4vh,16px);
  display:flex; flex-direction:column; align-items:flex-start; gap:clamp(4px,.8vh,8px); }
.er-v1 .era-nom b{ display:block; font:800 italic clamp(2.2rem,11.2vw,5rem)/.9 'Syne',system-ui,sans-serif; text-transform:uppercase; letter-spacing:-.01em;
  color:#fff; transform:skewX(-8deg); text-shadow:3px 3px 0 color-mix(in srgb, var(--c) 85%, #000), 0 0 30px color-mix(in srgb, var(--c) 70%, transparent), 0 6px 20px rgba(0,0,0,.9); }
.er-v1 .era-mote{ font:700 clamp(.98rem,4.2vw,1.3rem)/1.2 'DM Sans',sans-serif; color:color-mix(in srgb, var(--c) 70%, #fff); text-shadow:0 2px 10px rgba(0,0,0,.95); }
.er-v1 .era-frase{ margin:2px 0 0; max-width:min(78%,420px); padding:8px 12px; border-left:3px solid var(--c); border-radius:0 10px 10px 0;
  font:italic 400 clamp(1rem,4vw,1.25rem)/1.3 'Instrument Serif',Georgia,serif; color:#f4eee2; background:rgba(4,4,8,.66); }
.er-v1.cambia .era-texto{ animation:eraTexto 380ms var(--cae); }
@keyframes eraTexto{ 0%{ opacity:0; transform:translateX(-24px); } 100%{ opacity:1; transform:none; } }

.er-v1 .era-cartas{ flex:none; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(8px,2.6vw,18px);
  height:clamp(150px,25vh,330px); margin:clamp(8px,1.6vh,16px) auto clamp(8px,1.6vh,16px); width:100%; max-width:640px; padding:0 4px; }
.er-v1 .era-carta{ position:relative; display:block; height:100%; transform:skewX(-6deg); transition:transform 220ms var(--cae), filter 200ms; }
.er-v1 .era-carta:not(.sel){ filter:brightness(.62) saturate(.75); }
.er-v1 .era-carta.sel{ transform:skewX(-6deg) translateY(-10px); z-index:2; }
.er-v1 .era-marco{ position:absolute; inset:0; overflow:hidden; border-radius:10px; background:#111;
  border:2px solid color-mix(in srgb, var(--c) 55%, #222); box-shadow:0 12px 26px rgba(0,0,0,.6); }
.er-v1 .era-carta.sel .era-marco{ border-color:var(--c); box-shadow:0 0 0 2px color-mix(in srgb, var(--c) 40%, transparent), 0 0 30px -2px var(--c), 0 16px 30px rgba(0,0,0,.7); }
.er-v1 .era-marco img{ width:100%; height:100%; object-fit:cover; object-position:50% 14%; transform:skewX(6deg) scale(1.12); }
.er-v1 .era-placa{ position:absolute; left:0; right:0; bottom:0; padding:18px 6px 7px; text-align:center; border-radius:0 0 10px 10px;
  background:linear-gradient(0deg, rgba(4,4,8,.95) 40%, transparent); transform:skewX(6deg); }
.er-v1 .era-placa b{ display:block; font:800 clamp(.98rem,4.2vw,1.35rem)/1 'Syne',sans-serif; color:#fff; }
.er-v1 .era-placa small{ display:block; margin-top:4px; font:800 clamp(.75rem,3vw,.9rem)/1 'DM Sans',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--c); }
/* el cursor de selección, como en los juegos de pelea */
.er-v1 .era-p1{ position:absolute; left:50%; top:-16px; width:0; height:0; margin-left:-9px; opacity:0; transform:skewX(6deg);
  border-left:9px solid transparent; border-right:9px solid transparent; border-top:12px solid var(--c); filter:drop-shadow(0 0 6px var(--c)); }
.er-v1 .era-carta.sel .era-p1{ opacity:1; animation:eraCursor 900ms ease-in-out infinite; }
@keyframes eraCursor{ 50%{ transform:skewX(6deg) translateY(-5px); } }
.er-v1 .era-carta.golpe{ animation:eraGolpe 360ms var(--pop); }
@keyframes eraGolpe{ 0%{ transform:skewX(-6deg) translateY(-10px) scale(.9); } 55%{ transform:skewX(-6deg) translateY(-14px) scale(1.07); } 100%{ transform:skewX(-6deg) translateY(-10px); } }
.er-v1 .era-carta.listo{ animation:eraListo 380ms var(--pop); }
@keyframes eraListo{ 0%{ transform:skewX(-6deg) translateY(-10px) scale(1.12); } 100%{ transform:skewX(-6deg) translateY(-10px); } }
/* entrada: la ficha llega de la derecha y las cartas caen una a una */
.er-v1.entra .era-fotos{ animation:eraFicha 520ms var(--cae) 140ms backwards; }
.er-v1.entra .era-texto{ animation:eraTexto 420ms var(--cae) 380ms backwards; }
.er-v1.entra .era-carta{ animation:eraCae 480ms var(--cae) backwards; animation-delay:calc(280ms + var(--i) * 110ms); }
@keyframes eraFicha{ 0%{ opacity:0; transform:translateX(30%); } 100%{ opacity:1; transform:none; } }
@keyframes eraCae{ 0%{ opacity:0; transform:skewX(-6deg) translateY(-140%) rotate(-8deg); } 70%{ opacity:1; transform:skewX(-6deg) translateY(4%); } 100%{ transform:skewX(-6deg); } }
@media (min-width:640px){
  .er-v1 .era-texto{ left:max(32px, calc(50% - 330px)); }
  .er-v1 .era-fotos{ right:max(0px, calc(50% - 400px)); }
}

/* pantallas bajas: se aprieta todo */
@media (max-height:700px){
  .er{ padding-top:calc(env(safe-area-inset-top,0px) + 52px); }
}
@media (prefers-reduced-motion:reduce){
  .er *, .er{ animation:none !important; transition:none !important; }
}