/* =====================================================================
   PVP ARENA — Lobbies de matchmaking PvP (Obsidian Codex)
   2026-05-26 — reemplaza el flow "atacar a jugador en mapa"
   Prefix: .pvpa-*
   ===================================================================== */

.pvpa-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 14px 28px;
  color: #f5edd6;
}

.pvpa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(212,175,55,0.18);
}
.pvpa-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pvpa-header-icon {
  font-size: 32px;
  color: #ff5a6e;
  filter: drop-shadow(0 2px 8px rgba(232,90,106,0.45));
}
.pvpa-title {
  margin: 0 0 2px;
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #f5edd6;
}
.pvpa-subtitle {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(245,237,214,0.55);
}
.pvpa-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #f5edd6;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}
.pvpa-back-btn:hover { background: rgba(255,255,255,0.08); }

/* Info banner: 3 columnas → icono · texto · chips (Nivel + Match ±) */
.pvpa-info-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
  background:
    radial-gradient(ellipse at left, rgba(126,158,255,0.10) 0%, transparent 60%),
    linear-gradient(180deg, rgba(20,12,38,0.92) 0%, rgba(8,3,18,0.92) 100%);
  border: 1px solid rgba(126,158,255,0.28);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
  font-size: 13px;
  line-height: 1.45;
}
.pvpa-info-banner .pvpa-info-icon {
  color: #7e9eff;
  font-size: 22px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(126,158,255,0.45));
}
.pvpa-info-text-wrap { flex: 1; min-width: 0; }
.pvpa-info-banner b {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #f5edd6;
  margin-bottom: 2px;
}
.pvpa-info-text {
  color: rgba(245,237,214,0.72);
}
.pvpa-info-chips {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}
.pvpa-info-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(212,175,55,0.32);
  border-radius: 99px;
  font-size: 12px;
  color: rgba(245,237,214,0.85);
  white-space: nowrap;
}
.pvpa-info-chip b { color: #f5edd6; font-weight: 800; display: inline; margin: 0; font-family: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; }
.pvpa-info-chip i { font-size: 14px; color: #ffc857; }
.pvpa-chip--gap i { color: #7e9eff; }

/* Status row con pills */
.pvpa-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  align-items: center;
}
.pvpa-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 99px;
  font-size: 12px;
  color: rgba(245,237,214,0.85);
}
.pvpa-pill b { color: #f5edd6; }
.pvpa-pill i { font-size: 14px; color: rgba(212,175,55,0.85); }
.pvpa-pill--lvl i { color: #ffc857; }
.pvpa-pill--gap i { color: #7e9eff; }
.pvpa-pill--warn {
  background: rgba(232,90,106,0.10);
  border-color: rgba(232,90,106,0.30);
  color: #ff8a98;
}
.pvpa-pill--warn i { color: #ff5a6e; }
.pvpa-pill--waiting {
  background: rgba(255,200,87,0.10);
  border-color: rgba(255,200,87,0.35);
  color: #ffd66a;
}
.pvpa-pill--waiting i { color: #ffc857; }

.pvpa-leave-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(180deg, rgba(232,90,106,0.18), rgba(232,90,106,0.08));
  border: 1px solid rgba(232,90,106,0.45);
  border-radius: 99px;
  color: #ff8a98;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.pvpa-leave-btn:hover { background: linear-gradient(180deg, rgba(232,90,106,0.28), rgba(232,90,106,0.14)); transform: translateY(-1px); }
.pvpa-leave-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* =====================================================================
   2026-06-02h · QUICK MATCH CIRCLE — botón circular rojo central, CTA principal
   Reemplaza la pill .pvpa-quick-btn. El usuario hace tap en este círculo
   y dispara matchmaking por POWER (backend /quick-match).
   ===================================================================== */
.pvpa-quick-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 12px 26px;
  /* 2026-06-08: el círculo "se apoya" sobre el banner de Cómo Funciona —
     pull-up con margin-top negativo para que parte del círculo se solape. */
  margin: -40px 0 18px;
  position: relative;
  z-index: 5;
}
.pvpa-quick-circle {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease-out;
}
.pvpa-quick-circle:disabled { cursor: not-allowed; }
.pvpa-quick-circle:not(:disabled):hover { transform: scale(1.04); }
.pvpa-quick-circle:not(:disabled):active { transform: scale(0.97); }

/* Outer glow halo */
.pvpa-qc-glow {
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,55,75,0.42) 0%, rgba(232,55,75,0.18) 35%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
  animation: pvpa-qc-pulse 2.4s ease-in-out infinite;
}
@keyframes pvpa-qc-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.95); }
  50%      { opacity: 1;    transform: scale(1.05); }
}

/* Animated ring */
.pvpa-qc-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,138,140,0.55);
  pointer-events: none;
  box-shadow:
    inset 0 0 24px rgba(232,55,75,0.30),
    0 0 18px rgba(232,55,75,0.45);
}

/* Inner content */
.pvpa-qc-inner {
  position: relative;
  width: calc(100% - 18px);
  height: calc(100% - 18px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.18) 0%, transparent 50%),
    radial-gradient(circle at center, #c41e34 0%, #8a0e1f 70%, #5a0612 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.pvpa-qc-icon {
  font-size: 42px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  color: #ffe9ed;
}
.pvpa-qc-label {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.10em;
  line-height: 1.1;
  text-align: center;
  color: #fff;
}
.pvpa-qc-label span {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0.92;
  margin-top: 2px;
}

/* SEARCHING state — anillo gira, halo más fuerte */
.pvpa-quick-circle.is-searching {
  cursor: progress;
}
.pvpa-quick-circle.is-searching .pvpa-qc-glow {
  animation: pvpa-qc-pulse 1.4s ease-in-out infinite;
  background: radial-gradient(circle, rgba(255,200,87,0.55) 0%, rgba(255,150,90,0.22) 35%, transparent 70%);
}
.pvpa-quick-circle.is-searching .pvpa-qc-ring {
  border-color: rgba(255,200,87,0.85);
  border-top-color: rgba(255,255,255,0.25);
  border-right-color: rgba(255,255,255,0.55);
  animation: pvpa-qc-rotate 1.6s linear infinite;
  box-shadow:
    inset 0 0 28px rgba(255,200,87,0.30),
    0 0 22px rgba(255,200,87,0.55);
}
.pvpa-quick-circle.is-searching .pvpa-qc-inner {
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.18) 0%, transparent 50%),
    radial-gradient(circle at center, #d8a23f 0%, #8a4a0e 70%, #4a2604 100%);
}
.pvpa-quick-circle.is-searching .pvpa-qc-icon {
  animation: pvpa-qc-spin 1.2s linear infinite;
  color: #fff5d8;
}
@keyframes pvpa-qc-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes pvpa-qc-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* BLOCKED state */
.pvpa-quick-circle.is-blocked {
  opacity: 0.45;
  filter: grayscale(0.7);
}
.pvpa-quick-circle.is-blocked .pvpa-qc-glow { animation: none; opacity: 0.3; }
.pvpa-quick-circle.is-blocked .pvpa-qc-ring {
  border-color: rgba(180,180,180,0.45);
  box-shadow: inset 0 0 18px rgba(60,60,60,0.4);
}
.pvpa-quick-circle.is-blocked .pvpa-qc-inner {
  background: radial-gradient(circle at center, #4a4a4a 0%, #2a2a2a 100%);
}

/* Meta pills */
.pvpa-quick-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.pvpa-qm-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(232,55,75,0.10);
  border: 1px solid rgba(232,55,75,0.32);
  border-radius: 99px;
  font-size: 12px;
  color: #ffd0d6;
}
.pvpa-qm-pill b { color: #fff; font-weight: 800; }
.pvpa-qm-pill i { color: #ff5a6e; font-size: 13px; }

/* Hint text */
.pvpa-quick-hint {
  font-size: 12.5px;
  color: rgba(245,237,214,0.62);
  text-align: center;
  max-width: 420px;
  line-height: 1.45;
}
.pvpa-quick-hint.is-warn { color: #ff8a98; }
.pvpa-quick-hint.is-search {
  color: #ffd66a;
  font-weight: 600;
}

/* Cancel button (only visible while searching) */
.pvpa-quick-cancel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,138,140,0.45);
  border-radius: 99px;
  color: #ff8a98;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.pvpa-quick-cancel:hover:not(:disabled) {
  background: rgba(232,55,75,0.18);
  transform: translateY(-1px);
}
.pvpa-quick-cancel:disabled { opacity: 0.5; cursor: not-allowed; }

/* Grid section header (separa el círculo del grid de arenas por nivel) */
.pvpa-grid-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(212,175,55,0.14);
}
.pvpa-grid-title {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d4af37;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pvpa-grid-title i { color: #ffc857; font-size: 14px; }
.pvpa-grid-sub {
  font-size: 11.5px;
  color: rgba(245,237,214,0.5);
  text-align: right;
}

/* Grid 5×1 (5 arenas) — 2026-06-02g reducidas de 10 → 5 */
.pvpa-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
@media (max-width: 1200px) {
  .pvpa-grid { grid-template-columns: repeat(3, 1fr); }
}

.pvpa-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 0;
  color: rgba(245,237,214,0.55);
  font-size: 14px;
}

.pvpa-card {
  position: relative;
  background:
    radial-gradient(ellipse at top, rgba(80,50,140,0.16) 0%, transparent 65%),
    linear-gradient(180deg, #15102a 0%, #0a0418 100%);
  border: 1px solid rgba(212,175,55,0.20);
  border-radius: 14px;
  padding: 16px 12px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.pvpa-card:hover { border-color: rgba(212,175,55,0.40); transform: translateY(-2px); }

.pvpa-card-num {
  position: absolute;
  top: 8px; right: 12px;
  font-family: 'Cinzel', serif;
  font-size: 26px;
  font-weight: 800;
  color: rgba(245,237,214,0.10);
  pointer-events: none;
  user-select: none;
}

.pvpa-card-name {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #d4af37;
  text-transform: uppercase;
}

.pvpa-card-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(245,237,214,0.65);
}
.pvpa-card-state i { font-size: 14px; }

/* Estados */
.pvpa-card.is-waiting {
  border-color: rgba(255,200,87,0.45);
  box-shadow: 0 0 0 1px rgba(255,200,87,0.10), 0 4px 16px rgba(255,200,87,0.08);
}
.pvpa-card.is-waiting .pvpa-card-state { color: #ffd66a; }
.pvpa-card.is-waiting .pvpa-card-state i { color: #ffc857; }

.pvpa-card.is-me {
  border-color: rgba(126,158,255,0.55);
  box-shadow: 0 0 0 1px rgba(126,158,255,0.15), 0 4px 16px rgba(126,158,255,0.10);
}
.pvpa-card.is-me .pvpa-card-state { color: #a8b8ff; }
.pvpa-card.is-me .pvpa-card-state i { color: #7e9eff; }

.pvpa-card.is-gap {
  opacity: 0.55;
  border-color: rgba(160,160,160,0.20);
}
.pvpa-card.is-gap .pvpa-card-state { color: rgba(255,138,140,0.85); }

/* Arena Sin Límites (arena 6) — visual rojo/dorado distintivo */
.pvpa-card.is-unlimited {
  background:
    radial-gradient(ellipse at top, rgba(220,60,80,0.22) 0%, transparent 70%),
    linear-gradient(180deg, #2a0a14 0%, #18040a 100%);
  border-color: rgba(255,90,110,0.55);
  box-shadow: 0 0 0 1px rgba(255,90,110,0.15), 0 4px 18px rgba(255,90,110,0.18);
}
.pvpa-card.is-unlimited:hover {
  border-color: rgba(255,130,150,0.70);
  box-shadow: 0 0 0 1px rgba(255,130,150,0.25), 0 6px 22px rgba(255,90,110,0.28);
}
.pvpa-card.is-unlimited .pvpa-card-name { color: #ff8a8c; }
.pvpa-card.is-unlimited .pvpa-card-num { color: rgba(255,138,140,0.12); }
.pvpa-card-badge {
  position: absolute;
  top: -1px; right: 50%;
  transform: translateX(50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Cinzel', serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 3px 12px 4px;
  border-radius: 0 0 8px 8px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
  z-index: 3;
}
.pvpa-card-badge i { font-size: 11px; }
/* Variante "ACTUAL" — púrpura/violeta, banderín superior */
.pvpa-badge--current {
  background: linear-gradient(180deg, #8e5fe0 0%, #5e3aa8 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(142,95,224,0.45);
}
/* Variante "SIN LÍMITES" — rojo, con lock */
.pvpa-badge--unlim {
  background: linear-gradient(180deg, #c8324a 0%, #8a1d2e 100%);
  color: #fff8e0;
  box-shadow: 0 2px 6px rgba(200,50,74,0.45);
}

/* Pill de rango de nivel: "NIV. X - Y" */
.pvpa-card-level {
  display: inline-block;
  margin: 6px auto 4px;
  padding: 4px 12px;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ffd56a;
  background: rgba(212,175,55,0.10);
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 999px;
  z-index: 2;
  position: relative;
}
.pvpa-card.is-unlimited .pvpa-card-level {
  color: #ff8a8c;
  background: rgba(255,90,110,0.10);
  border-color: rgba(255,90,110,0.40);
}

/* Card con badge ACTUAL: borde y glow púrpura distintivo */
.pvpa-card.is-current {
  border-color: rgba(142,95,224,0.55);
  box-shadow: 0 0 0 1px rgba(142,95,224,0.18), 0 6px 22px rgba(142,95,224,0.20);
}
.pvpa-card.is-current .pvpa-card-name { color: #c2a8ff; }
.pvpa-card-unlim-note {
  font-size: 10.5px;
  color: rgba(255,180,180,0.78);
  letter-spacing: 0.04em;
  margin-top: -2px;
}
.pvpa-card.is-unlimited .pvpa-card-btn.is-join {
  background: linear-gradient(180deg, #c8324a 0%, #8a1d2e 100%);
  border-color: rgba(255,138,140,0.55);
  color: #fff8e0;
}
.pvpa-card.is-unlimited .pvpa-card-btn.is-join:hover:not(:disabled) {
  background: linear-gradient(180deg, #e0445c 0%, #a32238 100%);
  box-shadow: 0 4px 14px rgba(200,50,74,0.45);
}

/* Info del que espera */
.pvpa-card-wait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  background: rgba(0,0,0,0.35);
  border-radius: 8px;
  font-size: 12px;
}
.pvpa-card-wait-name {
  font-weight: 700;
  color: #f5edd6;
  font-size: 13px;
}
.pvpa-card-wait-lvl {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(212,175,55,0.12);
  color: #d4af37;
}
.pvpa-card-wait-lvl.r-human   { background: rgba(196,184,158,0.15); color: #c4b89e; }
.pvpa-card-wait-lvl.r-elf     { background: rgba(95,214,132,0.15);  color: #8ee5a8; }
.pvpa-card-wait-lvl.r-ogre    { background: rgba(215,123,92,0.15);  color: #d77b5c; }
.pvpa-card-wait-lvl.r-fae     { background: rgba(243,168,224,0.15); color: #f3a8e0; }
.pvpa-card-wait-lvl.r-drakkar { background: rgba(255,138,140,0.15); color: #ff8a8c; }
.pvpa-card-wait-lvl.r-undead  { background: rgba(139,227,255,0.15); color: #8be3ff; }
.pvpa-card-wait-time {
  font-size: 11px;
  color: rgba(245,237,214,0.5);
}
.pvpa-card-blocked {
  font-size: 11px;
  color: #ff8a98;
  padding: 4px 8px;
  background: rgba(232,90,106,0.10);
  border: 1px solid rgba(232,90,106,0.25);
  border-radius: 6px;
}

/* Botón */
.pvpa-card-btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: 'Cinzel', serif;
  border-radius: 99px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  border: 1px solid;
}
.pvpa-card-btn i { font-size: 14px; }
.pvpa-card-btn.is-join {
  background: linear-gradient(180deg, rgba(212,175,55,0.18), rgba(212,175,55,0.06));
  border-color: rgba(212,175,55,0.45);
  color: #f5edd6;
}
.pvpa-card-btn.is-join:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(212,175,55,0.28), rgba(212,175,55,0.12));
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(212,175,55,0.18);
}
.pvpa-card-btn.is-leave {
  background: linear-gradient(180deg, rgba(232,90,106,0.18), rgba(232,90,106,0.08));
  border-color: rgba(232,90,106,0.50);
  color: #ff8a98;
}
.pvpa-card-btn.is-leave:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(232,90,106,0.30), rgba(232,90,106,0.14));
}
.pvpa-card-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* Mobile */
@media (max-width: 900px) {
  .pvpa-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .pvpa-card { min-height: 180px; padding: 14px 10px 12px; }
  .pvpa-title { font-size: 18px; }
  .pvpa-subtitle { font-size: 11px; }
  .pvpa-header-icon { font-size: 28px; }
  .pvpa-card-name { font-size: 12.5px; }
  .pvpa-card-state { font-size: 11px; }
  .pvpa-card-num { font-size: 22px; }
}
@media (max-width: 480px) {
  .pvpa-shell { padding: 10px 8px 24px; }
  /* 2026-06-18 · El banner era 3 cols horizontales: icono · texto · chips. Los chips con
     white-space:nowrap ("Tu nivel: 35" + "Match con: ± 5 niveles") comían ~60% del viewport,
     dejando el texto con espacio para 1 palabra por línea. Stackeo vertical: ícono+título arriba,
     texto debajo full-width, chips abajo en su propia fila. */
  .pvpa-info-banner {
    font-size: 12px;
    padding: 12px;
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 8px;
  }
  .pvpa-info-banner .pvpa-info-icon { font-size: 18px; }
  .pvpa-info-text-wrap { flex: 1 1 calc(100% - 30px); min-width: 0; }
  .pvpa-info-banner b { font-size: 12.5px; margin-bottom: 3px; }
  .pvpa-info-text { line-height: 1.4; }
  .pvpa-info-chips {
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
  }
  .pvpa-info-chip { font-size: 11px; padding: 5px 10px; }
  .pvpa-pill { font-size: 11px; padding: 5px 9px; }
  .pvpa-leave-btn { font-size: 11px; padding: 5px 11px; margin-left: 0; }
  /* Quick match circle más chico en mobile */
  .pvpa-quick-center { padding: 16px 8px 20px; gap: 12px; margin: 4px 0 14px; }
  .pvpa-quick-circle { width: 160px; height: 160px; }
  .pvpa-qc-icon { font-size: 34px; }
  .pvpa-qc-label { font-size: 14px; letter-spacing: 0.08em; }
  .pvpa-qc-label span { font-size: 11.5px; letter-spacing: 0.10em; }
  .pvpa-qc-glow { inset: -22px; }
  .pvpa-qm-pill { font-size: 11px; padding: 4px 10px; }
  .pvpa-quick-hint { font-size: 11.5px; max-width: 100%; }
  .pvpa-quick-cancel { font-size: 11.5px; padding: 7px 14px; }
  .pvpa-grid-header { margin: 4px 0 8px; padding-bottom: 6px; }
  .pvpa-grid-title { font-size: 12.5px; letter-spacing: 0.06em; }
  .pvpa-grid-sub { font-size: 10.5px; }
}

/* =====================================================================
   CTA "Arenas PvP" — botón grande que aparece dentro de la zona PvP
   en combat.js, lleva a la nueva pantalla de arenas.
   ===================================================================== */
.pvpa-cta-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 14px 0;
  padding: 14px 16px;
  background:
    radial-gradient(ellipse at left, rgba(232,90,106,0.18) 0%, transparent 60%),
    linear-gradient(180deg, #1a0a18 0%, #0d0410 100%);
  border: 1px solid rgba(232,90,106,0.45);
  border-radius: 14px;
  color: #f5edd6;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s, border-color 0.2s;
  box-shadow: 0 4px 18px rgba(232,90,106,0.12), inset 0 1px 0 rgba(255,255,255,0.04);
}
.pvpa-cta-btn:hover {
  border-color: rgba(232,90,106,0.7);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(232,90,106,0.22), inset 0 1px 0 rgba(255,255,255,0.06);
}
.pvpa-cta-icon {
  width: 48px; height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(232,90,106,0.30), rgba(232,90,106,0.10));
  border: 1px solid rgba(232,90,106,0.50);
  color: #ff8a98;
  font-size: 24px;
}
.pvpa-cta-text {
  flex: 1;
  min-width: 0;
}
.pvpa-cta-title {
  font-family: 'Cinzel', serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ff8a98;
  margin-bottom: 2px;
}
.pvpa-cta-sub {
  font-size: 12px;
  color: rgba(245,237,214,0.62);
  line-height: 1.35;
}
.pvpa-cta-arrow {
  font-size: 18px;
  color: rgba(255,138,152,0.65);
  transition: transform 0.2s;
}
.pvpa-cta-btn:hover .pvpa-cta-arrow { transform: translateX(3px); }

@media (max-width: 480px) {
  .pvpa-cta-btn { padding: 12px 12px; gap: 10px; }
  .pvpa-cta-icon { width: 42px; height: 42px; font-size: 20px; }
  .pvpa-cta-title { font-size: 15px; }
  .pvpa-cta-sub { font-size: 11px; }
}

/* =====================================================================
   PVPZ TOOLBAR — 2 botones arriba de la card de límites en zona PvP
   .pvpz-* = "PvP Zone" (toolbar + modals)
   ===================================================================== */
.pvpz-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 12px;
}
.pvpz-toolbar-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background:
    linear-gradient(180deg, rgba(80,50,140,0.16) 0%, rgba(15,8,30,0.6) 100%);
  border: 1px solid rgba(212,175,55,0.22);
  border-radius: 11px;
  color: #f5edd6;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.pvpz-toolbar-btn:hover {
  border-color: rgba(212,175,55,0.50);
  transform: translateY(-1px);
}
.pvpz-toolbar-btn > i {
  font-size: 20px;
  color: #d4af37;
  flex-shrink: 0;
}
.pvpz-tb-label {
  flex: 1;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f5edd6;
}
.pvpz-tb-badge {
  padding: 2px 9px;
  background: rgba(212,175,55,0.16);
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  color: #d4af37;
  min-width: 22px;
  text-align: center;
}

/* =====================================================================
   PVPZ MODAL — modal Obsidian Codex para players y historial
   ===================================================================== */
.pvpz-modal-overlay {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(20,10,40,0.78) 0%, rgba(4,2,12,0.92) 100%);
  backdrop-filter: blur(6px);
  padding: 16px;
  animation: pvpz-fadein 200ms ease-out;
}
@keyframes pvpz-fadein { from { opacity: 0; } to { opacity: 1; } }

.pvpz-modal {
  position: relative;
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(ellipse at top, rgba(80,50,140,0.22) 0%, transparent 60%),
    linear-gradient(180deg, #15102a 0%, #0a0418 100%);
  border: 1px solid rgba(212,175,55,0.22);
  border-radius: 16px;
  box-shadow: 0 28px 72px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.04);
  color: #f5edd6;
  animation: pvpz-pop 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pvpz-modal--wide { max-width: 720px; }
@keyframes pvpz-pop {
  from { transform: translateY(12px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.pvpz-modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  color: #f5edd6;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.pvpz-modal-close:hover { background: rgba(255,80,80,0.25); transform: rotate(90deg); }
.pvpz-modal-close i { font-size: 16px; }
.pvpz-modal-header {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 50px 8px 22px;
  border-bottom: 1px solid rgba(212,175,55,0.12);
}
.pvpz-modal-header > i {
  font-size: 22px;
  color: #d4af37;
}
.pvpz-modal-header h3 {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f5edd6;
  flex: 1;
}
.pvpz-modal-meta {
  padding: 3px 10px;
  background: rgba(212,175,55,0.14);
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  color: #d4af37;
}
.pvpz-modal-sub {
  padding: 4px 22px 12px;
  font-size: 12px;
  color: rgba(245,237,214,0.55);
  border-bottom: 1px solid rgba(212,175,55,0.08);
}
.pvpz-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 18px 18px;
}

/* Mobile */
@media (max-width: 600px) {
  .pvpz-toolbar { grid-template-columns: 1fr; gap: 8px; }
  .pvpz-toolbar-btn { padding: 10px 12px; }
  .pvpz-tb-label { font-size: 12px; }
  .pvpz-modal { max-height: calc(100vh - 16px); border-radius: 14px; }
  .pvpz-modal-header { padding: 16px 46px 8px 18px; }
  .pvpz-modal-header h3 { font-size: 16px; }
  .pvpz-modal-body { padding: 12px 14px 16px; }
}

/* =====================================================================
   BLOOD ARENA · Rediseño visual de la zona PvP (2026-06-08)
   Hero cinemático + stats cards + cards de arena ornadas.
   .ba-* = "Blood Arena". Solo aplica cuando z.code === 'blood_arena'.
   ===================================================================== */

/* ── Hero banner ────────────────────────────────────────────────────── */
.ba-hero {
  position: relative;
  margin: -4px 0 16px;
  min-height: 168px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(212,175,55,0.32);
  box-shadow: 0 6px 28px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
  background: #0a0418;
  isolation: isolate;
}
/* Layer 1: imagen de fondo cinemática. */
.ba-hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('/assets/bg/blood_arena_hero.png');
  background-size: cover;
  background-position: center right;
  background-color: #0a0418;
  z-index: 0;
}
/* Layer 2: viñeta oscura sobre el lado izquierdo para legibilidad del texto */
.ba-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(8,3,18,0.92) 0%, rgba(8,3,18,0.62) 35%, rgba(8,3,18,0.20) 65%, rgba(8,3,18,0.05) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, transparent 30%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}
.ba-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 28px;
  min-height: 168px;
}
/* Sigilo: PNG ornado real. */
.ba-hero-sigil-img {
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.7)) drop-shadow(0 0 18px rgba(232,55,75,0.32));
}

.ba-hero-text { flex: 1; min-width: 0; }
.ba-hero-title {
  margin: 0 0 6px;
  font-family: 'Cinzel', serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #ffd56a;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,0.85), 0 0 22px rgba(212,175,55,0.30);
  line-height: 1.05;
}
.ba-hero-sub {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Cinzel', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(245,237,214,0.82);
  max-width: 580px;
  letter-spacing: 0.015em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.ba-hero-back {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(13,6,32,0.7);
  border: 1px solid rgba(212,175,55,0.40);
  color: #ffd56a;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.15s;
}
.ba-hero-back:hover {
  background: rgba(212,175,55,0.18);
  border-color: rgba(255,210,90,0.75);
  transform: translateX(-2px);
}
.ba-hero-back i { font-size: 18px; }

/* ── Stats row (Jugadores online + Historial PvP) — override pvpz-toolbar
   en el contexto de blood_arena para que se vea como cards de stat ───── */
.ba-hero ~ .pvpz-toolbar {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0 0 16px;
}
.ba-hero ~ .pvpz-toolbar .pvpz-toolbar-btn {
  padding: 14px 18px;
  background:
    radial-gradient(ellipse at top left, rgba(212,175,55,0.10) 0%, transparent 60%),
    linear-gradient(180deg, rgba(20,12,38,0.92) 0%, rgba(8,3,18,0.92) 100%);
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
}
.ba-hero ~ .pvpz-toolbar .pvpz-toolbar-btn:hover {
  border-color: rgba(255,210,90,0.60);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(212,175,55,0.15), inset 0 1px 0 rgba(255,255,255,0.06);
}
.ba-hero ~ .pvpz-toolbar .pvpz-toolbar-btn > i {
  font-size: 22px;
  color: #ffc857;
  filter: drop-shadow(0 0 6px rgba(255,200,87,0.40));
}
.ba-hero ~ .pvpz-toolbar .pvpz-tb-label {
  font-size: 13px;
  letter-spacing: 0.10em;
  color: #f5edd6;
}
.ba-hero ~ .pvpz-toolbar .pvpz-tb-badge {
  padding: 4px 12px;
  background: rgba(212,175,55,0.18);
  border-color: rgba(212,175,55,0.55);
  font-size: 13px;
  font-weight: 800;
  color: #ffd56a;
  min-width: 32px;
}

/* ── Caps card · rediseño cinemático en blood_arena (2026-06-08) ─────── */
.ba-hero ~ #pvp-caps-card.pvp-caps-card {
  margin: 0 0 18px;
  padding: 18px 22px;
  background:
    radial-gradient(ellipse at top left, rgba(255,200,87,0.10) 0%, transparent 55%),
    linear-gradient(180deg, rgba(22,14,40,0.95) 0%, rgba(8,3,18,0.95) 100%);
  border: 1px solid rgba(212,175,55,0.40);
  border-radius: 16px;
  box-shadow:
    0 6px 22px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,210,90,0.10),
    0 0 30px rgba(212,175,55,0.05);
}
.ba-hero ~ #pvp-caps-card .pvp-caps-head {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(212,175,55,0.16);
}
.ba-hero ~ #pvp-caps-card .pvp-caps-title {
  font-size: 14px;
  letter-spacing: 0.12em;
  color: #ffd56a;
}
.ba-hero ~ #pvp-caps-card .pvp-caps-title i { color: #ffc857; font-size: 18px; }
.ba-hero ~ #pvp-caps-card .pvp-caps-reset {
  padding: 5px 12px;
  background: rgba(212,175,55,0.12);
  border: 1px solid rgba(212,175,55,0.35);
  color: #ffd56a;
  font-weight: 700;
  font-size: 12px;
}
.ba-hero ~ #pvp-caps-card .pvp-caps-body { gap: 18px; }
.ba-hero ~ #pvp-caps-card .pvp-cap-row {
  padding: 12px 14px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(212,175,55,0.12);
  border-radius: 12px;
  gap: 8px;
}
.ba-hero ~ #pvp-caps-card .pvp-cap-info {
  font-size: 13px;
  gap: 10px;
}
.ba-hero ~ #pvp-caps-card .pvp-cap-info > i {
  font-size: 18px;
  filter: drop-shadow(0 0 6px currentColor);
}
.ba-hero ~ #pvp-caps-card .pvp-cap-label {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f5edd6;
  font-size: 12.5px;
}
.ba-hero ~ #pvp-caps-card .pvp-cap-val {
  font-size: 14px;
  font-weight: 800;
  color: #ffd56a;
  letter-spacing: 0.02em;
}
.ba-hero ~ #pvp-caps-card .pvp-cap-formula {
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 800;
}
.ba-hero ~ #pvp-caps-card .pvp-cap-bar {
  height: 10px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.06);
}
.ba-hero ~ #pvp-caps-card .pvp-cap-hint {
  font-size: 11px;
  font-family: 'Inter', sans-serif;
  font-style: italic;
  color: rgba(245,237,214,0.55);
}

/* ── Arena cards · sigilo + número + ENTRAR ornado ──────────────────── */
.pvpa-card {
  padding: 14px 12px 12px;
  background:
    radial-gradient(ellipse at top, rgba(80,50,140,0.20) 0%, transparent 65%),
    linear-gradient(180deg, #161028 0%, #0a0418 100%);
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: 16px;
  min-height: 240px;
  overflow: hidden;
  position: relative;
}
/* Número grande al fondo, decorativo */
.pvpa-card .pvpa-card-num {
  position: absolute;
  top: 6px;
  right: 14px;
  font-size: 36px;
  font-weight: 900;
  font-family: 'Cinzel', serif;
  color: rgba(212,175,55,0.16);
  letter-spacing: 0;
  z-index: 0;
}
/* Sigilo central: PNG ornado real (espadas cruzadas / calavera roja) */
.pvpa-card-sigil-img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin: 6px auto 8px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7)) drop-shadow(0 0 8px rgba(212,175,55,0.30));
}
.pvpa-card.is-unlimited .pvpa-card-sigil-img {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7)) drop-shadow(0 0 10px rgba(255,90,110,0.45));
}

/* Reset márgenes — el sigilo ya da el espacio */
.pvpa-card .pvpa-card-name { z-index: 2; position: relative; }
.pvpa-card .pvpa-card-state { z-index: 2; position: relative; }
.pvpa-card .pvpa-card-btn {
  z-index: 2;
  position: relative;
  /* Botón ENTRAR ornado dorado */
  background:
    linear-gradient(180deg, rgba(212,175,55,0.30) 0%, rgba(212,175,55,0.12) 100%);
  border: 1px solid rgba(255,210,90,0.55);
  color: #ffe9a8;
  font-family: 'Cinzel', serif;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.10);
}
.pvpa-card .pvpa-card-btn.is-join:hover:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(212,175,55,0.45) 0%, rgba(212,175,55,0.22) 100%);
  border-color: rgba(255,210,90,0.80);
  box-shadow: 0 4px 14px rgba(212,175,55,0.35), inset 0 1px 0 rgba(255,255,255,0.14);
}

/* Card .is-me (cuando el user está esperando en esa arena) — overlay dorado */
.pvpa-card.is-me {
  border-color: rgba(255,210,90,0.65);
  box-shadow: 0 0 0 1px rgba(255,210,90,0.18), 0 6px 22px rgba(212,175,55,0.20);
}

/* Mobile: ajustes del hero */
@media (max-width: 900px) {
  .ba-hero { min-height: 130px; }
  .ba-hero-content { padding: 16px 18px 16px 16px; gap: 14px; min-height: 130px; }
  .ba-hero-sigil-img { width: 78px; height: 78px; }
  .ba-hero-title { font-size: 22px; letter-spacing: 0.04em; }
  .ba-hero-sub { font-size: 12px; }
  .ba-hero-back { top: 10px; right: 10px; width: 32px; height: 32px; }
  .ba-hero-back i { font-size: 16px; }
  .ba-hero ~ .pvpz-toolbar { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ba-hero ~ .pvpz-toolbar .pvpz-toolbar-btn { padding: 10px 12px; }
  .ba-hero ~ .pvpz-toolbar .pvpz-toolbar-btn > i { font-size: 18px; }
  .pvpa-card { min-height: 200px; }
  .pvpa-card .pvpa-card-num { font-size: 28px; right: 10px; }
  .pvpa-card-sigil-img { width: 60px; height: 60px; margin-top: 4px; }
}