:root{
  --bg: #0f0018;
  --bg2: #1F1430;
  --gold: #FFD23F;
  --pink: #FF3D81;
  --lime: #B4FF39;
  --cream: #F5F0E8;
  --muted: #9C8BB5;
  --blue: #8FB8FF;
  --lilac: #B98EFF;
}
*{box-sizing:border-box; margin:0; padding:0;}
button, input, select, textarea{ font-family: inherit; }
/* display:flex + column en vez de position:absolute para el indicador:
   así el propio .sound-widget crece para abarcar botón + indicador sin
   huecos, y el hover no se corta al bajar el ratón hacia el slider (un
   hueco entre ambos, aunque sea de pocos píxeles, sacaría el puntero de
   la zona con hover antes de llegar al indicador). */
.sound-widget{ position: fixed; top: 14px; right: 14px; z-index: 30; display:flex; flex-direction:column; align-items:flex-end; }
.sound-toggle{
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.15);
  color: var(--cream); font-size: 17px; cursor: pointer;
  display:flex; align-items:center; justify-content:center;
  transition: border-color 0.15s ease, background 0.15s ease;
  flex: none;
}
.sound-toggle:hover{ border-color: var(--gold); background: rgba(255,210,63,0.1); }
.sound-toggle.muted{ opacity: 0.5; }
/* Se revela solo con el ratón encima (del botón o del propio indicador,
   ya que ambos son parte continua del mismo contenedor) — clicar el
   botón ya no abre nada, ahora silencia/restaura directamente. */
.volume-dropdown{
  margin-top: 8px; width: 44px; height: 140px;
  display:flex; align-items:center; justify-content:center;
  background: var(--bg2); border: 1.5px solid rgba(255,255,255,0.15); border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.15s ease;
}
.sound-widget:hover .volume-dropdown{
  opacity: 1; visibility: visible; pointer-events: auto;
}
.volume-dropdown input[type="range"]{
  width: 100px; accent-color: var(--gold); cursor: pointer;
  transform: rotate(-90deg);
}
body{
  position:relative;
  background: var(--bg);
  color: var(--cream);
  font-family: 'Tomorrow', sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding: 20px 14px 40px;
  overflow-x:hidden;
}
/* Atmósfera de fondo: campo de estrellas + nebulosas de color, para que
   se sienta como el interior de un juego y no una página en blanco. */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.4px 1.4px at 78% 12%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1.2px 1.2px at 62% 68%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.2px 1.2px at 28% 82%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.6px 1.6px at 92% 58%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 45% 38%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 8% 55%, rgba(255,255,255,0.3), transparent);
  background-repeat: repeat;
  background-size: 340px 340px;
  opacity: 0.65;
}
body::after{
  content:""; position:fixed; inset:-40px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(520px 380px at 50% 0%, rgba(190,110,255,0.20), transparent 65%),
    radial-gradient(440px 320px at 10% 6%, rgba(255,61,129,0.16), transparent 70%),
    radial-gradient(400px 320px at 90% 16%, rgba(143,184,255,0.14), transparent 70%),
    radial-gradient(440px 360px at 50% 100%, rgba(180,255,57,0.08), transparent 70%);
  animation: nebulaDrift 50s ease-in-out infinite;
}
/* Deriva muy lenta de las nebulosas de fondo, para que la atmósfera se
   sienta viva sin que se note como una animación "activa" — de ahí que
   inset sea -40px en vez de 0: así el desplazamiento nunca deja ver un
   borde vacío. */
@keyframes nebulaDrift{
  0%, 100%{ transform: translate(0, 0); }
  50%{ transform: translate(18px, -14px); }
}
.logo-btn{
  display:block; width: min(90vw, 460px); margin: 0 auto 4px;
  padding:0; border:none; background:none; cursor:pointer; position:relative;
}
.logo{
  display:block; width:100%; height:auto;
}
/* Chispitas mágicas muy sutiles sobre el logo — aparecen y desaparecen
   en bucle, cada una con su propio retraso/duración (fijados inline en
   el HTML) para que no se note el patrón. */
.logo-particles{ position:absolute; inset:0; pointer-events:none; }
.logo-particles .particle{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background: var(--gold); box-shadow: 0 0 6px 1px var(--gold);
  opacity:0; animation-name: particleTwinkle; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
.logo-particles .particle:nth-child(2),
.logo-particles .particle:nth-child(4){ background: var(--lilac); box-shadow: 0 0 6px 1px var(--lilac); }
.logo-particles .particle:nth-child(6){ background: var(--cream); box-shadow: 0 0 5px 1px var(--cream); }
@keyframes particleTwinkle{
  0%, 100%{ opacity:0; transform: translateY(0) scale(0.7); }
  50%{ opacity:0.85; transform: translateY(-6px) scale(1); }
}
.tagline{ color: var(--muted); font-size: 15.5px; margin: -6px 0 22px; text-align:center; font-weight: 400; }
.arena-screen{ width:100%; max-width: 520px; }
.arena{
  position:relative; width:100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 2px solid rgba(255,210,63,0.22);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3), 0 20px 50px rgba(0,0,0,0.4), inset 0 0 30px rgba(255,61,129,0.05);
  padding: 20px 18px;
}
.fighters{
  display:flex; justify-content:space-between; align-items:flex-end;
  position:relative; height: 160px; margin-bottom: 8px;
}
.fighter{ display:flex; flex-direction:column; align-items:center; width: 45%; }
.name{ font-family:'Tomorrow', sans-serif; font-weight:700; font-size: 17px; margin-top: 6px; }
.bar-track{ width:100%; height: 15px; background: rgba(0,0,0,0.35); border-radius: 999px; margin-top: 6px; overflow:hidden; border: 1.5px solid rgba(255,255,255,0.18); box-shadow: inset 0 2px 5px rgba(0,0,0,0.55); }
.bar-fill{ height:100%; border-radius: 999px; transition: width 0.5s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 10px rgba(255,255,255,0.25); }
#youBar{ background: linear-gradient(90deg, var(--lime), #7CD838); }
#rivalBar{ background: linear-gradient(90deg, var(--pink), #C22860); }
.aura-label{ font-size: 12.5px; color: var(--muted); margin-top:3px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 300; }

/* Igual que las barras de aura: la tuya alineada a la izquierda, la
   del rival a la derecha — la del rival además atenuada y algo
   desenfocada para que no compita visualmente con la tuya. */
.energy-row{ display:flex; align-items:center; gap:8px; margin: 14px 0 4px; }
.energy-group{ display:flex; align-items:center; gap:6px; flex:1; }
.energy-group.rival{ justify-content:flex-end; opacity:0.55; filter: blur(0.4px); }
.energy-label{ font-size: 12.5px; color: var(--muted); margin-right: 4px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 300; }
/* El mismo emoji 🔋 que ya se usa en el badge de coste de cada
   movimiento — así queda claro de un vistazo que es la misma energía,
   en vez de un indicador con forma propia sin relación aparente. */
.energy-dot{
  font-size: 17px; line-height:1; opacity: 0.3; filter: grayscale(1);
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.energy-dot.filled{ opacity: 1; filter: none; }

/* Tres líneas separadas, cada una con su propio papel, para que se
   entienda de un vistazo: 1) qué movimiento ejecuta cada uno (junto a
   su energía, mismo color que su barra de aura), 2) cuánto se ha
   llevado cada uno esa ronda, como un marcador — un badge/pastilla
   bien visible, no texto suelto — y 3) la frase de sabor ("el público
   está a tu favor"...), en un tono más discreto porque es solo un
   detalle. */
/* Fila del ataque: ancho fijo en cada lado (no al contenido) para que
   ninguno se mueva si el otro está todavía vacío a mitad de ronda, cada
   uno recortado con "…" dentro de su propio hueco si el nombre es muy
   largo, así los dos NUNCA se pisan por mucho que midan. Sin hueco
   entre los dos (gap:0, igual que .result-row) para que el borde
   interior de cada bloque de ataque quede justo encima del borde
   interior de su marcador. El texto va alineado hacia dentro (el tuyo
   a la derecha de su caja, el del rival a la izquierda de la suya) —
   las dos cajas de cada jugador (ataque y marcador) comparten el mismo
   lado, así el texto de las dos queda alineado entre sí verticalmente,
   no solo las cajas. */
.attack-row{ display:flex; justify-content:center; gap:0; margin: 8px 0 0; }
.attack-text{ width: 170px; font-size: 14.5px; font-weight: 400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-height: 18px; }
.attack-text b{ font-weight: 600; }
/* Padding hacia el centro (no margin/gap en la fila) para que el
   propio borde de la caja —con el que se alinea el marcador de
   debajo— no se mueva; solo se aparta el texto de dentro, así los dos
   lados dejan de tocarse sin perder la alineación. */
.attack-text.you{ text-align:right; padding-right: 10px; color: var(--lime); }
.attack-text.rival{ text-align:left; padding-left: 10px; color: var(--pink); }
/* El icono de aura quedaba pegado al % que tiene al lado — un poco de
   aire a los dos lados para que se lea como un dato aparte. */
.attack-text .icon-aura{ margin: 0 3px; }

/* El marcador ya no es una pastilla con fondo — solo el número, en su
   color, que entra con un fundido desde arriba, se queda un momento
   quieto y se desvanece hacia abajo (ver .show / @keyframes más abajo,
   disparado desde JS con showResultBadge()). El hueco sigue siendo de
   ancho y alto fijos para que nada salte de sitio, esté visible el
   número o ya se haya desvanecido. */
.result-row{ display:flex; justify-content:center; gap:0; margin-top: 4px; }
.round-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width: 128px; height: 30px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family:'Tomorrow', sans-serif; font-weight:600; font-size: 17px;
  opacity: 0;
}
/* justify-content en vez de centrar el texto — igual que el ataque de
   arriba, tuyo pegado a la derecha de su caja, del rival a la
   izquierda de la suya, para que el número quede alineado con el
   ataque de la línea de encima y no descentrado hacia el otro lado. */
.round-badge.you{ justify-content: flex-end; padding-right: 10px; color: var(--lime); }
.round-badge.rival{ justify-content: flex-start; padding-left: 10px; color: var(--pink); }
.round-badge.show{ animation: scoreFade 2.6s ease forwards; }
@keyframes scoreFade{
  0%{ opacity:0; transform: translateY(-10px); }
  12%{ opacity:1; transform: translateY(0); }
  75%{ opacity:1; transform: translateY(0); }
  100%{ opacity:0; transform: translateY(10px); }
}

/* La frase de sabor comparte sitio con los avisos generales (elige
   movimiento, se acaba el tiempo...) — de ahí el lila fino por
   defecto, pero <b> (fin de duelo) sigue destacando en dorado. */
.log{ text-align:center; min-height: 30px; display:flex; align-items:center; justify-content:center; font-size: 14.5px; font-weight: 300; padding: 4px 10px; color: var(--lilac); }
/* :not(.draft-player-name) para no pisar el color propio con el que ya
   se distingue de quién es el turno en el draft/"Turno de X" local. */
.log b:not(.draft-player-name){ color: var(--gold); font-weight: 700; font-size: 15px; }
/* El aviso de "elige tu movimiento" es la instrucción más importante
   para quien empieza a jugar — más grande, menos apagada y parpadeando
   para que llame la atención, a diferencia de las frases de sabor de
   después (esas no llevan .log-prompt, así que no parpadean). */
.log.log-prompt{ font-size: 17px; font-weight: 500; color: var(--cream); animation: logPromptBlink 1.3s ease-in-out infinite; }
@keyframes logPromptBlink{
  0%, 100%{ opacity: 1; }
  50%{ opacity: 0.4; }
}

.turn-timer-row{ display:flex; justify-content:flex-end; margin-top: 10px; }
.turn-timer{
  font-family:'Tomorrow', sans-serif; font-weight:600; font-size: 13px;
  color: var(--gold); background: rgba(255,210,63,0.1); border: 1.5px solid rgba(255,210,63,0.35);
  border-radius: 999px; padding: 4px 12px;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.turn-timer.urgent{
  color: var(--pink); background: rgba(255,61,129,0.14); border-color: rgba(255,61,129,0.5);
  animation: turnTimerPulse 0.6s ease-in-out infinite;
}
@keyframes turnTimerPulse{ 0%, 100%{ transform: scale(1); } 50%{ transform: scale(1.08); } }
.moves{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.move-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 2px solid rgba(255,255,255,0.14);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  padding: 13px 12px; color: var(--cream);
  font-family: 'Tomorrow', sans-serif; text-align:left; cursor:pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  position:relative;
}
.move-btn:hover:not(:disabled){ border-color: var(--gold); transform: translateY(-2px); background: rgba(255,210,63,0.1); box-shadow: 0 0 16px rgba(255,210,63,0.25); }
.move-btn:disabled{ opacity: 0.3; cursor: default; }
.pass-turn-btn{
  grid-column: 1 / -1;
  background: rgba(255,210,63,0.08); border: 2px dashed rgba(255,210,63,0.4);
  border-radius: 12px; padding: 14px; margin-top: 2px;
  color: var(--gold); font-family:'Tomorrow', sans-serif; font-weight:600; font-size: 14px;
  text-align:center; cursor:pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pass-turn-btn:hover{ background: rgba(255,210,63,0.16); border-color: var(--gold); }
.move-top{ display:flex; justify-content:space-between; align-items:center; }
.move-emoji{ font-size: 25px; }
.move-badges{ display:flex; gap: 5px; }
.move-power{ font-size: 12.5px; color: var(--lilac); font-weight:700; background: rgba(185,142,255,0.14); border: 1px solid rgba(185,142,255,0.35); padding: 2px 8px; border-radius: 4px; white-space:nowrap; display:inline-flex; align-items:center; gap:3px; }
.move-energy{ font-size: 12.5px; color: var(--blue); font-weight:700; background: rgba(143,184,255,0.14); border: 1px solid rgba(143,184,255,0.35); padding: 2px 8px; border-radius: 4px; white-space:nowrap; }
.move-name{ font-family:'Tomorrow', sans-serif; font-weight:700; font-size: 16px; margin-top: 5px; }
.move-cat{ font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; font-weight: 300; }
.cat-pose .move-cat{ color: var(--gold); }
.cat-dance .move-cat{ color: var(--lime); }
.cat-meme .move-cat{ color: var(--pink); }
.cat-wild .move-cat{ color: var(--blue); }

/* Animaciones "sprite" en los emojis de movimiento de la Colección: cada
   una imita a su manera lo que representa el emoji (la mano saluda, la
   bailarina se contonea, el remolino gira...) en vez de un rebote genérico
   igual para todas. Las tarjetas bloqueadas usan un tintineo neutro del
   candado en su lugar. */
#collectionGrid .move-emoji{ display:inline-block; }

@keyframes emojiLockJiggle{ 0%, 85%, 100%{ transform: rotate(0deg); } 90%{ transform: rotate(-8deg); } 95%{ transform: rotate(8deg); } }
#collectionGrid .draft-card.locked .move-emoji{ animation: emojiLockJiggle 3.4s ease-in-out infinite; }

@keyframes emojiStare{ 0%, 100%{ transform: rotate(0deg); } 50%{ transform: rotate(-6deg); } }
.move-sigma_stare:not(.locked) .move-emoji{ animation: emojiStare 2.8s ease-in-out infinite; }

@keyframes emojiPoint{ 0%, 100%{ transform: translateX(0) rotate(0deg); } 50%{ transform: translateX(4px) rotate(-10deg); } }
.move-rizz_point:not(.locked) .move-emoji{ animation: emojiPoint 1.6s ease-in-out infinite; transform-origin: 30% 70%; }

@keyframes emojiFly{ 0%, 100%{ transform: translateY(0) rotate(0deg); } 50%{ transform: translateY(-5px) rotate(7deg); } }
.move-siuuu_leap:not(.locked) .move-emoji{ animation: emojiFly 1.7s ease-in-out infinite; }

@keyframes emojiRegalBob{ 0%, 100%{ transform: translateY(0) rotate(0deg); } 50%{ transform: translateY(-3px) rotate(-4deg); } }
.move-emperors_pose:not(.locked) .move-emoji{ animation: emojiRegalBob 3.2s ease-in-out infinite; }

@keyframes emojiWiggle{ 0%, 100%{ transform: translateX(0) rotate(0deg); } 25%{ transform: translateX(-3px) rotate(-9deg); } 75%{ transform: translateX(3px) rotate(9deg); } }
/* ohio_wiggle, aura_shuffle y six_seven ahora usan el mini-sprite propio
   (ver sprites.js) en vez de esta animación de transformar el emoji entero. */

@keyframes emojiStep{ 0%, 100%{ transform: translateX(0) translateY(0); } 25%{ transform: translateX(-4px) translateY(-2px); } 75%{ transform: translateX(4px) translateY(-2px); } }
.move-griddy_step:not(.locked) .move-emoji{ animation: emojiStep 1.4s ease-in-out infinite; }

@keyframes emojiSpin{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } }

@keyframes emojiFlicker{ 0%, 100%{ transform: scale(1) rotate(0deg); } 50%{ transform: scale(1.12) rotate(-5deg); } }
.move-fanum_flow:not(.locked) .move-emoji{ animation: emojiFlicker 1.1s ease-in-out infinite; }

@keyframes emojiAlert{ 0%, 100%{ transform: rotate(0deg); opacity:1; } 50%{ transform: rotate(10deg); opacity:0.7; } }
.move-gyatt_alert:not(.locked) .move-emoji{ animation: emojiAlert 0.9s ease-in-out infinite; }

@keyframes emojiGlitch{ 0%, 90%, 100%{ transform: translate(0,0); } 92%{ transform: translate(-2px,1px); } 94%{ transform: translate(2px,-1px); } 96%{ transform: translate(0,0); } }
.move-npc_freeze:not(.locked) .move-emoji{ animation: emojiGlitch 4s linear infinite; }

@keyframes emojiWave{ 0%, 100%{ transform: rotate(0deg); } 25%{ transform: rotate(-16deg); } 75%{ transform: rotate(16deg); } }

@keyframes emojiToiletBob{ 0%, 100%{ transform: translateY(0) rotate(0deg); } 50%{ transform: translateY(-4px) rotate(5deg); } }
.move-skibidi_combo:not(.locked) .move-emoji{ animation: emojiToiletBob 1.4s ease-in-out infinite; }

@keyframes emojiFlash{ 0%, 45%, 100%{ transform: scale(1); opacity:1; } 50%{ transform: scale(1.2); opacity:0.65; } 55%{ transform: scale(1); opacity:1; } }
.move-chopped_flash:not(.locked) .move-emoji{ animation: emojiFlash 1.8s ease-in-out infinite; }

@keyframes emojiSparkle{ 0%, 100%{ transform: scale(1) rotate(0deg); } 50%{ transform: scale(1.15) rotate(10deg); } }
.move-aura_surge:not(.locked) .move-emoji{ animation: emojiSparkle 1.7s ease-in-out infinite; }

/* Mini-sprites SVG (ver sprites.js): dos fotogramas dibujados a mano que se
   alternan con un corte seco (steps, sin easing) en vez de una transformación
   continua — imita a un GIF de pocos fotogramas real. */
.move-emoji.sprite-icon{ display:inline-flex; align-items:center; justify-content:center; }
.sprite-svg{ width: 1em; height: 1em; display:block; overflow: visible; }
@keyframes spriteFrameA{ 0%, 49.9%{ opacity:1; } 50%, 100%{ opacity:0; } }
@keyframes spriteFrameB{ 0%, 49.9%{ opacity:0; } 50%, 100%{ opacity:1; } }
.sprite-frame-a{ animation: spriteFrameA 0.9s steps(1, end) infinite; }
.sprite-frame-b{ animation: spriteFrameB 0.9s steps(1, end) infinite; }

.footer-row{ display:flex; justify-content:center; gap: 10px; margin-top: 14px; }
.restart-btn, .home-btn{
  display:none; background: linear-gradient(90deg, var(--gold), var(--pink)); border: 2px solid rgba(255,255,255,0.25);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  padding: 12px 28px; font-family:'Tomorrow', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  font-size: 25px; line-height: 1; color: #1A1220; cursor:pointer;
  box-shadow: 0 0 20px rgba(255,210,63,0.3);
}
.home-btn{ background: rgba(255,255,255,0.08); color: var(--cream); border: 2px solid rgba(255,255,255,0.22); box-shadow:none; }
.rules{ max-width: 520px; width:100%; margin-top: auto; padding-top: 20px; font-size: 12.5px; color: var(--muted); line-height: 1.6; text-align:center; font-weight: 300; }
.rules b{ color: var(--cream); }

/* Draft / colección / pre-battle selection */
.draft-screen, .collection-screen, .home-screen, .mode-select-screen, .guest-setup-screen{ width:100%; max-width: 520px; }
.draft-header{ text-align:left; margin-bottom: 28px; }
.draft-header h2{
  font-family:'Tomorrow', sans-serif; font-weight:800; font-size: 25px; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.5px;
}
/* Nombre del jugador cuyo turno es (draft de 2 jugadores y "Turno de..."
   en combate) — un color propio para distinguir de un vistazo a quién le
   toca, sin tener que leer el texto entero cada vez. */
.draft-player-name{ color: var(--pink); }
.draft-header p{ font-size: 14.5px; color: var(--muted); margin-top: 4px; font-weight: 400; }
.draft-counter{ font-family:'Tomorrow', sans-serif; color: var(--gold); font-weight:700; }
.draft-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.draft-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 2px solid rgba(255,255,255,0.14);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  padding: 15px 13px; cursor:pointer; text-align:left;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.draft-card:hover{ transform: translateY(-2px); box-shadow: 0 0 16px rgba(255,255,255,0.08); }
.draft-card.selected{ border-color: var(--gold); background: rgba(255,210,63,0.1); box-shadow: 0 0 18px rgba(255,210,63,0.3); }
.draft-card .move-top{ display:flex; justify-content:space-between; align-items:center; }
.draft-card .move-emoji{ font-size: 25px; }
.draft-card .move-name{ font-family:'Tomorrow', sans-serif; font-weight:700; font-size: 16px; margin-top: 5px; }
.draft-card .move-cat{ font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; font-weight: 300; }
.draft-start-btn{
  display:block; width:100%; background: linear-gradient(90deg, var(--gold), var(--pink)); border: 2px solid rgba(255,255,255,0.25);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  padding: 14px 28px; font-family:'Tomorrow', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  font-size: 25px; line-height: 1; color: #1A1220; cursor:pointer;
  box-shadow: 0 0 24px rgba(255,210,63,0.35);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.draft-start-btn:hover:not(:disabled){ transform: translateY(-2px); box-shadow: 0 0 32px rgba(255,210,63,0.5); }
.draft-start-btn:disabled{ opacity: 0.35; cursor: default; box-shadow:none; }
.hidden{ display:none !important; }

/* Transición entre pantallas: al avanzar (p.ej. "Farmear aura"), la
   pantalla actual sale un poco hacia la izquierda mientras se apaga, y
   la siguiente entra desde la derecha; al volver es al revés. Solo estas
   dos clases hacen falta porque el estado "recién salido hacia la
   izquierda" y el estado "a punto de entrar desde la izquierda" son el
   mismo aspecto (transparente, desplazado) — showScreen() en main.js
   las añade/quita en el momento justo. */
.customize-screen, .home-screen, .mode-select-screen, .guest-setup-screen,
.collection-screen, .draft-screen, .arena-screen{
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.slide-left{ opacity:0; transform: translateX(-24px); }
.slide-right{ opacity:0; transform: translateX(24px); }

/* Rareza */
.rarity-tag{ font-weight:700; }
.draft-card.rarity-common{ border-color: rgba(255,255,255,0.12); }
.draft-card.rarity-rare{ border-color: rgba(143,184,255,0.5); }
.draft-card.rarity-rare .rarity-tag{ color: var(--blue); }
.draft-card.rarity-legendary{ border-color: rgba(255,210,63,0.6); box-shadow: 0 0 14px rgba(255,210,63,0.15); }
.draft-card.rarity-legendary .rarity-tag{ color: var(--gold); }
.draft-card.locked{ opacity: 0.45; filter: grayscale(0.6); }


/* Barra superior persistente: el botón "Volver" a la izquierda y el
   panel de perfil a la derecha, siempre en la misma fila y posición en
   cualquier pantalla — se oculta (visibility, no display, para no mover
   el perfil) el botón cuando la pantalla actual no tiene a dónde volver. */
.top-bar{
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
  width:100%; max-width: 520px; margin: 0 0 16px;
}
.top-bar .back-btn{ margin-bottom: 0; flex-shrink: 0; }
.top-bar .back-btn.hidden-slot{ visibility: hidden; pointer-events: none; }
.top-bar-left{ display:flex; align-items:center; gap: 10px; min-width:0; }
/* Nombre de la sección actual junto al botón "Volver" — a propósito
   discreto (tamaño pequeño, color apagado) para no competir con el
   propio título grande de cada pantalla; solo sirve de referencia de
   "dónde estoy", como un mapa del sitio en miniatura. */
.top-bar-title{
  font-family:'Tomorrow', sans-serif; font-weight:600; font-size: 13px;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Panel de perfil: pequeño, sin marco de tarjeta — como un típico
   account chip — reemplaza al antiguo título "Tu arena". Ya no necesita
   ancho propio: lo hereda de .top-bar. */
.profile-bar{
  display:flex; align-items:center; justify-content:flex-end; gap: 8px;
}
.profile-avatar{
  width: 28px; height: 34px; flex-shrink: 0; overflow: hidden;
  border-radius: 6px;
}
.profile-avatar svg{ width: 100%; height: 100%; overflow: visible; }
/* Todo el bloque avatar+nombre es un único botón que abre el pop-up de
   perfil — el lápiz ya no es un botón aparte, solo la pista visual de
   que se puede tocar (igual de decorativo que un cursor:pointer). */
.profile-identity-btn{
  display:flex; align-items:center; gap: 8px;
  background:none; border:none; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer;
  border-radius: 8px; transition: background 0.15s ease;
}
.profile-identity-btn:hover{ background: rgba(255,255,255,0.06); }
.profile-name-row{ display:flex; align-items:center; gap: 4px; }
.profile-name{
  font-family:'Tomorrow', sans-serif; font-weight:700; font-size: 14px; color: var(--cream);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 120px;
}
.profile-edit-hint{ font-size: 11px; opacity: 0.6; }
.profile-identity-btn:hover .profile-edit-hint{ opacity: 1; }
/* Dos estadísticas independientes en la barra de perfil: Aura (lila,
   prestigio — sube y baja con cada duelo, nunca se gasta) y Drip
   (dorado, la moneda — el color dorado la lee como "esto es dinero"
   sin necesidad de escribir la palabra "moneda"). */
.profile-stats{ display:flex; align-items:center; gap: 6px; margin-left: 8px; }
.profile-stat{
  display:flex; flex-direction:column; align-items:center; line-height:1.15;
  border-radius: 14px; padding: 6px 13px;
}
.profile-stat-label{ font-size: 10px; opacity: 0.85; text-transform:uppercase; letter-spacing: 0.6px; font-weight: 300; }
.profile-stat-value{ font-family:'Tomorrow', sans-serif; font-weight:800; font-size: 17px; }
.profile-stat.aura{
  background: rgba(185,142,255,0.14); border: 1.5px solid rgba(185,142,255,0.45);
  box-shadow: 0 0 16px rgba(185,142,255,0.3);
}
.profile-stat.aura .profile-stat-label, .profile-stat.aura .profile-stat-value{ color: var(--lilac); }
.profile-stat.drip{
  background: rgba(255,210,63,0.14); border: 1.5px solid rgba(255,210,63,0.45);
  box-shadow: 0 0 16px rgba(255,210,63,0.3);
}
.profile-stat.drip .profile-stat-label, .profile-stat.drip .profile-stat-value{ color: var(--gold); }
/* Icono de Aura/Drip embebido en texto suelto (reglas, recompensas,
   tienda) — fuera de .profile-stat necesita su color a mano. */
.icon-aura{ color: var(--lilac); }
.icon-drip{ color: var(--gold); }
.stat-icon{ width: 0.85em; height: 0.85em; vertical-align: -0.12em; display:inline-block; flex-shrink:0; }
/* Menú de inicio inspirado en el selector de modos de TETR.IO: filas a
   todo el ancho casi pegadas, cada una con su propio color de acento y
   un bloque de icono grande cortado en diagonal, en vez de tarjetas
   idénticas con solo un emoji pequeño. */
.home-actions{ display:flex; flex-direction:column; gap: 5px; }
.home-action-btn{
  display:flex; align-items:stretch; gap: 0; padding: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 2px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  color: var(--cream); cursor:pointer; text-align:left;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.home-action-btn:hover{ transform: translateY(-2px); }
.home-action-btn.locked{ opacity: 0.45; cursor: default; filter: grayscale(0.5); }
.home-action-btn.locked:hover{ transform: none; }
.home-action-emoji{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width: 78px; font-size: 30px; margin-right: -16px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  transition: background 0.15s ease;
}
.home-action-btn > span:last-child{ padding: 24px 18px 24px 30px; }
.home-action-title{ font-family:'Tomorrow', sans-serif; font-weight:700; font-size: 25px; line-height: 1; text-transform: uppercase; letter-spacing: 0.4px; }
.home-action-sub{ font-size: 13.5px; color: var(--muted); margin-top: 2px; font-weight: 400; }

/* Configuración del invitado (multijugador local) */
.guest-setup-row{ margin: 18px 0 22px; }
.guest-name-input{
  width:100%; font-family:'Tomorrow', sans-serif; font-weight:700; font-size: 18px; color: var(--cream);
  background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: 10px; padding: 12px 16px;
}
.guest-name-input:focus{ outline:none; border-color: var(--lime); box-shadow: 0 0 12px rgba(180,255,57,0.25); }
.guest-name-input::placeholder{ color: var(--muted); }

#homePlayBtn .home-action-emoji{ background: linear-gradient(135deg, rgba(255,61,129,0.5), rgba(194,40,96,0.5)); }
#homeCollectionBtn .home-action-emoji{ background: linear-gradient(135deg, rgba(255,210,63,0.5), rgba(255,176,32,0.5)); }
#homeCustomizeBtn .home-action-emoji{ background: linear-gradient(135deg, rgba(143,184,255,0.5), rgba(92,143,224,0.5)); }
#homePlayBtn:hover{
  border-color: rgba(255,61,129,0.4);
  background: linear-gradient(180deg, rgba(255,61,129,0.14), rgba(255,61,129,0.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -14px 18px rgba(255,61,129,0.12), 0 4px 14px rgba(255,61,129,0.16);
}
#homeCollectionBtn:hover{
  border-color: rgba(255,210,63,0.4);
  background: linear-gradient(180deg, rgba(255,210,63,0.14), rgba(255,210,63,0.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -14px 18px rgba(255,210,63,0.12), 0 4px 14px rgba(255,210,63,0.16);
}
#homeCustomizeBtn:hover{
  border-color: rgba(143,184,255,0.4);
  background: linear-gradient(180deg, rgba(143,184,255,0.14), rgba(143,184,255,0.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -14px 18px rgba(143,184,255,0.12), 0 4px 14px rgba(143,184,255,0.16);
}
#homePlayBtn:hover .home-action-emoji{ background: linear-gradient(135deg, rgba(255,61,129,0.85), rgba(194,40,96,0.85)); }
#homeCollectionBtn:hover .home-action-emoji{ background: linear-gradient(135deg, rgba(255,210,63,0.85), rgba(255,176,32,0.85)); }
#homeCustomizeBtn:hover .home-action-emoji{ background: linear-gradient(135deg, rgba(143,184,255,0.85), rgba(92,143,224,0.85)); }

/* Selector de modo de juego (IA / local / online) */
#modeAiBtn .home-action-emoji{ background: linear-gradient(135deg, rgba(255,61,129,0.5), rgba(194,40,96,0.5)); }
#modeLocalBtn .home-action-emoji{ background: linear-gradient(135deg, rgba(180,255,57,0.5), rgba(124,216,56,0.5)); }
#modeOnlineBtn .home-action-emoji{ background: linear-gradient(135deg, rgba(156,139,181,0.5), rgba(100,86,120,0.5)); }
#modeAiBtn:hover{
  border-color: rgba(255,61,129,0.4);
  background: linear-gradient(180deg, rgba(255,61,129,0.14), rgba(255,61,129,0.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -14px 18px rgba(255,61,129,0.12), 0 4px 14px rgba(255,61,129,0.16);
}
#modeLocalBtn:hover{
  border-color: rgba(180,255,57,0.4);
  background: linear-gradient(180deg, rgba(180,255,57,0.14), rgba(180,255,57,0.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -14px 18px rgba(180,255,57,0.12), 0 4px 14px rgba(180,255,57,0.16);
}
#modeAiBtn:hover .home-action-emoji{ background: linear-gradient(135deg, rgba(255,61,129,0.85), rgba(194,40,96,0.85)); }
#modeLocalBtn:hover .home-action-emoji{ background: linear-gradient(135deg, rgba(180,255,57,0.85), rgba(124,216,56,0.85)); }

/* Colección */
.collection-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 22px; flex-wrap:wrap; gap: 10px; }
.pack-btn{
  background: linear-gradient(90deg, var(--gold), var(--pink)); border: 2px solid rgba(255,255,255,0.25);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  padding: 12px 20px; font-family:'Tomorrow', sans-serif; font-weight:700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.4px;
  color: #1A1220; cursor:pointer;
  box-shadow: 0 0 18px rgba(255,210,63,0.3);
}
.pack-btn:disabled{ opacity: 0.35; cursor: default; box-shadow:none; }
.back-btn{
  background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.18);
  color: var(--cream); border-radius: 999px; padding: 8px 16px; font-size: 13px; cursor:pointer;
  margin-bottom: 14px;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.back-btn:hover{
  border-color: rgba(255,210,63,0.5);
  background: linear-gradient(180deg, rgba(255,210,63,0.16), rgba(255,210,63,0.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 10px rgba(255,210,63,0.18);
}

/* Reveal overlay (abrir sobre) */
.reveal-overlay{
  display:none; position: fixed; inset:0; background: rgba(10,6,16,0.9);
  align-items:center; justify-content:center; z-index: 25; padding: 20px;
}
.reveal-card{
  background: linear-gradient(180deg, var(--bg2), var(--bg));
  border: 2px solid rgba(255,255,255,0.18);
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  padding: 32px 26px; width: 100%; max-width: 360px; text-align:center;
  animation: revealPop 0.4s cubic-bezier(.2,.9,.3,1.3);
}
.reveal-card.rarity-rare{ border-color: var(--blue); box-shadow: 0 0 30px rgba(143,184,255,0.35); }
.reveal-card.rarity-legendary{ border-color: var(--gold); box-shadow: 0 0 40px rgba(255,210,63,0.5); }
@keyframes revealPop{ 0%{ transform: scale(0.7); opacity:0; } 100%{ transform: scale(1); opacity:1; } }
.reveal-emoji{ font-size: 56px; margin-bottom: 8px; }
/* .move-emoji trae su propio font-size (25px, para las tarjetas
   pequeñas) que si no pisaría el 56px de aquí y encogería el icono
   animado del pop-up de info de movimiento. */
.reveal-emoji .move-emoji{ font-size: 56px; }
.reveal-name{ font-family:'Tomorrow', sans-serif; font-weight:800; font-size: 20px; }
/* La frase de "pásale el dispositivo" es una oración entera, no un
   nombre corto como el resto de usos de .reveal-name — con el mismo
   peso extra-grueso se hacía pesada de leer. */
#passDeviceTitle{ font-weight: 500; font-size: 19px; }
.reveal-rarity{ font-size: 12px; letter-spacing: 1px; color: var(--muted); margin-top: 4px; font-weight: 300; }
.reveal-status{ font-size: 13px; color: var(--cream); margin: 14px 0 20px; }

/* Pop-up de bienvenida (nombre / invitado / cuenta) — por encima de
   cualquier otra cosa (incluido el widget de sonido), ya que es lo
   primero que se ve al entrar por primera vez. */
.identity-overlay{ z-index: 50; }
.identity-card{ max-width: 400px; text-align:left; }
.identity-header{ text-align:center; margin-bottom: 6px; }
.identity-header p{ margin-top: 6px; }
.identity-card .draft-start-btn{ font-size: 19px; padding: 12px 24px; margin-top: 4px; }
.identity-link{
  display:block; width:100%; background:none; border:none; color: var(--muted);
  font-size: 13px; margin-top: 14px; padding: 4px; cursor:pointer;
  text-decoration: underline; text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.identity-link:hover{ color: var(--cream); }
.identity-error{ color: var(--pink); font-size: 12.5px; margin: -10px 0 14px; text-align:left; }

.identity-options{ display:flex; flex-direction:column; gap: 10px; margin: 6px 0 18px; }
.identity-option-btn{
  display:flex; align-items:center; gap: 14px; width:100%; padding: 13px 16px; text-align:left;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 2px solid rgba(255,255,255,0.14);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  color: var(--cream); cursor:pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.identity-option-btn:hover:not(.locked){ transform: translateY(-1px); border-color: rgba(255,255,255,0.35); }
.identity-option-btn.locked{ opacity: 0.45; cursor: default; filter: grayscale(0.4); }
.identity-option-icon{ font-size: 21px; flex-shrink:0; width: 26px; text-align:center; }
.identity-option-title{ font-family:'Tomorrow', sans-serif; font-weight:700; font-size: 15px; }
.identity-option-sub{ font-size: 11.5px; color: var(--muted); margin-top: 1px; font-weight: 400; }

/* Pop-up de perfil (avatar en grande, renombrar, cerrar sesión) */
.profile-card{ position:relative; max-width: 360px; padding-top: 40px; text-align:center; }
.profile-modal-name-input{ text-align:center; margin: 4px 0 16px; }
.profile-modal-stats{ justify-content:center; margin-bottom: 18px; }
.profile-logout-link{ color: var(--pink); }
.profile-logout-link:hover{ color: var(--cream); }
/* El aviso de "¿cerrar sesión?" es una confirmación, no la llamada a la
   acción principal de una pantalla — se queda con el mismo tratamiento
   que el resto de títulos/botones pero bastante menos cargado (nada de
   mayúsculas ni el peso extra-grueso de .draft-header/.draft-start-btn). */
.profile-card .identity-header h2{
  font-weight: 600; font-size: 19px; text-transform: none; letter-spacing: normal;
}
.profile-logout-danger{
  background: linear-gradient(90deg, var(--pink), #C22860); color: var(--cream);
  box-shadow: 0 0 24px rgba(255,61,129,0.35);
  font-weight: 500; font-size: 16px; text-transform: none; letter-spacing: normal;
  padding: 12px 24px;
}
.profile-logout-danger:hover{ box-shadow: 0 0 32px rgba(255,61,129,0.5); }

/* Ficha de info/lore de un movimiento (Colección) */
.move-info-card{ position:relative; max-width: 400px; padding-top: 40px; }
.move-info-close{
  position:absolute; top: 12px; right: 12px; width: 30px; height: 30px;
  border-radius: 50%; background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.2);
  color: var(--cream); font-size: 13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.move-info-close:hover{ background: rgba(255,61,129,0.2); border-color: var(--pink); }
.move-info-badges{ display:flex; justify-content:center; gap: 8px; margin-top: 10px; }
.move-info-lore{
  text-align:left; font-size: 14px; line-height: 1.55; color: var(--cream);
  margin: 18px 0 4px; font-weight: 400;
}
.move-info-locked-hint{
  font-size: 12.5px; color: var(--gold); margin-top: 16px; text-align:center; font-weight: 400;
}

/* Avatar rig */
.avatar-stage{ display:flex; justify-content:center; margin: 8px 0 20px; }
.avatar-wrap{ width: 148px; height: 185px; }
.avatar-mirrored{ transform: scaleX(-1); }
.avatar-wrap svg{ width:100%; height:100%; overflow: visible; }
.fighter .avatar-wrap{ width: 115px; height: 144px; }
.avatar-root{ animation: idleBob 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.part-armL, .part-armR, .part-legL, .part-legR, .part-torso, .part-head{
  transform-box: fill-box;
}
.part-armL{ transform-origin: 50% 5%; }
.part-armR{ transform-origin: 50% 5%; }
.part-legL{ transform-origin: 50% 0%; }
.part-legR{ transform-origin: 50% 0%; }
.part-torso{ transform-origin: 50% 100%; }
.part-head{ transform-origin: 50% 100%; }

@keyframes idleBob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-2px);} }

@keyframes poseArmL{ 0%{transform:rotate(0);} 35%{transform:rotate(-70deg);} 100%{transform:rotate(0);} }
@keyframes poseArmR{ 0%{transform:rotate(0);} 35%{transform:rotate(70deg);} 100%{transform:rotate(0);} }
@keyframes poseLegs{ 0%{transform:translateY(0);} 30%{transform:translateY(-10px);} 55%{transform:translateY(2px);} 100%{transform:translateY(0);} }
@keyframes poseHop{ 0%{transform:translateY(0);} 30%{transform:translateY(-14px);} 60%{transform:translateY(0);} 100%{transform:translateY(0);} }
.move-pose .part-armL{ animation: poseArmL 0.9s ease 2; }
.move-pose .part-armR{ animation: poseArmR 0.9s ease 2; }
.move-pose .part-legL{ animation: poseLegs 0.9s ease 2; }
.move-pose .part-legR{ animation: poseLegs 0.9s ease 2; }
.move-pose .avatar-root{ animation: poseHop 0.9s ease 2; }

@keyframes danceHip{ 0%,100%{transform:rotate(0);} 25%{transform:rotate(8deg);} 75%{transform:rotate(-8deg);} }
@keyframes danceArmL{ 0%,100%{transform:rotate(0);} 25%{transform:rotate(25deg);} 75%{transform:rotate(-15deg);} }
@keyframes danceArmR{ 0%,100%{transform:rotate(0);} 25%{transform:rotate(-25deg);} 75%{transform:rotate(15deg);} }
.move-dance .part-torso{ animation: danceHip 0.7s ease-in-out 3; }
.move-dance .part-armL{ animation: danceArmL 0.7s ease-in-out 3; }
.move-dance .part-armR{ animation: danceArmR 0.7s ease-in-out 3; }

@keyframes memeArmUp{ 0%,100%{transform:rotate(0) translateY(0);} 50%{transform:rotate(-100deg) translateY(-6px);} }
@keyframes memeArmDown{ 0%,100%{transform:rotate(0) translateY(0);} 50%{transform:rotate(20deg) translateY(4px);} }
@keyframes memeHead{ 0%,100%{transform:translateY(0) rotate(0);} 50%{transform:translateY(3px) rotate(6deg);} }
.move-meme .part-armL{ animation: memeArmUp 0.4s ease-in-out 4 alternate; }
.move-meme .part-armR{ animation: memeArmDown 0.4s ease-in-out 4 alternate; }
.move-meme .part-head{ animation: memeHead 0.8s ease-in-out 2; }

@keyframes wildSpin{ 0%{transform:rotate(0);} 100%{transform:rotate(360deg);} }
@keyframes wildGlow{ 0%,100%{ filter: drop-shadow(0 0 0 rgba(255,210,63,0)); } 50%{ filter: drop-shadow(0 0 18px rgba(255,210,63,0.9)); } }
.move-wild .avatar-root{ animation: wildSpin 1.4s ease, wildGlow 1.4s ease-in-out 2; }

@keyframes hitShake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-8px) rotate(-4deg);} 75%{transform:translateX(8px) rotate(4deg);} }
.fighter.is-hit{ animation: hitShake 0.4s ease; }

/* Customization */
.customize-screen{ width:100%; max-width: 420px; }
.customize-screen .avatar-stage{ margin-top: 36px; }
.customize-row{ display:flex; align-items:center; gap: 12px; margin-bottom: 14px; }
.customize-label{ width: 50px; font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 300; }
.swatch-group{ display:flex; gap: 9px; }
.swatch{
  width: 36px; height: 36px; border-radius: 7px; border: 2px solid rgba(255,255,255,0.18);
  cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.swatch.selected{ border-color: var(--cream); transform: scale(1.12) rotate(3deg); box-shadow: 0 0 10px rgba(255,255,255,0.4); }
.customize-row-accessories{ align-items:flex-start; flex-wrap:wrap; }
.customize-row-accessories .swatch-group{ flex-wrap:wrap; }
.customize-hint{ font-size: 12.5px; color: var(--muted); margin: -4px 0 14px; font-weight: 300; }
.accessory-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1.5px solid rgba(255,255,255,0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  color: var(--cream); padding: 8px 18px; font-size: 14px; cursor:pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.accessory-btn:hover:not(.locked){ transform: translateY(-1px); border-color: rgba(255,255,255,0.4); }
.accessory-btn.on{
  border-color: rgba(255,210,63,0.55);
  background: linear-gradient(180deg, rgba(255,210,63,0.2), rgba(255,210,63,0.05));
  color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -10px 14px rgba(255,210,63,0.12), 0 3px 10px rgba(255,210,63,0.2);
}
.accessory-btn.locked{ opacity: 0.4; cursor: default; }

.preset-row{ display:flex; gap: 9px; flex-wrap:wrap; align-items:flex-start; align-content:flex-start; justify-content:center; margin: 4px 0 18px; }
.preset-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02));
  border: 1.5px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  color: var(--cream); padding: 10px 20px; font-size: 14.5px; text-transform: uppercase; letter-spacing: 0.3px;
  font-weight: 700; cursor:pointer; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.preset-btn:hover{
  border-color: rgba(255,210,63,0.5); transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255,210,63,0.16), rgba(255,210,63,0.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -12px 16px rgba(255,210,63,0.12), 0 4px 12px rgba(255,210,63,0.2);
}

/* Tienda de cosméticos (Colección) */
.shop-layout{ display:flex; flex-direction:column; align-items:center; gap: 6px; }
.shop-avatar-stage{ margin: 24px 0 10px; }
.shop-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 2px solid rgba(255,255,255,0.14);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  padding: 15px 13px; text-align:left; cursor:pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.shop-card:hover{ transform: translateY(-2px); border-color: rgba(255,210,63,0.4); box-shadow: 0 0 14px rgba(255,210,63,0.15); }
.shop-card.previewing{ border-color: var(--gold); background: rgba(255,210,63,0.08); box-shadow: 0 0 18px rgba(255,210,63,0.3); }
.shop-card .move-top{ display:flex; justify-content:space-between; align-items:center; }
.shop-card .move-emoji{ font-size: 27px; }
.shop-card .move-name{ font-family:'Tomorrow', sans-serif; font-weight:700; font-size: 16px; margin-top: 7px; }
.shop-preview-tag{ display:block; margin-top: 5px; font-size: 12px; color: var(--muted); font-weight: 300; }
.shop-card.previewing .shop-preview-tag{ color: var(--gold); font-weight:600; }
.shop-buy-btn{
  width:100%; margin-top: 9px; background: linear-gradient(90deg, var(--gold), var(--pink)); border: 1.5px solid rgba(255,255,255,0.2);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  padding: 9px 12px; font-family:'Tomorrow', sans-serif; font-weight:700; text-transform: uppercase; letter-spacing: 0.3px;
  font-size: 14px; color: #1A1220; cursor:pointer;
}
.shop-buy-btn:disabled{ opacity: 0.35; cursor: default; background: rgba(255,255,255,0.1); color: var(--muted); }
.shop-owned-tag{ display:block; margin-top: 9px; text-align:center; font-size: 13px; color: var(--lime); font-weight:600; text-transform: uppercase; letter-spacing: 0.3px; }

/* Timing minigame */
.timing-overlay{
  display:none; position: fixed; inset:0; background: rgba(10,6,16,0.85);
  align-items:center; justify-content:center; z-index: 20; padding: 20px;
}
.timing-card{
  position:relative;
  background: linear-gradient(180deg, var(--bg2), var(--bg));
  border: 2px solid rgba(255,210,63,0.3);
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  box-shadow: 0 0 40px rgba(255,61,129,0.15);
  padding: 26px 22px; width: 100%; max-width: 420px; text-align:center;
}
/* Borde que se va "consumiendo" alrededor de la tarjeta mientras tienes
   tiempo para ejecutar el golpe — recorre exactamente el mismo contorno
   cortado en diagonal que el clip-path de la tarjeta (ver setupExecRing
   en battle.js, que calcula los puntos y el perímetro real). */
.exec-timer-ring{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index: 2; overflow: visible;
}
#execTimerPolygon{
  fill:none; stroke: var(--gold); stroke-width: 3;
  filter: drop-shadow(0 0 4px rgba(255,210,63,0.7));
}
#execTimerPolygon.urgent{ stroke: var(--pink); filter: drop-shadow(0 0 4px rgba(255,61,129,0.7)); }
.timing-title{ font-family:'Tomorrow', sans-serif; font-weight:700; font-size: 25px; line-height: 1; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.timing-sub{ font-size: 14px; color: var(--muted); margin-bottom: 20px; font-weight: 400; }
.timing-track{
  position:relative; height: 54px; background: rgba(255,255,255,0.06);
  border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); margin-bottom: 22px; overflow:hidden;
}
.timing-zone{
  position:absolute; top: 4px; bottom: 4px; border-radius: 9px;
  background: linear-gradient(180deg, rgba(255,210,63,0.55), rgba(255,176,32,0.5));
  border: 2px solid var(--gold);
  box-shadow: 0 0 16px rgba(255,210,63,0.55), inset 0 0 10px rgba(255,255,255,0.2);
}
.timing-zone-core{
  position:absolute; top: 4px; bottom: 4px; border-radius: 6px;
  background: rgba(255,255,255,0.75);
  box-shadow: 0 0 10px rgba(255,255,255,0.7);
}
.timing-marker{
  position:absolute; top: -4px; bottom:-4px; width: 5px; background: var(--pink);
  border-radius: 4px; box-shadow: 0 0 12px rgba(255,61,129,0.9); z-index: 2;
}
.timing-btn{
  background: linear-gradient(90deg, var(--pink), var(--gold)); border: 2px solid rgba(255,255,255,0.25);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  padding: 14px 40px; font-family:'Tomorrow', sans-serif; font-weight:800; font-size: 25px; line-height: 1; text-transform: uppercase; letter-spacing: 0.5px;
  color: #1A1220; cursor:pointer; width:100%;
  box-shadow: 0 0 26px rgba(255,61,129,0.4);
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.timing-btn:hover{ box-shadow: 0 0 34px rgba(255,61,129,0.55); }
.timing-btn:active{ transform: scale(0.98); }
.timing-result{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 10px 0 2px; animation: revealPop 0.3s cubic-bezier(.2,.9,.3,1.3);
}
.timing-result-score{
  font-family:'Tomorrow', sans-serif; font-weight:800; font-size: 40px;
  background: linear-gradient(90deg, var(--gold), var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.timing-result-label{ font-size: 14px; color: var(--cream); font-weight:600; margin-top: 2px; }

/* Resumen de fin de combate */
.end-summary{ text-align:center; font-size: 13.5px; color: var(--gold); margin-top: 4px; display:none; }

/* Escritorio: usar el ancho disponible en vez de quedarnos en una
   columna estrecha de móvil, y más columnas en las rejillas de tarjetas
   para acortar el scroll (sobre todo en la Colección). */
@media (min-width: 860px){
  .arena-screen, .draft-screen, .collection-screen, .home-screen, .rules, .top-bar, .mode-select-screen, .guest-setup-screen{ max-width: 820px; }
  .customize-screen{
    max-width: 760px;
    display:grid; grid-template-columns: 240px 1fr; column-gap: 32px;
  }
  .customize-screen .draft-header{ grid-column: 1 / -1; grid-row: 1; }
  .customize-screen .avatar-stage{ grid-column: 1; grid-row: 2 / span 10; position: sticky; top: 20px; margin: 0; align-self: center; }
  .customize-screen .preset-row{ grid-column: 2; grid-row: 2; margin-top: 0; align-self: start; justify-content: flex-start; }
  .customize-screen .customize-row,
  .customize-screen .customize-row-accessories,
  .customize-screen .customize-hint{ grid-column: 2; }
  .customize-screen .draft-start-btn{ grid-column: 1 / -1; }

  .draft-grid{ grid-template-columns: repeat(3, 1fr); }
  .shop-layout{ flex-direction:row; align-items:flex-start; gap: 24px; }
  .shop-avatar-stage{ flex-shrink:0; position: sticky; top: 20px; margin: 24px 0 0; }
}
@media (min-width: 1180px){
  .arena-screen, .draft-screen, .collection-screen, .home-screen, .customize-screen, .rules, .top-bar, .mode-select-screen, .guest-setup-screen{ max-width: 980px; }
  .draft-grid{ grid-template-columns: repeat(4, 1fr); }
}