/* =====================================================================
   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 explicativa */
.pvpa-info-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: rgba(126,158,255,0.06);
  border: 1px solid rgba(126,158,255,0.22);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
}
.pvpa-info-banner > i {
  color: #7e9eff;
  font-size: 18px;
  margin-top: 1px;
  flex-shrink: 0;
}
.pvpa-info-banner b { color: #f5edd6; }
.pvpa-info-text {
  color: rgba(245,237,214,0.72);
  margin-top: 2px;
}

/* 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: 22px 12px 26px;
  margin: 6px 0 18px;
  position: relative;
}
.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(5, 1fr);
  gap: 12px;
}

.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); }

/* 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; }
  .pvpa-info-banner { font-size: 12px; padding: 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; }
}