@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Inter:wght@300;400;500;600&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --rojo:      #e94560;
  --rojo-dark: #c73652;
  --azul:      #0f3460;
  --azul-mid:  #16213e;
  --azul-dark: #0a0a1a;
  --dorado:    #f0c040;
  --verde:     #4caf50;
  --gris:      #aaa;
  --blanco:    #f0f0f0;
}

/* ── KEYFRAMES ── */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.6) rotate(-5deg); }
  70%  { transform: scale(1.08) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(233,69,96,0.3); }
  50%       { box-shadow: 0 0 20px rgba(233,69,96,0.7); }
}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-5px); }
  40%     { transform: translateX(5px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}

@keyframes flashGreen {
  0%,100% { background: rgba(15,52,96,0.5); }
  40%     { background: rgba(76,175,80,0.25); }
}

@keyframes flashRed {
  0%,100% { background: rgba(15,52,96,0.5); }
  40%     { background: rgba(233,69,96,0.2); }
}

@keyframes panelSlide {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes entradaPantalla {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes latido {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.18); }
}

/* ── BASE ── */
body {
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  background: var(--azul-dark);
  background-image:
    radial-gradient(ellipse at 20% 20%, rgba(233,69,96,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(15,52,96,0.4) 0%, transparent 50%);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
}

h1 {
  font-family: 'Cinzel', serif;
  font-size: 3.5rem;
  font-weight: 900;
  letter-spacing: 6px;
  text-align: center;
  background: linear-gradient(135deg, #fff 0%, var(--dorado) 50%, var(--rojo) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
  animation: fadeIn 0.8s ease;
}
h1::after {
  content: '';
  display: block;
  width: 60px; height: 3px;
  background: linear-gradient(90deg, var(--rojo), var(--dorado));
  margin: 0.5rem auto 1.5rem;
  border-radius: 2px;
}
h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem; font-weight: 700;
  margin-bottom: 0.5rem; text-align: center;
  color: var(--blanco);
}

/* ── PANTALLAS ── */
.pantalla {
  display: none; flex-direction: column;
  align-items: center; gap: 0.8rem;
  width: 100%; max-width: 480px; padding: 2rem;
  animation: entradaPantalla 0.35s ease;
}
.oculto { display: none !important; }

/* ── INPUTS ── */
input[type="text"] {
  width: 100%; padding: 0.8rem 1.2rem; border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: var(--blanco); font-size: 1rem;
  font-family: 'Inter', sans-serif;
  text-align: center; outline: none;
  transition: border-color 0.2s, background 0.2s;
  backdrop-filter: blur(4px);
}
input[type="text"]::placeholder { color: rgba(255,255,255,0.3); }
input[type="text"]:focus {
  border-color: var(--rojo);
  background: rgba(233,69,96,0.08);
}

/* ── BOTONES ── */
.botones { display: flex; gap: 0.8rem; width: 100%; }

button {
  flex: 1; padding: 0.8rem 1rem; border: none; border-radius: 10px;
  background: linear-gradient(135deg, var(--rojo), var(--rojo-dark));
  color: white; font-size: 0.95rem;
  font-family: 'Inter', sans-serif; font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 15px rgba(233,69,96,0.3);
  letter-spacing: 0.3px;
}
button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(233,69,96,0.45);
}
button:active { transform: translateY(1px); }
button.secundario {
  background: linear-gradient(135deg, var(--azul), #1a4a7a);
  box-shadow: 0 4px 15px rgba(15,52,96,0.4);
}
button.secundario:hover { box-shadow: 0 6px 20px rgba(15,52,96,0.6); }
button:disabled {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.3);
  cursor: not-allowed; transform: none; box-shadow: none;
}

/* ── MENSAJES ── */
.error    { color: var(--rojo); font-size: 0.85rem; text-align: center; }
.info     { color: var(--gris); font-size: 0.9rem; text-align: center; }
.subtitulo { color: var(--gris); font-size: 0.85rem; margin-bottom: 0.3rem; }

/* ── LOBBY ── */
#lista-jugadores {
  list-style: none; width: 100%;
  display: flex; flex-direction: column; gap: 0.5rem;
}
#lista-jugadores li {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 0.7rem 1rem; border-radius: 10px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.95rem; backdrop-filter: blur(4px);
  animation: slideUp 0.3s ease both;
}
.corona { font-size: 0.8rem; color: var(--dorado); }
#codigo-sala {
  font-family: 'Cinzel', serif;
  background: linear-gradient(135deg, var(--rojo), var(--rojo-dark));
  padding: 0.15rem 0.7rem; border-radius: 6px;
  letter-spacing: 4px; font-weight: 700; font-size: 1.1rem;
  box-shadow: 0 2px 10px rgba(233,69,96,0.4);
}

/* ── PANTALLA JUEGO ── */
#pantalla-juego {
  max-width: 640px; width: 100%;
  display: none; flex-direction: column; gap: 0.7rem; padding: 1rem;
}

#cabecera-juego {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 0.6rem 1rem; border-radius: 10px;
  font-size: 0.85rem; color: var(--gris);
  backdrop-filter: blur(4px);
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
}
#info-subronda { font-family: 'Cinzel', serif; font-size: 0.9rem; color: var(--blanco); }
#info-fase { color: var(--rojo); font-weight: 600; font-size: 0.85rem; }

/* ── BANNER ESPECTADOR ── */
#banner-espectador {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--gris); text-align: center;
  padding: 0.5rem 1rem; border-radius: 10px;
  font-size: 0.85rem; width: 100%;
  animation: fadeIn 0.4s ease;
}

/* ── RIVALES ── */
#rivales { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }

.rival {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 0.5rem 0.8rem;
  font-size: 0.82rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  min-width: 90px;
  width: 128px;
  max-width: 100%;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
  animation: slideUp 0.3s ease both;
}
.rival .nombre { font-weight: 600; font-size: 0.88rem; }
.rival .vidas  { color: var(--rojo); font-size: 0.8rem; }
.rival .apuesta-rival { color: var(--dorado); font-size: 0.72rem; }
.rival.turno-activo {
  border-color: var(--rojo);
  background: rgba(233,69,96,0.1);
  animation: pulse 1.6s ease-in-out infinite;
}

/* ── MESA ── */
#mesa {
  background: rgba(15,52,96,0.5);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 1rem;
  min-height: 110px;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  backdrop-filter: blur(4px);
  transition: background 0.4s ease;
}
#mesa.flash-verde { animation: flashGreen 0.8s ease; }
#mesa.flash-rojo  { animation: flashRed  0.8s ease; }

.label-mesa {
  font-size: 0.7rem; color: rgba(255,255,255,0.3);
  text-transform: uppercase; letter-spacing: 3px;
}
#cartas-mesa { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }

/* ── CARTAS ── */

/* Nuevos keyframes para cartas especiales */
@keyframes brilloAs {
  0%,100% { box-shadow: 0 4px 14px rgba(0,0,0,0.3), 0 0 0 0 currentColor; }
  50%     { box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 14px 3px currentColor; }
}
/* Rey: brillo casi igual al as — sombra dorada pulsante */
@keyframes brilloRey {
  0%,100% { opacity: 0.55; }
  50%     { opacity: 1; }
}
/* Caballo: brillo moderado */
@keyframes brilloCaballo {
  0%,100% { opacity: 0.3; }
  50%     { opacity: 0.7; }
}
/* Sota: brillo mínimo */
@keyframes brilloSota {
  0%,100% { opacity: 0.15; }
  50%     { opacity: 0.35; }
}
/* As: aura de color pulsante */
@keyframes brilloAs {
  0%,100% { opacity: 0.4; }
  50%     { opacity: 1; }
}
@keyframes cartaJugadaMesa {
  0%   { opacity: 0; transform: scale(0.7) rotate(-8deg) translateY(-10px); }
  60%  { transform: scale(1.07) rotate(1deg) translateY(0); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.carta {
  width: 68px; height: 102px; border-radius: 10px;
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 1px,
      rgba(0,0,0,0.012) 1px,
      rgba(0,0,0,0.012) 2px
    ),
    linear-gradient(170deg, #fefefe 0%, #f5f2eb 60%, #ede9df 100%);
  border: 1.5px solid rgba(0,0,0,0.12);
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: 4px 4px 14px 4px; cursor: pointer;
  transition: transform 0.18s cubic-bezier(.2,.8,.3,1.2), box-shadow 0.18s ease;
  position: relative; user-select: none;
  box-shadow:
    0 2px 5px rgba(0,0,0,0.18),
    0 6px 18px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

/* Marco interior decorativo */
.carta::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 6px;
  border: 0.5px solid rgba(0,0,0,0.08);
  pointer-events: none;
  z-index: 0;
}

/* Carta al ser repartida — solo opacity, NO transform (evita bloquear hover) */
.carta.carta-nueva {
  animation: fadeIn 0.3s ease both;
}
/* Carta al caer en la mesa — ídem */
.carta.carta-jugada {
  animation: fadeIn 0.35s ease both;
}

/* ── HOVER: transform en TODAS las cartas seleccionables por igual ── */
.carta.seleccionable         { cursor: pointer; }
.carta.seleccionable:hover   { transform: translateY(-14px) scale(1.04); box-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 18px 36px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.9); }
.carta.no-seleccionable      { cursor: default; }
.carta.no-seleccionable:hover { transform: none; }

/* ── PALOS: borde + acento de color ── */
.carta.oros {
  border-color: rgba(176,134,0,0.35);
  box-shadow:
    0 2px 5px rgba(0,0,0,0.18),
    0 6px 18px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 0 0 1.5px rgba(176,134,0,0.12);
}
.carta.copas {
  border-color: rgba(180,0,40,0.3);
  box-shadow:
    0 2px 5px rgba(0,0,0,0.18),
    0 6px 18px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 0 0 1.5px rgba(180,0,40,0.1);
}
.carta.espadas {
  border-color: rgba(30,80,150,0.3);
  box-shadow:
    0 2px 5px rgba(0,0,0,0.18),
    0 6px 18px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 0 0 1.5px rgba(30,80,150,0.1);
}
.carta.bastos {
  border-color: rgba(30,110,40,0.3);
  box-shadow:
    0 2px 5px rgba(0,0,0,0.18),
    0 6px 18px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 0 0 1.5px rgba(30,110,40,0.1);
}

/* ── VALOR en esquinas ── */
.carta-esquina { display: flex; flex-direction: column; align-items: center; line-height: 1; z-index: 1; }
.carta-tl { align-self: flex-start; }
.carta-br { align-self: flex-end; transform: rotate(180deg); }

.carta-val {
  font-family: 'Cinzel', serif;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1;
  display: block;
  color: inherit;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

/* Colores de valor por palo */
.carta.oros   .carta-val { color: #8a6000; }
.carta.copas  .carta-val { color: #a0001e; }
.carta.espadas .carta-val { color: #0f3a7a; }
.carta.bastos .carta-val { color: #1a5c22; }


/* ── CENTRO ── */
.carta-centro {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; z-index: 1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
}

/* ── NOMBRE JUGADOR DEBAJO ── */
.jugador-carta {
  font-size: 0.48rem; color: #999;
  position: absolute; bottom: 3px; left: 0; right: 0;
  text-align: center; font-family: 'Inter', sans-serif;
  letter-spacing: 0.3px;
  z-index: 1;
}

/* ── FIGURAS (Rey=12, Caballo=11, Sota=10): marco dorado y fondo tenue ── */
.carta.figura {
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 1px,
      rgba(0,0,0,0.012) 1px,
      rgba(0,0,0,0.012) 2px
    ),
    linear-gradient(170deg, #fffef5 0%, #fdf7e3 60%, #f7eed0 100%);
}
.carta.figura::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 7px;
  border: 1px solid rgba(176,134,0,0.25);
  box-shadow: 0 0 8px 1px rgba(176,134,0,0.25);
  pointer-events: none;
  z-index: 0;
}
/* Hover figura: solo sube más alto que una carta normal */
.carta.figura.seleccionable:hover {
  transform: translateY(-16px) scale(1.06);
}

/* Animaciones en ::after — el elemento raíz queda libre para el hover transform */
.carta.figura.rey::after     { animation: brilloRey     2.6s ease-in-out infinite; }
.carta.figura.caballo::after { animation: brilloCaballo 3.2s ease-in-out infinite; }
.carta.figura.sota::after    { animation: brilloSota    4s   ease-in-out infinite; }

/* ── ASES: fondo levemente degradado por palo + brillo pulsante ── */
.carta.as { /* sin animation aquí — va en ::after */ }

/* As de Oros: fondo dorado muy sutil */
.carta.as.oros {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 1px, rgba(0,0,0,0.01) 1px, rgba(0,0,0,0.01) 2px),
    linear-gradient(170deg, #fffef5 0%, #fff8e0 55%, #fdf0c0 100%);
  color: rgba(176,134,0,0.6);
}
.carta.as.oros::after {
  content: '';
  position: absolute; inset: 3px;
  border-radius: 7px;
  border: 1px solid rgba(200,160,0,0.3);
  box-shadow: 0 0 10px 2px rgba(176,134,0,0.4);
  pointer-events: none; z-index: 0;
  animation: brilloAs 2.4s ease-in-out infinite;
}

/* As de Copas: fondo carmesí muy sutil */
.carta.as.copas {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 1px, rgba(0,0,0,0.01) 1px, rgba(0,0,0,0.01) 2px),
    linear-gradient(170deg, #fff8f8 0%, #fff0f0 55%, #fde0e0 100%);
  color: rgba(160,0,30,0.6);
}
.carta.as.copas::after {
  content: '';
  position: absolute; inset: 3px;
  border-radius: 7px;
  border: 1px solid rgba(180,0,40,0.22);
  box-shadow: 0 0 10px 2px rgba(180,0,40,0.35);
  pointer-events: none; z-index: 0;
  animation: brilloAs 2.4s ease-in-out infinite;
}

/* As de Espadas: fondo azul muy sutil */
.carta.as.espadas {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 1px, rgba(0,0,0,0.01) 1px, rgba(0,0,0,0.01) 2px),
    linear-gradient(170deg, #f6f8ff 0%, #ecf0fc 55%, #dde6fa 100%);
  color: rgba(15,58,122,0.6);
}
.carta.as.espadas::after {
  content: '';
  position: absolute; inset: 3px;
  border-radius: 7px;
  border: 1px solid rgba(30,80,160,0.22);
  box-shadow: 0 0 10px 2px rgba(30,80,160,0.35);
  pointer-events: none; z-index: 0;
  animation: brilloAs 2.4s ease-in-out infinite;
}

/* As de Bastos: fondo verde muy sutil */
.carta.as.bastos {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 1px, rgba(0,0,0,0.01) 1px, rgba(0,0,0,0.01) 2px),
    linear-gradient(170deg, #f5fbf5 0%, #eaf5ea 55%, #d8eed8 100%);
  color: rgba(26,92,34,0.6);
}
.carta.as.bastos::after {
  content: '';
  position: absolute; inset: 3px;
  border-radius: 7px;
  border: 1px solid rgba(30,110,40,0.22);
  box-shadow: 0 0 10px 2px rgba(30,110,40,0.35);
  pointer-events: none; z-index: 0;
  animation: brilloAs 2.4s ease-in-out infinite;
}

/* Hover ases: solo sube, la animación mantiene el aura de color */
.carta.as.seleccionable:hover { transform: translateY(-16px) scale(1.06); }

/* ── CARTA ANULADA (tras cancelación) ── */
.carta.anulada {
  opacity: 0.35;
  filter: grayscale(0.7);
  transform: scale(0.93);
  transition: opacity 0.4s, filter 0.4s, transform 0.3s;
}

/* Reverso */
.carta-reverso {
  width: 68px; height: 102px; border-radius: 10px;
  border: none; padding: 0; overflow: hidden;
  background: none;
  box-shadow: 0 3px 10px rgba(0,0,0,0.4);
  cursor: default;
}

/* Carta mini rivales ronda final */
.carta-mini {
  width: 36px; height: 54px; border-radius: 6px;
  background: white; border: 1.5px solid #ddd;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px; margin-top: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  animation: popIn 0.3s ease both;
}
.carta-mini-val { font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700; line-height: 1; }
.carta-mini-ico { width: 18px; height: 18px; }

/* ── MI ZONA ── */
#mi-zona {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 0.9rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  backdrop-filter: blur(4px);
}
#mi-info {
  display: flex; gap: 1rem; align-items: center;
  font-size: 0.9rem; flex-wrap: wrap; justify-content: center;
}
#mi-nickname { font-weight: 700; font-size: 1rem; }
#mis-vidas { color: var(--rojo); font-weight: 600; transition: color 0.3s; }
#mis-vidas.shake { animation: shake 0.4s ease; }
#mis-vidas.latido { animation: latido 0.3s ease; }
#mi-apuesta-info { color: var(--verde); font-size: 0.85rem; font-weight: 600; }
#mi-mano { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }

/* ── PANELES ── */
#panel-apuestas, #panel-ases {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 0.9rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  width: 100%; backdrop-filter: blur(4px);
  animation: panelSlide 0.25s ease both;
}
#panel-apuestas p, #panel-ases p {
  font-size: 0.88rem; color: var(--gris); text-align: center;
}
#botones-apuesta, #botones-as {
  display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
}
#botones-apuesta button, #botones-as button {
  flex: none; min-width: 48px; padding: 0.5rem 0.7rem;
  font-size: 1rem; border-radius: 8px;
  box-shadow: 0 2px 8px rgba(233,69,96,0.2);
}

/* ── MENSAJE JUEGO ── */
#msg-juego {
  text-align: center; font-size: 0.9rem;
  min-height: 1.2rem; color: var(--gris);
  font-style: italic;
  transition: color 0.3s;
  animation: fadeIn 0.3s ease;
}

/* ── RESUMEN ── */
#pantalla-resumen { max-width: 540px; }
#tabla-resumen, #tabla-fin {
  width: 100%; border-collapse: collapse; margin: 1rem 0;
  background: rgba(255,255,255,0.03);
  border-radius: 10px; overflow: hidden;
}
#tabla-resumen th, #tabla-fin th {
  padding: 0.6rem 1rem; text-align: center;
  background: rgba(255,255,255,0.06);
  color: var(--gris); font-weight: 500;
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 1px;
}
#tabla-resumen td, #tabla-fin td {
  padding: 0.6rem 1rem; text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 0.92rem;
}
#tabla-resumen tr { animation: slideUp 0.3s ease both; }
#tabla-resumen tr:nth-child(2) { animation-delay: 0.05s; }
#tabla-resumen tr:nth-child(3) { animation-delay: 0.1s; }
#tabla-resumen tr:nth-child(4) { animation-delay: 0.15s; }
#tabla-resumen tr:nth-child(5) { animation-delay: 0.2s; }
#tabla-resumen tr:nth-child(6) { animation-delay: 0.25s; }
#tabla-resumen tr:last-child td, #tabla-fin tr:last-child td { border-bottom: none; }
#tabla-resumen td.negativo { color: var(--rojo); font-weight: 600; }

/* ── FIN DE PARTIDA ── */
#pantalla-fin { max-width: 480px; }
#fin-ganador {
  font-family: 'Cinzel', serif; font-size: 1.8rem; text-align: center;
  background: linear-gradient(135deg, var(--dorado), var(--rojo));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 1rem;
  animation: slideUp 0.5s ease both;
}

/* ── CARTA MINI (rivales ronda final) — sin cambios ── */

/* ── MODALIDADES ── */
.btn-modo {
  flex: 1; font-size: 0.85rem; padding: 0.6rem 0.5rem;
}
.btn-modo.activo {
  background: linear-gradient(135deg, var(--rojo), var(--rojo-dark));
  box-shadow: 0 4px 15px rgba(233,69,96,0.4);
}

/* Carta boca abajo en mesa (twisted) */
.carta-oculta-mesa {
  width: 64px; height: 96px; border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.4);
  animation: popIn 0.35s cubic-bezier(0.175,0.885,0.32,1.275) both;
}

/* Mano chaos: cartas barajadas con indicador */
.mano-chaos .carta {
  filter: brightness(0.92);
}
.mano-chaos .carta::after {
  content: '?';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.4rem;
  color: rgba(0,0,0,0.12);
  font-family: 'Cinzel', serif;
  pointer-events: none;
}

/* Panel de espionaje (chaos ronda final) */
#panel-espiar {
  background: rgba(240,192,64,0.08);
  border: 1px solid rgba(240,192,64,0.25);
  border-radius: 12px; padding: 0.9rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  width: 100%;
  animation: panelSlide 0.25s ease both;
}
#panel-espiar p { font-size: 0.88rem; color: var(--dorado); text-align: center; }

/* ── MODAL INSTRUCCIONES ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  animation: fadeIn 0.2s ease;
}

.modal-caja {
  background: #0f1b30;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 1.5rem;
  width: 90%; max-width: 520px;
  max-height: 85vh; overflow-y: auto;
  position: relative;
  animation: slideUp 0.25s ease;
}

.modal-cerrar {
  position: absolute; top: 1rem; right: 1rem;
  background: rgba(255,255,255,0.08);
  border-radius: 50%; width: 32px; height: 32px;
  font-size: 0.85rem; padding: 0; flex: none;
  box-shadow: none;
}
.modal-cerrar:hover { background: rgba(233,69,96,0.3); }

.modal-caja h2 { margin-bottom: 1rem; }

/* Tabs */
.modal-tabs {
  display: flex; gap: 0.4rem; margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 0.6rem;
}
.tab-btn {
  flex: 1; padding: 0.5rem; font-size: 0.85rem;
  background: rgba(255,255,255,0.05);
  box-shadow: none; border-radius: 8px;
}
.tab-btn.activo {
  background: linear-gradient(135deg, var(--rojo), var(--rojo-dark));
  box-shadow: 0 2px 8px rgba(233,69,96,0.3);
}

.tab-contenido { display: none; flex-direction: column; gap: 0.8rem; }
.tab-contenido.activo { display: flex; }

/* Bloques */
.instruccion-bloque {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px; padding: 0.8rem 1rem;
}
.instruccion-bloque h3 { font-size: 0.95rem; margin-bottom: 0.4rem; }
.instruccion-bloque p  { font-size: 0.85rem; color: #ccc; line-height: 1.5; }

.as-oros   { border-color: rgba(240,192,64,0.3); }
.as-copas  { border-color: rgba(233,69,96,0.3); }
.as-espadas{ border-color: rgba(74,144,217,0.3); }
.as-bastos { border-color: rgba(76,175,80,0.3); }
.modo-twisted { border-color: rgba(74,144,217,0.3); }
.modo-chaos   { border-color: rgba(240,192,64,0.3); }

/* Tabla modos */
.tabla-modos {
  width: 100%; border-collapse: collapse; margin-top: 0.5rem; font-size: 0.8rem;
}
.tabla-modos th {
  padding: 0.4rem; text-align: center;
  color: var(--gris); font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.tabla-modos td {
  padding: 0.4rem; text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.tabla-modos td:first-child { text-align: left; color: #ccc; }

/* ── REACCIONES ── */
#panel-reacciones {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 180px;
  justify-content: flex-end;
  z-index: 100;
}

.btn-reaccion {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.15);
  background: rgba(15,52,96,0.75);
  backdrop-filter: blur(6px);
  color: #f0c040;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 6px;
  transition: transform 0.15s, background 0.15s;
}
.btn-reaccion:hover {
  transform: scale(1.2);
  background: rgba(240,192,64,0.25);
}
.btn-reaccion:active { transform: scale(0.95); }
.btn-reaccion svg { width: 22px; height: 22px; }

/* Reacción flotante que sube y desaparece */
@keyframes reaccionSube {
  0%   { opacity: 0;   transform: translateY(0)   scale(0.6); }
  15%  { opacity: 1;   transform: translateY(-20px) scale(1.1); }
  80%  { opacity: 1;   transform: translateY(-90px) scale(1); }
  100% { opacity: 0;   transform: translateY(-120px) scale(0.8); }
}

.reaccion-flotante {
  position: fixed;
  bottom: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
  z-index: 200;
  animation: reaccionSube 2.2s ease-out forwards;
  color: #f0c040;
}
.reaccion-flotante svg { width: 40px; height: 40px; }
.reaccion-nombre {
  font-size: 0.65rem;
  font-family: 'Inter', sans-serif;
  color: #fff;
  background: rgba(0,0,0,0.5);
  padding: 1px 5px;
  border-radius: 8px;
  white-space: nowrap;
}

/* ── CHAT ── */
#chat-container {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#chat-toggle {
  background: rgba(15,52,96,0.85);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  color: #fff;
  padding: 6px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  position: relative;
  transition: background 0.15s;
}
#chat-toggle:hover { background: rgba(240,192,64,0.2); }

#chat-badge {
  background: #e94560;
  color: #fff;
  border-radius: 50%;
  font-size: 0.65rem;
  padding: 1px 5px;
  margin-left: 4px;
  font-weight: 600;
}

#chat-panel {
  width: 260px;
  background: rgba(10,10,26,0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: 6px;
  order: -1;
  animation: slideUp 0.2s ease both;
}

#chat-mensajes {
  flex: 1;
  max-height: 200px;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#chat-mensajes::-webkit-scrollbar { width: 3px; }
#chat-mensajes::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }

.chat-msg {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-start;
}
.chat-msg-mio { align-items: flex-end; }

.chat-nick {
  font-size: 0.62rem;
  color: #f0c040;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.chat-msg-mio .chat-nick { color: #4caf50; }

.chat-texto {
  background: rgba(255,255,255,0.08);
  color: #eee;
  font-size: 0.8rem;
  font-family: 'Inter', sans-serif;
  padding: 4px 8px;
  border-radius: 10px;
  border-top-left-radius: 2px;
  max-width: 100%;
  word-break: break-word;
  line-height: 1.4;
}
.chat-msg-mio .chat-texto {
  background: rgba(76,175,80,0.2);
  border-top-left-radius: 10px;
  border-top-right-radius: 2px;
}

#chat-input-row {
  display: flex;
  border-top: 1px solid rgba(255,255,255,0.08);
}
#chat-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #eee;
  font-size: 0.82rem;
  padding: 8px 10px;
  font-family: 'Inter', sans-serif;
}
#chat-input::placeholder { color: rgba(255,255,255,0.3); }
#chat-enviar {
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255,255,255,0.08);
  color: #f0c040;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.15s;
}
#chat-enviar:hover { background: rgba(240,192,64,0.15); }

/* ── MOBILE PORTRAIT: reacciones arriba derecha, chat arriba izquierda ── */
@media (max-width: 500px) and (orientation: portrait) {
  #panel-reacciones {
    bottom: auto;
    top: 4.5rem;
    right: 0.4rem;
    max-width: 44px;
    flex-direction: column;
    gap: 4px;
  }
  .btn-reaccion {
    width: 34px;
    height: 34px;
  }
  .btn-reaccion svg {
    width: 18px;
    height: 18px;
  }
  #chat-container {
    bottom: auto;
    top: 4.5rem;
    left: 0.4rem;
  }
  #chat-panel {
    width: 220px;
  }
}

/* ── DONACIÓN DE VIDAS ── */
#zona-donacion {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.8rem 0;
}

.bocadillo-pedir,
.bocadillo-peticion,
.bocadillo-donado {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 0.7rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: #ddd;
  font-family: 'Inter', sans-serif;
}

.bocadillo-pedir {
  flex-direction: column;
  align-items: flex-start;
  border-color: rgba(233,69,96,0.3);
  background: rgba(233,69,96,0.08);
}
.bocadillo-pedir p { margin: 0; }

#btn-pedir-vida {
  background: linear-gradient(135deg, #e94560, #c0003a);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem 1rem;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}
#btn-pedir-vida:hover { opacity: 0.85; transform: scale(1.03); }
#btn-pedir-vida:disabled { opacity: 0.5; cursor: default; transform: none; }

.bocadillo-peticion {
  border-color: rgba(240,192,64,0.3);
  background: rgba(240,192,64,0.07);
}

.btn-donar {
  background: linear-gradient(135deg, #e94560, #c0003a);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s, transform 0.15s;
}
.btn-donar:hover { opacity: 0.85; transform: scale(1.03); }
.btn-donar:disabled { opacity: 0.5; cursor: default; transform: none; }

.donar-imposible {
  font-size: 0.75rem;
  color: #888;
  font-style: italic;
}

.bocadillo-donado {
  border-color: rgba(76,175,80,0.3);
  background: rgba(76,175,80,0.08);
  color: #a5d6a7;
  justify-content: center;
  font-weight: 500;
}

/* ── PANTALLA AVATAR ── */
#pantalla-avatar {
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  overflow-y: auto;
  padding: 1.5rem 1rem;
}

.avatar-seccion { width: 100%; }
.avatar-seccion-titulo {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-secondary, #aaa);
  margin-bottom: 0.6rem;
  font-family: 'Inter', sans-serif;
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
  width: 100%;
}

.avatar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  border-radius: 10px;
  border: 2px solid transparent;
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.avatar-item:hover {
  background: rgba(255,255,255,0.08);
  transform: scale(1.05);
}
.avatar-item.seleccionado {
  border-color: #f0c040;
  background: rgba(240,192,64,0.12);
}
.avatar-item svg {
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
}
.avatar-item span {
  font-size: 0.6rem;
  color: #aaa;
  font-family: 'Inter', sans-serif;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60px;
}
.avatar-item.seleccionado span { color: #f0c040; }

/* Avatar mini en el lobby */
.avatar-mini {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
}
.avatar-mini svg {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
}

#btn-confirmar-avatar {
  margin-top: 0.5rem;
}
#btn-confirmar-avatar:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ── AVATAR EN PARTIDA ── */
.rival-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.rival-avatar svg {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
}

.mi-avatar-inline {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  vertical-align: middle;
}
.mi-avatar-inline svg {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

/* Fix lobby: cada li centrado con flex */
#lista-jugadores li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#lista-jugadores .corona {
  font-size: 0.75rem;
  opacity: 0.8;
}

/* ════════════════════════════════════════════════════════════════════════════
   MODO HARDCORE
   ════════════════════════════════════════════════════════════════════════════ */

/* ── TABLA DE LOGROS (modal Hardcore) ── */
.tabla-logros {
  font-size: 0.72rem;
}
.tabla-logros th:first-child,
.tabla-logros td:first-child {
  text-align: left;
  white-space: nowrap;
}
.tabla-logros td:nth-child(2) {
  text-align: left;
  color: #ccc;
  line-height: 1.4;
}
.tabla-logros td:last-child {
  color: #c084fc;
  font-weight: 600;
  white-space: nowrap;
}
.tabla-logros-nota {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  color: var(--dorado);
  text-align: center;
}

/* ── CARTA JOKER ── */
.carta.joker {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 1px, rgba(0,0,0,0.01) 1px, rgba(0,0,0,0.01) 2px),
    linear-gradient(170deg, #f8f5ff 0%, #ede4fb 55%, #ddd0f7 100%);
  color: rgba(124,58,237,0.7);
}
.carta.joker::after {
  content: '';
  position: absolute; inset: 3px;
  border-radius: 7px;
  border: 1px solid rgba(124,58,237,0.3);
  box-shadow: 0 0 10px 2px rgba(124,58,237,0.45);
  pointer-events: none; z-index: 0;
  animation: brilloAs 2s ease-in-out infinite;
}
.carta.joker .carta-val { font-size: 1.1em; }
.carta.joker.seleccionable:hover { transform: translateY(-16px) scale(1.06) rotate(-2deg); }

/* ── Botón de modo Hardcore en el selector ── */
.btn-modo-hardcore.activo {
  background: linear-gradient(135deg, #6b0f1a, #1a1a2e);
  box-shadow: 0 4px 15px rgba(233,69,96,0.5), 0 0 0 1px rgba(233,69,96,0.4) inset;
}

/* ── Badge de escala invertida (joker) ── */
.badge-joker {
  font-size: 0.72rem;
  color: #c084fc;
  background: rgba(124,58,237,0.15);
  border: 1px solid rgba(124,58,237,0.4);
  border-radius: 6px;
  padding: 0.15rem 0.45rem;
  animation: pulseJoker 1.6s ease-in-out infinite;
}
@keyframes pulseJoker {
  0%,100% { box-shadow: 0 0 4px rgba(124,58,237,0.3); }
  50%     { box-shadow: 0 0 14px rgba(124,58,237,0.7); }
}

/* ── BARRA DE MANÁ ── */
.barra-mana {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  min-width: 0;
  margin: 0.35rem 0;
}
.mana-label {
  font-size: 0.72rem;
  color: #c084fc;
  flex-shrink: 0;
}
.mana-track {
  flex: 1;
  min-width: 0; /* permite encogerse en flex containers estrechos (rivales móvil) */
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(124,58,237,0.25);
}
.mana-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #7c3aed, #c084fc);
  border-radius: 4px;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.mana-fill.mana-pulso {
  animation: manaPulso 0.6s ease;
}
@keyframes manaPulso {
  0%   { box-shadow: 0 0 0 rgba(192,132,252,0.7); }
  50%  { box-shadow: 0 0 12px rgba(192,132,252,0.9); }
  100% { box-shadow: 0 0 0 rgba(192,132,252,0); }
}
.mana-valor {
  font-size: 0.7rem;
  color: #c084fc;
  flex-shrink: 0;
  min-width: 32px;
  text-align: right;
}

/* Barra de maná pequeña en rivales */
.barra-mana-rival {
  margin: 0.15rem 0;
}
.barra-mana-rival .mana-track { height: 5px; }
.barra-mana-rival .mana-label { font-size: 0.62rem; }
.barra-mana-rival .mana-valor { font-size: 0.6rem; min-width: 26px; }

/* ── 7 DE OROS ── */
#panel-7oros {
  background: rgba(240,192,64,0.08);
  border: 1px solid rgba(240,192,64,0.3);
  border-radius: 12px; padding: 0.9rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  width: 100%;
  animation: panelSlide 0.25s ease both;
}
#panel-7oros p { font-size: 0.85rem; color: var(--dorado); text-align: center; }
#botones-7oros {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem;
}
.carta-7oros-elegida {
  animation: brilloAs 1.2s ease-in-out infinite;
  outline: 2px solid var(--dorado);
  border-radius: 10px;
}

/* ════════════════════════════════════════════════════════════════════════════
   NOTIFICACIONES DE LOGRO
   ════════════════════════════════════════════════════════════════════════════ */
#contenedor-logros {
  position: fixed;
  top: 70px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 90;
  pointer-events: none;
  max-width: 280px;
}

.notificacion-logro {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(135deg, rgba(124,58,237,0.92), rgba(15,27,48,0.96));
  border: 1px solid rgba(192,132,252,0.5);
  border-radius: 12px;
  padding: 0.55rem 0.8rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  animation: logroEntrada 0.45s cubic-bezier(0.175,0.885,0.32,1.275) both;
  position: relative;
  overflow: hidden;
}

.notificacion-logro.logro-saliendo {
  animation: logroSalida 0.45s ease forwards;
}

@keyframes logroEntrada {
  0%   { opacity: 0; transform: translateX(60px) scale(0.85); }
  60%  { transform: translateX(-6px) scale(1.04); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes logroSalida {
  to { opacity: 0; transform: translateX(60px) scale(0.9); }
}

.logro-icono {
  font-size: 1.6rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.4));
}

.logro-texto {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}
.logro-jugador {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.logro-nombre {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  font-family: 'Cinzel', serif;
}
.logro-mana {
  font-size: 0.72rem;
  color: #f0c040;
}
.logro-vida-extra {
  font-size: 0.7rem;
  color: #4caf50;
  font-weight: 600;
  white-space: nowrap;
  margin-left: 0.3rem;
  animation: latido 0.8s ease infinite;
}

/* Rareza visual */
.notificacion-logro.logro-comun {
  border-color: rgba(192,132,252,0.4);
}
.notificacion-logro.logro-raro {
  border-color: rgba(240,192,64,0.6);
  box-shadow: 0 6px 22px rgba(240,192,64,0.25);
}
.notificacion-logro.logro-raro .logro-icono {
  animation: latido 1s ease infinite;
}
.notificacion-logro.logro-epico {
  border-color: rgba(233,69,96,0.7);
  box-shadow: 0 8px 28px rgba(233,69,96,0.4), 0 0 0 1px rgba(240,192,64,0.4) inset;
  background: linear-gradient(135deg, rgba(233,69,96,0.95), rgba(124,58,237,0.9), rgba(15,27,48,0.96));
}
.notificacion-logro.logro-epico .logro-icono {
  font-size: 1.9rem;
  animation: brilloAs 1s ease-in-out infinite;
}
.notificacion-logro.logro-epico .logro-nombre {
  font-size: 0.95rem;
}

/* Mobile: notificaciones más estrechas y centradas arriba */
@media (max-width: 480px) {
  #contenedor-logros {
    left: 8px; right: 8px;
    max-width: none;
    align-items: center;
  }
  .notificacion-logro { width: 100%; max-width: 320px; }
}

/* Mobile portrait: ajuste final — notificaciones centradas, con margen para
   no chocar con el panel de reacciones (derecha) ni el chat (izquierda),
   ambos reposicionados arriba en este breakpoint. Va DESPUÉS del bloque de
   480px para tener prioridad sobre left/right: 8px. */
@media (max-width: 500px) and (orientation: portrait) {
  #contenedor-logros {
    top: 4.5rem;
    left: 56px; right: 56px;
    max-width: none;
    align-items: center;
    z-index: 95; /* por debajo del chat (100), por encima del contenido */
  }
  .notificacion-logro { width: 100%; max-width: 280px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   DUELO DEL PRISIONERO
   ════════════════════════════════════════════════════════════════════════════ */

.duelo-overlay {
  z-index: 200;
  background: rgba(5,5,15,0.88);
}

.duelo-escena {
  background: linear-gradient(160deg, #2a1810 0%, #1a1a2e 60%, #0a0a1a 100%);
  border: 2px solid rgba(240,192,64,0.4);
  border-radius: 18px;
  padding: 1.5rem;
  width: 92%; max-width: 560px;
  max-height: 90vh; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  text-align: center;
  animation: slideUp 0.35s ease;
  box-shadow: 0 0 40px rgba(240,192,64,0.15), 0 10px 40px rgba(0,0,0,0.6);
}

.duelo-titulo {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  color: var(--dorado);
  text-shadow: 0 0 12px rgba(240,192,64,0.5);
  letter-spacing: 0.05em;
}
.duelo-subtitulo {
  font-size: 0.8rem;
  color: var(--gris);
  margin-top: -0.5rem;
}

/* Arena: dos jugadores enfrentados estilo western */
.duelo-arena {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
}
.duelo-jugador {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  position: relative;
}
.duelo-jugador-a { animation: duelEntranceLeft 0.6s ease both; }
.duelo-jugador-b { animation: duelEntranceRight 0.6s ease both; }

@keyframes duelEntranceLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes duelEntranceRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

.duelo-avatar {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 0 10px rgba(240,192,64,0.3));
}
.duelo-avatar-svg {
  width: 64px !important; height: 64px !important;
}
.duelo-avatar-svg svg {
  width: 64px !important; height: 64px !important;
}
.duelo-avatar-placeholder {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
}

.duelo-nombre {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
}

.duelo-eleccion-icono {
  font-size: 2rem;
  animation: popIn 0.4s cubic-bezier(0.175,0.885,0.32,1.275) both;
}

.duelo-centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  min-width: 70px;
}
.duelo-timer {
  font-family: 'Cinzel', serif;
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--dorado);
  text-shadow: 0 0 14px rgba(240,192,64,0.5);
  line-height: 1;
}
.duelo-timer-urgente {
  color: var(--rojo);
  text-shadow: 0 0 14px rgba(233,69,96,0.7);
  animation: latido 0.5s ease infinite;
}
.duelo-vs {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  color: var(--gris);
  letter-spacing: 0.1em;
}

/* Tabla de posibles resultados */
.duelo-tabla {
  width: 100%;
  background: rgba(0,0,0,0.25);
  border-radius: 12px;
  padding: 0.8rem;
  border: 1px solid rgba(255,255,255,0.08);
}
.duelo-tabla-titulo {
  font-size: 0.78rem;
  color: var(--dorado);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.duelo-tabla-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "vacia      rival-colabora  rival-traiciona"
    "tu-colab   cc              ct"
    "tu-trai    tc              tt";
  gap: 0.35rem;
}
.duelo-area-vacia           { grid-area: vacia; }
.duelo-area-rival-colabora  { grid-area: rival-colabora; }
.duelo-area-rival-traiciona { grid-area: rival-traiciona; }
.duelo-area-tu-colaboras    { grid-area: tu-colab; }
.duelo-area-tu-traicionas   { grid-area: tu-trai; }
.duelo-area-cc { grid-area: cc; }
.duelo-area-ct { grid-area: ct; }
.duelo-area-tc { grid-area: tc; }
.duelo-area-tt { grid-area: tt; }
.duelo-celda {
  font-size: 0.68rem;
  padding: 0.45rem 0.35rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  line-height: 1.35;
}
.duelo-celda-cabecera {
  font-weight: 600;
  color: var(--gris);
  background: transparent;
  font-size: 0.7rem;
}
.duelo-celda-resultado {
  color: #e2e8f0;
}
.duelo-celda-resultado.duelo-bueno {
  background: rgba(76,175,80,0.12);
  border: 1px solid rgba(76,175,80,0.3);
}
.duelo-celda-resultado.duelo-malo {
  background: rgba(233,69,96,0.12);
  border: 1px solid rgba(233,69,96,0.3);
}

/* Acciones */
.duelo-acciones {
  display: flex;
  gap: 0.8rem;
  width: 100%;
}
.btn-duelo {
  flex: 1;
  padding: 0.8rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-duelo:hover { transform: translateY(-2px); }
.btn-duelo-colaborar {
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  box-shadow: 0 4px 14px rgba(76,175,80,0.35);
}
.btn-duelo-traicionar {
  background: linear-gradient(135deg, var(--rojo), var(--rojo-dark));
  box-shadow: 0 4px 14px rgba(233,69,96,0.35);
}

.duelo-espera {
  font-size: 0.85rem;
  color: var(--dorado);
  animation: pulse 1.5s ease-in-out infinite;
}

.duelo-observador {
  font-size: 0.85rem;
  color: var(--gris);
}

/* Resultado final del duelo */
.duelo-resultado {
  width: 100%;
  background: rgba(240,192,64,0.08);
  border: 1px solid rgba(240,192,64,0.3);
  border-radius: 12px;
  padding: 0.9rem;
  animation: panelSlide 0.3s ease both;
}
.duelo-resultado p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #e2e8f0;
}
.duelo-resultado strong {
  color: var(--dorado);
}

/* Mobile */
@media (max-width: 480px) {
  .duelo-escena { padding: 1rem; gap: 0.7rem; }
  .duelo-titulo { font-size: 1.3rem; }
  .duelo-avatar, .duelo-avatar-svg, .duelo-avatar-svg svg,
  .duelo-avatar-placeholder { width: 48px !important; height: 48px !important; }
  .duelo-timer { font-size: 1.7rem; }
  .duelo-nombre { font-size: 0.8rem; }
  .btn-duelo { font-size: 0.85rem; padding: 0.65rem; }

  /* Reordenar la tabla del duelo en 1 columna: cada bloque "Tú X" actúa
     como separador de sección, y cada resultado lleva su contexto de rival
     inline mediante ::before, evitando una grid 3x3 ilegible en pantallas
     estrechas. */
  .duelo-tabla-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "tu-colab"
      "cc"
      "ct"
      "tu-trai"
      "tc"
      "tt";
    gap: 0.4rem;
  }
  .duelo-area-vacia,
  .duelo-area-rival-colabora,
  .duelo-area-rival-traiciona {
    display: none;
  }
  .duelo-celda-cabecera {
    background: rgba(240,192,64,0.08);
    color: var(--dorado);
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.4rem;
  }
  .duelo-celda-resultado {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    font-size: 0.7rem;
    padding: 0.5rem 0.6rem;
    gap: 0.2rem;
  }
  .duelo-area-cc::before { content: "Si rival 🤝 colabora:"; }
  .duelo-area-ct::before { content: "Si rival 🗡️ traiciona:"; }
  .duelo-area-tc::before { content: "Si rival 🤝 colabora:"; }
  .duelo-area-tt::before { content: "Si rival 🗡️ traiciona:"; }
  .duelo-celda-resultado::before {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--gris);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
}