/* =========================================================
   🧭 PVP HEADER — PREMIUM
========================================================= */

.header{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;

  padding:18px 20px;

  background:
    linear-gradient(135deg,#6366f1,#8b5cf6);

  color:white;

  box-shadow:
    0 20px 50px rgba(99,102,241,.35),
    inset 0 -1px 0 rgba(255,255,255,.18);

  position:sticky;
  top:0;
  z-index:50;
}

.header-center h1{
  margin:0;
  font-size:22px;
  font-weight:900;
  letter-spacing:.3px;
}

.header-center small{
  opacity:.85;
  font-weight:600;
}

.header-left{
  justify-self:start;
}

.header-center{
  text-align:center;
  justify-self:center;
}

.header-right{
  justify-self:end;
}

/* =========================================================
   🌌 BASE PVP
========================================================= */

body{
  margin:0;
  font-family:'Inter',system-ui;

  background:
    radial-gradient(900px 500px at -10% 10%, rgba(124,58,237,.10), transparent),
    radial-gradient(700px 400px at 70% 90%, rgba(37,99,235,.10), transparent),
    #f8fafc;

  color:#0f172a;
}


/* =========================================================
   🎯 PVP TOP AREA
========================================================= */

.pvp-top{
  max-width:900px;
  margin:28px auto 18px auto;
  padding:18px;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;

  background:rgba(255,255,255,.65);
  border:1px solid #e2e8f0;
  border-radius:18px;

  box-shadow:0 18px 50px rgba(15,23,42,.08);
  backdrop-filter:blur(10px);
}


.match-btn{
  min-width:260px;
  font-size:16px;
  padding:14px 22px;
  border-radius:16px;
}


/* modo buttons */

.mode-switch{
  display:inline-flex;
  gap:10px;
  padding:6px;

  background:#f1f5f9;
  border-radius:14px;
  border:1px solid #e2e8f0;

  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

.mode-switch .pvp-btn{
  width:auto;
  padding:10px 16px;
  font-size:14px;
}

/* botão encontrar */

.match-btn{
  min-width:260px;
}

.pvp-mm-hint{
  margin:10px 0 0;
  padding:0 12px;
  max-width:520px;
  text-align:center;
  font-size:13px;
  line-height:1.45;
  color:#475569;
}

.share-invite-block{
  width:100%;
  max-width:520px;
  margin-top:18px;
  padding:16px 18px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(99,102,241,.12), rgba(139,92,246,.08));
  border:1px solid rgba(99,102,241,.35);
  box-shadow:0 8px 28px rgba(99,102,241,.12);
  text-align:center;
}

.share-invite-block__title{
  margin:0 0 8px;
  font-size:15px;
  font-weight:800;
  color:#312e81;
  letter-spacing:.02em;
}

.share-invite-block__text{
  margin:0 0 14px;
  font-size:13px;
  line-height:1.5;
  color:#334155;
}

.share-invite-block .pvp-share-invite-btn{
  min-width:240px;
  font-weight:700;
  font-size:15px;
  padding:14px 22px;
  border-radius:14px;
  background:linear-gradient(135deg,#6366f1,#7c3aed);
  color:#fff !important;
  border:none;
  box-shadow:0 10px 28px rgba(99,102,241,.4);
}

.share-invite-block .pvp-share-invite-btn:hover{
  filter:brightness(1.06);
  box-shadow:0 12px 32px rgba(99,102,241,.48);
}

.container{
  max-width:900px;
  margin:20px auto;
  padding:0 16px 24px;
}


/* =========================================================
   🔒 MODAL CHALLENGE — FIX DEFINITIVO
========================================================= */

#modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(4px);

  /* ⭐ FORÇA CENTRALIZAÇÃO */
  justify-content:center;
  align-items:center;

  z-index:999999;
}

#modal.active{
  display:flex !important;
}

.modal-box{
  background:
    radial-gradient(circle at 20% 0%, rgba(99,102,241,.18), transparent 60%),
    linear-gradient(180deg,#ffffff,#f8fafc);

  border:1px solid #e2e8f0;
  border-radius:22px;

  padding:22px;
  width:92%;
  max-width:380px;
  text-align:center;

  box-shadow:0 30px 80px rgba(15,23,42,.25);
  color:#0f172a;

  animation:modalPop .22s ease;
}

/* =========================================================
   🧯 HOTFIX BOTÕES PVP
========================================================= */

.pvp-top .btn,
.container .btn,
.modal-box .btn,
.pvp-top .pvp-btn,
.container .pvp-btn,
.modal-box .pvp-btn{
  width:auto;
}


/* ====
 PLAYER
===*/

.player{
  background:
    radial-gradient(600px 200px at -20% -50%, rgba(99,102,241,.10), transparent),
    linear-gradient(180deg,#ffffff,#f8fafc);

  border:1px solid #e2e8f0;
  border-radius:20px;

  padding:18px;
  margin-bottom:16px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  box-shadow:0 18px 48px rgba(15,23,42,.10);
  transition:.18s ease;
}

.player:hover{
  transform:translateY(-2px);
  box-shadow:0 28px 70px rgba(99,102,241,.22);
  border-color:#c7d2fe;
}

.players-group{
  margin-bottom: 20px;
}

.players-group-title{
  margin: 8px 2px 12px;
  font-size: 14px;
  font-weight: 800;
  color: #334155;
}

.players-empty{
  margin: 4px 2px 10px;
  color: #64748b;
  font-size: 13px;
}

.pvp-btn.btn-disabled{
  opacity: .6;
  cursor: not-allowed;
}

/* estado padrão */
.mode-btn{
  background:#f1f5f9;
  color:#475569;
  border:1px solid #e2e8f0;
  border-radius:12px;
  font-weight:800;
  transition:.15s;
}

/* 🔥 ESTADO ATIVO REAL */
.mode-btn.active{
  background:linear-gradient(90deg,#4f46e5,#7c3aed);
  color:white;
  border:1px solid transparent;
  box-shadow:0 10px 26px rgba(79,70,229,.35);
}

.info{
  display:flex;
  align-items:center;
  gap:14px;
}

.avatar{
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;

  font-size:24px;
  font-weight:bold;

  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:white;

  box-shadow:0 10px 25px rgba(99,102,241,.35);
}

.player-meta{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.player-name{
  font-size:15px;
  font-weight:900;
  color:#0f172a;
}

.player-title{
  font-size:11px;
  font-weight:700;
  color:#6366f1;
  opacity:.9;
}

.player-level{
  font-size:13px;
  font-weight:700;
  color:#64748b;
}

.back-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:10px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.25);

  font-family:'Inter',system-ui;
  font-weight:800;
  font-size:13px;

  color:white;
  background:rgba(255,255,255,.12);

  cursor:pointer;

  backdrop-filter:blur(6px);

  box-shadow:
    0 8px 24px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.25);

  transition:all .15s ease;
}

/* hover premium */
.back-btn:hover{
  background:rgba(255,255,255,.22);
  transform:translateY(-1px);
}

/* active */
.back-btn:active{
  transform:translateY(0);
  box-shadow:
    0 4px 14px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.25);
}

.back-btn span{
  opacity:.95;
}

/* ===============================
   MODAL BASE UPGRADE
=============================== */

.modal-card{
  padding:28px 26px;
  border-radius:22px;
}

.modal-title{
  font-size:20px;
  font-weight:900;
  letter-spacing:.2px;
  margin-bottom:6px;
}

.modal-subtext{
  font-size:14px;
  color:#64748b;
  font-weight:600;
}

/* =========================================================
   ⚔️ MATCH SPINNER — FIX DEFINITIVO
========================================================= */

.match-spinner{
  font-size:28px;
  line-height:1;
  margin:16px auto 18px;
  max-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:matchSpin 1.2s linear infinite;
}

/* rotação suave premium */
@keyframes matchSpin{
  from{ transform:rotate(0deg) scale(1); }
  50%{ transform:rotate(180deg) scale(1.08); }
  to{ transform:rotate(360deg) scale(1); }
}

.match-cancel{
  width:220px;
}	

/* ===============================
   SELECT PREMIUM
=============================== */

.modal-box select{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #e2e8f0;
  background:#fff;
  font-weight:700;
  margin-top:6px;
}

/* ===============================
   QTD BUTTONS PREMIUM
=============================== */

.qtd-btn{
  flex:1;
  padding:12px;
  border-radius:14px;
  border:1px solid #e2e8f0;
  background:white;
  color:#475569;
  cursor:pointer;
  font-weight:800;
  transition:.15s;
}

.qtd-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(99,102,241,.18);
}

.qtd-btn.active{
  background:linear-gradient(90deg,#6366f1,#8b5cf6);
  color:white;
  border:1px solid transparent;
  box-shadow:0 12px 28px rgba(99,102,241,.35);
}

.modal-cancel{
  width:160px;
  margin-top:6px;
}

/* ========================================
   🔎 MATCHMAKING MODAL — PREMIUM FIX
======================================== */

#searchModal.modal-overlay{
  background:rgba(15,23,42,.65);   /* mais escuro */
  backdrop-filter:blur(8px);       /* mais forte */
}

/* card interno */

#searchModal .modal-card{
  background:
    radial-gradient(circle at 20% 0%, rgba(99,102,241,.22), transparent 60%),
    linear-gradient(180deg,#ffffff,#f8fafc);

  box-shadow:
    0 40px 90px rgba(15,23,42,.35),
    0 0 0 1px rgba(255,255,255,.6) inset;

  border-radius:24px;
}

/* ========================================
   🔎 MATCHMAKING MODAL — PREMIUM FIX
======================================== */

#searchModal.modal-overlay{
  background:rgba(15,23,42,.65);   /* mais escuro */
  backdrop-filter:blur(8px);       /* mais forte */
}

/* card interno */

#searchModal .modal-card{
  background:
    radial-gradient(circle at 20% 0%, rgba(99,102,241,.22), transparent 60%),
    linear-gradient(180deg,#ffffff,#f8fafc);

  box-shadow:
    0 40px 90px rgba(15,23,42,.35),
    0 0 0 1px rgba(255,255,255,.6) inset;

  border-radius:24px;
}

/* título centralizado perfeito */

.modal-title-flex{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
}

.modal-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  line-height:1;
}

/* respiro entre qtd e botão */

.modal-actions{
  margin-top:22px;
}

/* botão principal do modal */

.modal-actions .pvp-btn{
  margin-top:6px;
}

/* =========================================================
   🪟 MATCH MODAL — DESAMASSAR
========================================================= */

#searchModal .modal-card{
  min-height:260px;          /* 🔥 impede achatamento */
  padding:34px 28px;         /* 🔥 mais respiro */
  border-radius:26px;
  text-align:center;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* =========================================================
   📨 INVITE MODAL — PREMIUM FIX DEFINITIVO
========================================================= */

/* overlay mais forte */

#inviteModal.modal-overlay{
  background:rgba(15,23,42,.72);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}

/* card */

#inviteModal .modal-card{
  width:100%;
  max-width:360px;
  min-height:260px;

  padding:32px 26px;
  border-radius:26px;

  background:
    radial-gradient(circle at 20% 0%, rgba(99,102,241,.22), transparent 60%),
    linear-gradient(180deg,#ffffff,#f8fafc);

  box-shadow:
    0 40px 90px rgba(15,23,42,.35),
    0 0 0 1px rgba(255,255,255,.6) inset;

  text-align:center;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}

/* título */

#inviteModal .modal-title{
  font-size:22px;
  font-weight:900;
  margin-bottom:4px;
}

/* texto do convite */

#inviteText{
  font-size:15px;
  font-weight:600;
  color:#475569;
}

/* timer */

#inviteTimer{
  font-size:22px !important;
  font-weight:900;
  color:#facc15;
  margin-top:4px;
  margin-bottom:10px;
}

/* container dos botões */

#inviteModal .modal-card > div:last-child{
  display:flex;
  gap:14px;
  justify-content:center;
  margin-top:10px;
  width:100%;
}

/* botão aceitar */

#inviteModal .pvp-btn{
  width:150px;
}

/* botão recusar */

#inviteModal .btn-ghost{
  width:150px;
}

/* =========================================================
   🌑 GLOBAL MODAL — FIX PREMIUM
========================================================= */

#globalModal.modal-overlay{
  background:rgba(15,23,42,.72);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:999999;
}

/* card */

#globalModal .modal-card{
  width:100%;
  max-width:340px;
  min-height:220px;

  padding:30px 24px;
  border-radius:26px;

  background:
    radial-gradient(circle at 20% 0%, rgba(99,102,241,.22), transparent 60%),
    linear-gradient(180deg,#ffffff,#f8fafc);

  box-shadow:
    0 40px 90px rgba(15,23,42,.35),
    0 0 0 1px rgba(255,255,255,.6) inset;

  text-align:center;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
}

/* título */

#globalModal .modal-title{
  font-size:22px;
  font-weight:900;
  margin-bottom:4px;
}

/* texto */

#globalModal .modal-text{
  font-size:15px;
  font-weight:600;
  color:#475569;
}

/* botão OK */

#globalModal .pvp-btn,
#globalModal .btn-ghost{
  width:200px;
}

.lock-icon{
  margin-left:6px;
  font-size:12px;
  opacity:.8;
}

/* =========================================
   🧠 MODE INFO BALLOON
========================================= */

.mode-info{
  margin-top:12px;
  font-size:13px;
  color:#64748b;
  background:rgba(99,102,241,.06);
  border:1px solid rgba(99,102,241,.12);
  padding:10px 14px;
  border-radius:12px;
  text-align:center;
  max-width:460px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.35;
}

.mode-info{
  transition: all .25s ease;
}

.mode-info.flash{
  transform: translateY(-2px);
}


/* =========================================
   📊 RANGE INFO
========================================= */

.range-info{
  font-size:13px;
  color:#94a3b8;
  margin-bottom:12px;
  text-align:center;
}

.pvp-admin-hint{
  font-size:12px;
  color:#a78bfa;
  margin:-4px 0 14px;
  text-align:center;
  line-height:1.35;
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
}

.players-loading{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:40px 0;
}

.loading-box{
  text-align:center;
  opacity:.9;
}

.loading-spinner{
  font-size:28px;
  animation: spinSoft 1.4s linear infinite;
}

.loading-text{
  margin-top:8px;
  color:#94a3b8;
  font-size:14px;
}

@keyframes spinSoft{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* ===============================
   📱 MOBILE UX POLISH (PvP Lobby)
================================ */
@media (max-width: 768px){
  .pvp-top{
    margin:12px 10px 12px;
    padding:12px;
    gap:10px;
    border-radius:14px;
  }

  .mode-switch{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    box-sizing:border-box;
  }

  .mode-switch .mode-btn{
    min-height:42px;
    width:100%;
    touch-action: manipulation;
  }

  .mode-info{
    font-size:12px;
    text-align:center;
    line-height:1.35;
  }

  .match-btn{
    width:100%;
    min-width:0;
    min-height:46px;
    font-size:15px;
    touch-action: manipulation;
  }

  .container{
    padding:0 10px 18px;
  }

  .player{
    border-radius:14px;
    padding:12px;
    gap:10px;
    align-items:center;
  }

  .info{
    gap:10px;
    min-width:0;
    flex:1;
  }

  .player-meta{
    min-width:0;
  }

  .player-name{
    font-size:14px;
    line-height:1.2;
    word-break:break-word;
  }

  .player-title{
    font-size:10px;
    line-height:1.2;
  }

  .player-level{
    font-size:12px;
    line-height:1.2;
  }

  .player .pvp-btn,
  .player .btn,
  .player .btn-disabled{
    min-height:42px;
    padding:10px 12px;
    font-size:13px;
    touch-action: manipulation;
  }
}

@media (max-width: 420px){
  .pvp-top{
    margin:8px 8px 10px;
    padding:10px;
  }

  .share-invite-row{
    gap:8px !important;
  }

  .share-invite-row > .btn{
    min-height:40px;
    width:100%;
  }

  .player{
    padding:10px;
  }
}

.pvp-share-invite-btn,
.share-invite-row .btn{
  cursor:pointer;
}