/* ============================================================
   PVP-ONLINE.CSS — Central de Batalhas PVP
   Visual "arena shinobi moderna": cartões nítidos, cores de time
   (azul/vermelho), acentos de liga em ouro/chakra. Reaproveita os
   tokens globais de style.css (--ink-*, --chakra, --ember, --gold,
   --success/--danger/--warning) e os padrões de botão/modal já
   estabelecidos no resto do projeto (ver trade.css/doujutsus.css).

   Só flexbox — sem CSS Grid e sem aspect-ratio (o motor de preview
   do time não suporta nenhum dos dois).

   ORGANIZAÇÃO (para facilitar expansões futuras):
     1. Base / cabeçalho da página
     2. Toolbar + filtros
     3. Botões genéricos da página
     4. Layout do lobby (perfil, chat, lista de salas)
     5. Cartões de sala
     6. Modais (overlay genérico, criar sala, sala atual)
     7. Sala atual — times / jogadores
     8. Tela de carregamento
     9. Tela de escolha de deck (preparação)
    10. Overlay "aguardando confirmação"
    11. Responsivo
    12. Reservado p/ expansões (espectadores, torneios, histórico)
   ============================================================ */

.pvpon-body { background:var(--page-bg) !important; min-height:100vh; }
.pvpon-page { max-width: 1360px; margin: 0 auto; padding: 22px 20px 60px; }
.pvpon-container { display: flex; flex-direction: column; gap: 18px; }

/* ── 1. CABEÇALHO DA PÁGINA ─────────────────────────────────── */
.pvpon-page-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: linear-gradient(180deg, #F4F2ED, #EDE9DE);
  border: 1px solid #D9D5CC;
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.pvpon-page-title h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.7rem;
  letter-spacing: 1px;
  color: #20212A;
}
.pvpon-page-title h1 span { color: var(--ember); }
.pvpon-page-title p { margin: 4px 0 0; font-size: .82rem; color: #666873; }

/* ── 2. TOOLBAR + FILTROS ───────────────────────────────────── */
.pvpon-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pvpon-busca-wrap {
  flex: 1 1 220px;
  display: flex; align-items: center; gap: 8px;
  background: #FFFFFF;
  border: 1px solid #D9D5CC;
  border-radius: var(--radius);
  padding: 9px 12px;
}
.pvpon-busca-wrap span { font-size: .85rem; opacity: .7; }
.pvpon-busca {
  flex: 1; background: none; border: none; outline: none;
  color: #20212A; font-family: var(--font-body); font-size: .82rem;
}
.pvpon-busca::placeholder { color: #8b8f9a; }

.pvpon-filtros-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pvpon-filtros-label { font-size: .68rem; font-weight: 700; color: #8b8f9a; text-transform: uppercase; letter-spacing: .5px; }
.pvpon-filtros-sep { width: 1px; height: 16px; background: #D9D5CC; margin: 0 2px; }
.pvpon-chip {
  background: #FFFFFF;
  border: 1px solid #D9D5CC;
  color: #666873;
  font-family: var(--font-body); font-weight: 700; font-size: .74rem;
  border-radius: 999px; padding: 6px 14px; cursor: pointer;
  transition: all .15s ease;
}
.pvpon-chip:hover:not(:disabled) { border-color: #c7c2b5; color: #20212A; }
.pvpon-chip.active { background: var(--ember-dim); border-color: var(--ember); color: #fff; }
.pvpon-chip-disabled, .pvpon-chip:disabled { opacity: .5; cursor: not-allowed; }
.pvpon-em-breve {
  display: inline-block; font-size: .58rem; font-weight: 800; color: var(--gold-dim);
  background: rgba(217,164,65,.12); border: 1px solid var(--gold-dim);
  border-radius: 5px; padding: 1px 6px; margin-left: 5px; text-transform: uppercase; letter-spacing: .4px;
}

/* ── 3. BOTÕES GENÉRICOS ────────────────────────────────────── */
.pvpon-btn {
  font-family: var(--font-body); font-weight: 800; font-size: .82rem;
  border: none; border-radius: var(--radius); padding: 10px 18px; cursor: pointer;
  transition: filter .15s ease, transform .1s ease;
  white-space: nowrap;
}
.pvpon-btn:hover { filter: brightness(1.12); }
.pvpon-btn:active { transform: translateY(1px); }
.pvpon-btn-primary { background: linear-gradient(135deg, var(--ember-dim), var(--ember)); color: #fff; }
.pvpon-btn-ghost { background: #FFFFFF; border: 1px solid #D9D5CC; color: #20212A; }

/* ── 4. LAYOUT DO LOBBY ─────────────────────────────────────── */
.pvpon-lobby {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}
.pvpon-col-esq { flex: 0 0 270px; display: flex; flex-direction: column; gap: 14px; }
.pvpon-col-central { flex: 1 1 520px; min-width: 320px; }

/* Perfil */
.pvpon-perfil-card {
  background: linear-gradient(180deg, #F4F2ED, #EDE9DE);
  border: 1px solid #D9D5CC;
  border-radius: var(--radius-lg);
  padding: 18px;
  text-align: center;
}
.pvpon-perfil-titulo { font-size: .68rem; font-weight: 800; color: #8b8f9a; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 12px; }
.pvpon-perfil-avatar-wrap { display: flex; justify-content: center; margin-bottom: 10px; }
.pvpon-perfil-avatar {
  position: relative; width: 74px; height: 74px; border-radius: 50%;
  background: #EDE9DE; border: 2px solid var(--gold);
  display: flex; align-items: center; justify-content: center; font-size: 2rem; overflow: hidden;
}
.pvpon-perfil-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pvpon-lv-badge {
  position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #20212A; font-family: var(--font-mono);
  font-size: .6rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
}
.pvpon-perfil-nome { font-family: var(--font-display); font-size: 1.05rem; color: #20212A; margin-top: 6px; }
.pvpon-perfil-grad { font-size: .7rem; font-weight: 800; letter-spacing: .5px; margin-top: 2px; }
.pvpon-perfil-stats { display: flex; gap: 8px; margin: 14px 0 10px; }
.pvpon-stat-box { flex: 1; background: #FFFFFF; border: 1px solid #D9D5CC; border-radius: var(--radius-sm); padding: 8px 4px; }
.pvpon-stat-label { display: block; font-size: .6rem; color: #8b8f9a; font-weight: 700; text-transform: uppercase; }
.pvpon-stat-val { display: block; font-family: var(--font-mono); font-size: 1rem; font-weight: 700; color: #1e8449; margin-top: 2px; }
.pvpon-stat-val.azul { color: var(--chakra-dim); }
.pvpon-perfil-liga-wrap { padding: 4px 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

.liga-badge, .liga-mmr-badge, .grad-badge-pvp {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .64rem; font-weight: 800; border: 1px solid; border-radius: 999px;
  padding: 3px 9px; background: #FFFFFF; white-space: nowrap;
}
.liga-badge small { font-family: var(--font-mono); opacity: .8; }
.liga-mmr-badge { color: var(--chakra-dim); border-color: var(--chakra-dim); }

/* Chat */
.pvpon-chat-card {
  background: #F4F2ED; border: 1px solid #D9D5CC;
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column; height: 340px;
}
.pvpon-chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid #D9D5CC;
}
.pvpon-chat-titulo { font-size: .8rem; font-weight: 800; color: #20212A; }
.pvpon-chat-canal { font-size: .62rem; color: #8b8f9a; background: #FFFFFF; border-radius: 999px; padding: 2px 8px; }
.pvpon-chat-msgs { flex: 1; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.pvpon-chat-msg { font-size: .74rem; line-height: 1.4; color: #666873; word-break: break-word; }
.pvpon-chat-msg .rank { font-family: var(--font-mono); font-weight: 700; }
.pvpon-chat-msg .nome { font-weight: 800; color: #20212A; }
.pvpon-chat-input-wrap { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #D9D5CC; }
.pvpon-chat-input {
  flex: 1; background: #FFFFFF; border: 1px solid #D9D5CC; border-radius: var(--radius-sm);
  color: #20212A; font-family: var(--font-body); font-size: .78rem; padding: 8px 10px; outline: none;
}
.pvpon-chat-send {
  background: var(--chakra-dim); color: #fff; border: none; border-radius: var(--radius-sm);
  width: 36px; cursor: pointer; font-size: .9rem;
}
.pvpon-chat-send:hover { filter: brightness(1.15); }

/* ── 5. CARTÕES DE SALA ─────────────────────────────────────── */
.pvpon-salas-card {
  background: #F4F2ED; border: 1px solid #D9D5CC;
  border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 14px;
}
.pvpon-salas-card-header { display: flex; flex-direction: column; gap: 2px; }
.pvpon-salas-card-header > span:first-child { font-size: .92rem; font-weight: 800; color: #20212A; }
.pvpon-salas-card-sub { font-size: .68rem; color: #8b8f9a; }

.pvpon-salas-grid { display: flex; flex-wrap: wrap; gap: 12px; min-height: 90px; }
.pvpon-empty { flex: 1 1 100%; text-align: center; padding: 34px 10px; color: #8b8f9a; font-size: .85rem; }

.pvpon-sala-card {
  flex: 1 1 260px; max-width: 320px;
  background: #FFFFFF; border: 1px solid #D9D5CC;
  border-radius: var(--radius); padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s ease, transform .1s ease;
}
.pvpon-sala-card:hover { border-color: #c7c2b5; transform: translateY(-1px); }
.pvpon-sala-card-mine { border-color: var(--gold-dim); background: linear-gradient(180deg, rgba(217,164,65,.08), #FFFFFF); }

.pvpon-sala-card-top { display: flex; align-items: center; justify-content: space-between; }
.pvpon-modo-badge {
  font-family: var(--font-mono); font-weight: 700; font-size: .68rem;
  padding: 3px 9px; border-radius: 999px; color: #fff;
}
.pvpon-modo-badge.modo-1v1 { background: var(--chakra-dim); }
.pvpon-modo-badge.modo-2v2 { background: var(--gold-dim); }
.pvpon-modo-badge.modo-3v3 { background: var(--ember-dim); }

.pvpon-sala-status { display: flex; align-items: center; gap: 5px; font-size: .66rem; font-weight: 700; color: #666873; }
.pvpon-sala-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); display: inline-block; }
.pvpon-sala-status.cheia i { background: var(--danger); }

.pvpon-sala-card-nome { font-family: var(--font-display); font-size: 1rem; color: #20212A; }
.pvpon-sala-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: .7rem; color: #666873; }
.pvpon-sala-card-criador strong { color: #20212A; }
.pvpon-sala-rank { font-weight: 700; }

.pvpon-sala-card-footer { display: flex; align-items: center; justify-content: space-between; font-size: .7rem; color: #666873; }
.pvpon-sala-card-vis { opacity: .8; }
.pvpon-sala-card-jogadores { font-weight: 700; color: #666873; }

.pvpon-sala-card-acao { margin-top: 4px; }
.pvpon-btn-entrar {
  width: 100%; background: linear-gradient(135deg, var(--success), #24a86a);
  color: #06210f; font-family: var(--font-body); font-weight: 800; font-size: .8rem;
  border: none; border-radius: var(--radius-sm); padding: 9px; cursor: pointer;
}
.pvpon-btn-entrar:hover { filter: brightness(1.08); }
.pvpon-btn-lotada {
  display: block; text-align: center; font-size: .74rem; font-weight: 700;
  color: #8b8f9a; background: #EDE9DE; border-radius: var(--radius-sm); padding: 9px;
}

.pvpon-salas-footer { display: flex; align-items: center; justify-content: space-between; font-size: .72rem; color: #8b8f9a; }
.pvpon-pag-btns { display: flex; gap: 6px; }
.pvpon-pag-btn {
  background: #FFFFFF; border: 1px solid #D9D5CC; color: #8b8f9a;
  border-radius: var(--radius-sm); padding: 5px 12px; font-size: .7rem; cursor: not-allowed;
}

/* ── 6. MODAIS ───────────────────────────────────────────────── */
.pvpon-modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.75);
  z-index: 9999; align-items: center; justify-content: center; padding: 16px;
}
.pvpon-modal-box {
  background: var(--ink-850); border: 1px solid var(--ink-line-strong);
  border-radius: var(--radius-lg); width: 100%; max-width: 520px;
  overflow: hidden; box-shadow: 0 12px 48px rgba(0,0,0,.6);
  max-height: 92vh; display: flex; flex-direction: column;
}
.pvpon-sala-modal-box { max-width: 640px; }
/* Modal único da arena (sala → carregamento → escolha de deck → combate).
   Todo o fluxo pós-criação da sala acontece dentro desta MESMA caixa —
   ela só fica mais larga ("wide") a partir da fase de escolha de deck.
   Praticamente do tamanho da tela, como pedido. */
.pvpon-arena-wide { max-width: 1760px; width: 98vw; max-height: 97vh; }
.pvpon-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; background: var(--ink-800); border-bottom: 1px solid var(--ink-line); flex-shrink: 0;
}
.pvpon-modal-titulo { font-family: var(--font-display); font-size: 1.05rem; color: var(--ember); letter-spacing: .5px; }
.pvpon-modal-fechar {
  background: rgba(255,77,94,.12); border: 1px solid var(--danger); color: var(--danger);
  border-radius: var(--radius-sm); padding: 4px 10px; cursor: pointer; font-size: .82rem; font-weight: 800;
}
.pvpon-modal-fechar:hover { background: rgba(255,77,94,.25); }
.pvpon-modal-body { padding: 18px; overflow-y: auto; }
/* Usado nas fases largas (carregamento/escolha/combate) pra o conteúdo
   interno (que usa width/height:100%) preencher a altura disponível. */
.pvpon-modal-body-fill { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }

/* Criar sala — formulário */
.pvpon-criar-campo { display: flex; flex-direction: column; gap: 6px; flex: 1 1 160px; margin-bottom: 14px; }
.pvpon-criar-campo-full { flex: 1 1 100%; }
.pvpon-criar-row { display: flex; gap: 12px; flex-wrap: wrap; }
.pvpon-criar-label { font-size: .68rem; font-weight: 800; color: var(--text-faint); text-transform: uppercase; letter-spacing: .4px; }
.pvpon-input, .pvpon-select {
  background: var(--ink-900); border: 1px solid var(--ink-line); border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--font-body); font-size: .82rem; padding: 10px 12px; outline: none;
  width: 100%;
}
.pvpon-input:focus, .pvpon-select:focus { border-color: var(--chakra-dim); }
.pvpon-input:disabled { opacity: .5; cursor: not-allowed; }
.pvpon-select { cursor: pointer; }

.pvpon-vis-toggle { display: flex; gap: 8px; }
.pvpon-vis-opt {
  flex: 1; background: var(--ink-900); border: 1px solid var(--ink-line); color: var(--text-dim);
  font-family: var(--font-body); font-weight: 700; font-size: .78rem; border-radius: var(--radius-sm);
  padding: 10px; cursor: not-allowed;
}
.pvpon-vis-opt.active { background: rgba(53,212,136,.12); border-color: var(--success); color: var(--success); cursor: default; }

.pvpon-criar-acoes { display: flex; gap: 10px; margin-top: 4px; }
.pvpon-btn-cancelar-sala {
  flex: 1; background: var(--ink-900); border: 1px solid var(--ink-line); color: var(--text-dim);
  font-family: var(--font-body); font-weight: 800; font-size: .82rem; border-radius: var(--radius-sm);
  padding: 11px; cursor: pointer;
}
.pvpon-btn-cancelar-sala:hover { border-color: var(--danger); color: var(--danger); }
.pvpon-btn-confirmar-sala {
  flex: 2; background: linear-gradient(135deg, var(--ember-dim), var(--ember)); color: #fff;
  font-family: var(--font-body); font-weight: 800; font-size: .82rem; border: none;
  border-radius: var(--radius-sm); padding: 11px; cursor: pointer;
}
.pvpon-btn-confirmar-sala:hover { filter: brightness(1.1); }

/* ── 7. SALA ATUAL — TIMES / JOGADORES ──────────────────────── */
.pvpon-sa-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: var(--ink-800); }
.pvpon-sa-id { font-family: var(--font-mono); font-size: .7rem; color: var(--text-faint); }
.pvpon-sa-sair { background: none; border: 1px solid var(--ink-line); color: var(--text-dim); border-radius: var(--radius-sm); padding: 4px 10px; cursor: pointer; }
.pvpon-sa-nome { font-family: var(--font-display); font-size: 1.15rem; color: var(--text); padding: 14px 18px 2px; }
.pvpon-sa-meta { font-size: .72rem; color: var(--text-faint); padding: 0 18px 14px; }

.pvpon-sa-time-section { padding: 0 18px 10px; }
.pvpon-sa-time-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pvpon-sa-time-nome { font-size: .74rem; font-weight: 800; letter-spacing: .4px; }
.pvpon-sa-time-nome.time-azul { color: var(--chakra); }
.pvpon-sa-time-nome.time-verm { color: var(--ember); }
.pvpon-sa-time-vagas { font-size: .66rem; color: var(--text-faint); }

.pvpon-sa-player-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--ink-900); border: 1px solid var(--ink-line); border-radius: var(--radius-sm);
  padding: 8px 10px; margin-bottom: 6px;
}
.pvpon-sa-player-row.is-me { border-color: var(--gold-dim); background: rgba(217,164,65,.06); }
.pvpon-sa-player-avatar {
  position: relative; width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink-950); border: 1px solid var(--ink-line-strong);
  display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--text-dim);
  overflow: hidden; flex-shrink: 0;
}
.pvpon-sa-player-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pvpon-sa-player-conn {
  position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--ink-900); z-index: 4; /* acima da moldura (z-index:3) */
}
.pvpon-sa-player-conn.online { background: var(--success); }
.pvpon-sa-player-conn.ausente { background: var(--text-faint); }
.pvpon-sa-player-info { flex: 1; min-width: 0; }
.pvpon-sa-player-nome { font-size: .8rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvpon-sa-player-grad { font-size: .66rem; color: var(--text-faint); }
.pvpon-sa-player-badge { font-size: .64rem; font-weight: 800; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.pvpon-sa-player-badge.badge-pronto { background: rgba(53,212,136,.15); color: var(--success); }
.pvpon-sa-player-badge.badge-preparando { background: rgba(241,196,15,.12); color: var(--warning); }

.pvpon-sa-aguardando {
  text-align: center; font-size: .72rem; color: var(--text-faint);
  border: 1px dashed var(--ink-line-strong); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 6px;
}

.pvpon-sa-vs-sep { display: flex; align-items: center; gap: 10px; padding: 4px 18px; }
.pvpon-sa-vs-line { flex: 1; height: 1px; background: var(--ink-line); }
.pvpon-sa-vs-txt { font-family: var(--font-display); font-size: .8rem; color: var(--text-faint); }

.pvpon-sa-footer { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 18px; border-top: 1px solid var(--ink-line); margin-top: 6px; }
.pvpon-sa-status { display: flex; align-items: center; gap: 8px; font-size: .74rem; color: var(--text-dim); }
.pvpon-sa-status-dot { width: 8px; height: 8px; border-radius: 50%; }
.pvpon-btn-iniciar {
  width: 100%; background: linear-gradient(135deg, var(--success), #24a86a); color: #06210f;
  font-family: var(--font-body); font-weight: 800; font-size: .86rem; border: none;
  border-radius: var(--radius-sm); padding: 12px; cursor: pointer;
}
.pvpon-btn-iniciar:hover:not(:disabled) { filter: brightness(1.08); }
.pvpon-btn-iniciar:disabled { background: var(--ink-700); color: var(--text-faint); cursor: not-allowed; }

/* ── 7b. SALA — LAYOUT LARGO (Time A | Info | Time B, chat/controles) ──
   A partir do redesign, a tela de sala usa a mesma caixa larga
   (.pvpon-arena-wide) da escolha de deck / combate. */
.pvpon-sa-header .sep { color: var(--text-faint); margin: 0 4px; }
.pvpon-sa-banner {
  margin: 12px 18px 0; padding: 10px 14px;
  background: rgba(53,212,136,.1); border: 1px solid rgba(53,212,136,.3);
  border-radius: var(--radius-sm); color: var(--success);
  font-size: .78rem; font-weight: 700;
}

.pvpon-sa-3col {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px; flex-wrap: wrap;
}
.pvpon-sa-team-col {
  flex: 1 1 260px; min-width: 220px;
  background: var(--ink-900); border: 1px solid var(--ink-line);
  border-radius: var(--radius); padding: 12px;
}
.pvpon-sa-info-col {
  flex: 0 1 240px; min-width: 200px; position: relative;
  background: var(--ink-900); border: 1px solid var(--ink-line);
  border-radius: var(--radius); padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.pvpon-sa-info-title { font-size: .78rem; font-weight: 800; color: var(--text); margin-bottom: 2px; }
.pvpon-sa-info-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .72rem; }
.pvpon-sa-info-row .k { color: var(--text-faint); }
.pvpon-sa-info-row .v { color: var(--text); font-weight: 700; text-align: right; }
.pvpon-sa-vs-mid { display: flex; justify-content: center; margin-top: 6px; }
.pvpon-sa-vs-badge {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ember-dim), var(--ember));
  color: #fff; font-family: var(--font-display); font-size: .82rem; font-weight: 800;
  box-shadow: 0 4px 14px rgba(255,90,54,.4);
}

.pvpon-sa-3col-bottom { align-items: stretch; }
.pvpon-sa-chat-col, .pvpon-sa-controles-col {
  flex: 1 1 260px; min-width: 220px;
  background: var(--ink-900); border: 1px solid var(--ink-line);
  border-radius: var(--radius); display: flex; flex-direction: column;
  min-height: 220px; max-height: 260px; overflow: hidden;
}
.pvpon-sa-chat-title, .pvpon-sa-controles-title {
  font-size: .76rem; font-weight: 800; color: var(--text);
  padding: 10px 14px; border-bottom: 1px solid var(--ink-line); flex-shrink: 0;
}
.pvpon-sa-mid-col {
  flex: 0 1 200px; min-width: 180px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--ink-900); border: 1px dashed var(--ink-line-strong);
  border-radius: var(--radius); padding: 16px;
}
.pvpon-sa-mid-badge {
  font-family: var(--font-display); font-size: .95rem; font-weight: 800;
  border: 1px solid; border-radius: 999px; padding: 6px 16px;
}
.pvpon-sa-mid-sub { font-size: .72rem; color: var(--text-faint); text-align: center; }

.pvpon-sa-controles-btns { display: flex; gap: 8px; padding: 12px 14px 0; }
.pvpon-sa-ctrl-btn {
  flex: 1; background: var(--ink-800); border: 1px solid var(--ink-line); color: var(--text-dim);
  border-radius: var(--radius-sm); padding: 9px 6px; font-size: .72rem; font-weight: 700;
  cursor: not-allowed; opacity: .6;
}
.pvpon-sa-controles-col .pvpon-btn-iniciar { margin: 10px 14px 0; width: auto; }
.pvpon-sa-controles-hint { font-size: .64rem; color: var(--text-faint); text-align: center; padding: 8px 14px 12px; margin-top: auto; }

/* ── 7c. FOTO + MOLDURA (mesma técnica calibrada de css/ranking.css) ── */
.pvpon-frame { position: relative; overflow: hidden; flex-shrink: 0; border-radius: 8px; }
.pvpon-frame-moldura {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  object-fit: contain; z-index: 3; pointer-events: none;
}
.pvpon-frame-foto, .pvpon-frame-emoji {
  position: absolute; left: 15.7%; top: 16.0%; width: 67.1%; height: 67.1%;
  overflow: hidden; z-index: 1; object-fit: cover; object-position: center center;
}
.pvpon-frame-emoji {
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-950); color: var(--text-dim); font-weight: 800;
}
.moldura-estudante .pvpon-frame-foto, .moldura-estudante .pvpon-frame-emoji { left:20.2%; top:20.2%; width:58.9%; height:58.9%; }
.moldura-genin     .pvpon-frame-foto, .moldura-genin     .pvpon-frame-emoji { left:20.2%; top:20.7%; width:58.9%; height:60.0%; }
.moldura-chunin    .pvpon-frame-foto, .moldura-chunin    .pvpon-frame-emoji { left:17.6%; top:16.6%; width:64.1%; height:66.7%; }
.moldura-jonin     .pvpon-frame-foto, .moldura-jonin     .pvpon-frame-emoji { left:15.6%; top:15.6%; width:68.3%; height:68.6%; }
.moldura-anbu      .pvpon-frame-foto, .moldura-anbu      .pvpon-frame-emoji { left:15.7%; top:16.0%; width:67.1%; height:67.1%; }
.moldura-sannin    .pvpon-frame-foto, .moldura-sannin    .pvpon-frame-emoji { left:17.6%; top:13.7%; width:64.4%; height:69.7%; }
.moldura-akatsuki  .pvpon-frame-foto, .moldura-akatsuki  .pvpon-frame-emoji { left:15.3%; top:14.7%; width:68.9%; height:69.9%; }
.moldura-kage      .pvpon-frame-foto, .moldura-kage      .pvpon-frame-emoji { left:17.9%; top:19.0%; width:63.5%; height:66.0%; }
.moldura-jinchuuriki .pvpon-frame-foto, .moldura-jinchuuriki .pvpon-frame-emoji { left:15.1%; top:16.9%; width:69.0%; height:65.9%; }
.moldura-seis-caminhos .pvpon-frame-foto, .moldura-seis-caminhos .pvpon-frame-emoji { left:17.5%; top:15.0%; width:65.4%; height:68.9%; }
.moldura-otsutsuki .pvpon-frame-foto, .moldura-otsutsuki .pvpon-frame-emoji { left:20.4%; top:19.5%; width:60.9%; height:63.2%; }

.pvpon-frame.sm { width: 42px; height: 42px; }
.pvpon-frame-vazio {
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-950); border: 1px dashed var(--ink-line-strong);
  color: var(--text-faint); font-size: 1rem; font-weight: 800;
}
.pvpon-sa-vazio { opacity: .6; }
.pvpon-sa-vazio .pvpon-sa-player-nome { color: var(--text-faint); font-weight: 700; }

@media (max-width: 900px) {
  .pvpon-sa-3col, .pvpon-sa-3col-bottom { flex-direction: column; }
  .pvpon-sa-info-col { order: -1; }
}
.pvpon-btn-sair-sala {
  width: 100%; background: var(--ink-900); border: 1px solid var(--ink-line); color: var(--text-dim);
  font-family: var(--font-body); font-weight: 700; font-size: .78rem; border-radius: var(--radius-sm);
  padding: 9px; cursor: pointer;
}
.pvpon-btn-sair-sala:hover { border-color: var(--danger); color: var(--danger); }

/* ── 8. TELA DE CARREGAMENTO (dentro do modal único) ─────────── */
.pvpon-loading-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; margin: auto; }
.pvpon-loading-spinner { position: relative; width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; }
.pvpon-loading-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 4px solid #D9D5CC; border-top-color: var(--ember);
  animation: pvponSpin 1s linear infinite;
}
.pvpon-loading-icon { font-size: 2rem; }
.pvpon-loading-texto { font-family: var(--font-display); font-size: 1rem; color: #20212A; letter-spacing: .5px; }
.pvpon-loading-dots { display: flex; gap: 6px; }
.pvpon-loading-dots span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  animation: pvponDotPulse 1.1s ease-in-out infinite;
}
.pvpon-loading-dots span:nth-child(2) { animation-delay: .15s; }
.pvpon-loading-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes pvponSpin { to { transform: rotate(360deg); } }
@keyframes pvponDotPulse { 0%,100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* ── 9. TELA DE ESCOLHA DE DECK (PREPARAÇÃO) ────────────────── */
.pvpon-escolha-wrap {
  width: 100%; height: 100%; max-width: 1360px; margin: 0 auto;
  padding: 22px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto;
}
.pvpon-escolha-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.pvpon-escolha-header-left { display: flex; flex-direction: column; gap: 3px; }
.pvpon-escolha-titulo { font-family: var(--font-display); font-size: 1.3rem; color: #20212A; }
.pvpon-escolha-sub { font-size: .76rem; color: #666873; }
.pvpon-escolha-timer-wrap { text-align: right; }
.pvpon-escolha-timer-label { font-size: .62rem; color: #8b8f9a; font-weight: 800; letter-spacing: .5px; }
.pvpon-escolha-timer { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 700; }
.pvpon-escolha-timer-bar-bg { height: 6px; background: #EDE9DE; border-radius: 999px; overflow: hidden; }
.pvpon-escolha-timer-bar { height: 100%; background: linear-gradient(90deg, var(--success), var(--warning), var(--danger)); transition: width .4s linear; }

/* Times no topo da tela de escolha (mesma foto+moldura calibrada da sala) */
.pvpon-escolha-times { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
.pvpon-escolha-times .pvpon-sa-team-col { flex: 1 1 260px; }

.pvpon-escolha-body { display: flex; gap: 16px; flex-wrap: wrap; flex: 1; }
.pvpon-escolha-aside { flex: 0 0 270px; display: flex; flex-direction: column; gap: 12px; }
.pvpon-escolha-perfil {
  display: flex; align-items: center; gap: 10px;
  background: #F4F2ED; border: 1px solid #D9D5CC; border-radius: var(--radius); padding: 12px;
}
.pvpon-escolha-perfil-av {
  width: 42px; height: 42px; border-radius: 50%; background: #EDE9DE;
  border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; overflow: hidden; flex-shrink: 0;
}
.pvpon-escolha-perfil-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pvpon-escolha-perfil-nome { font-size: .84rem; font-weight: 800; color: #20212A; }
.pvpon-escolha-perfil-grad { font-size: .68rem; color: #8b8f9a; }
.pvpon-escolha-perfil-liga { font-size: .66rem; font-weight: 700; }

.pvpon-escolha-sel-count { font-size: .76rem; color: #666873; background: #F4F2ED; border: 1px solid #D9D5CC; border-radius: var(--radius-sm); padding: 9px 12px; }
.pvpon-escolha-sel-count strong { color: var(--gold-dim); font-family: var(--font-mono); }

.pvpon-escolha-deck-preview {
  background: #F4F2ED; border: 1px solid #D9D5CC; border-radius: var(--radius);
  padding: 10px; display: flex; flex-direction: column; gap: 6px; max-height: 190px; overflow-y: auto;
}
.pvpon-deck-item { font-size: .74rem; color: #666873; background: #FFFFFF; border: 1px solid #D9D5CC; border-radius: var(--radius-sm); padding: 6px 9px; }

.pvpon-escolha-confirmados { background: #F4F2ED; border: 1px solid #D9D5CC; border-radius: var(--radius); padding: 10px; flex: 1; overflow-y: auto; }
.pvpon-escolha-conf-titulo { font-size: .62rem; font-weight: 800; color: #8b8f9a; letter-spacing: .5px; margin-bottom: 8px; }
.pvpon-conf-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 4px; font-size: .76rem; }
.pvpon-conf-nome { color: #666873; }
.pvpon-conf-status.pvpon-conf-ok { color: #1e8449; }
.pvpon-conf-status.pvpon-conf-pendente { color: #8b8f9a; }

.pvpon-escolha-main { flex: 1 1 480px; min-width: 300px; display: flex; flex-direction: column; gap: 12px; }
.pvpon-escolha-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.pvpon-escolha-tab {
  background: #F4F2ED; border: 1px solid #D9D5CC; color: #666873;
  font-family: var(--font-body); font-weight: 700; font-size: .76rem; border-radius: 999px;
  padding: 7px 14px; cursor: pointer; display: flex; align-items: center; gap: 6px;
}
.pvpon-escolha-tab:hover { border-color: #c7c2b5; color: #20212A; }
.pvpon-escolha-tab.active { background: var(--chakra-dim); border-color: var(--chakra); color: #fff; }
.pvpon-escolha-tab-count { font-family: var(--font-mono); font-size: .66rem; opacity: .85; }

.pvpon-escolha-grid { display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.pvpon-escolha-empty { flex: 1 1 100%; text-align: center; padding: 40px 10px; color: #8b8f9a; font-size: .85rem; }

.pvpon-ej-card {
  flex: 0 1 108px; width: 108px;
  background: #F4F2ED; border: 2px solid #D9D5CC; border-radius: var(--radius);
  padding: 8px; cursor: pointer; text-align: center; transition: border-color .15s ease, transform .1s ease;
}
.pvpon-ej-card:hover { border-color: #c7c2b5; transform: translateY(-2px); }
.pvpon-ej-card.selecionado { border-color: #1e8449; background: rgba(30,132,73,.08); }
.pvpon-ej-card.hidden { display: none; }
.pvpon-ej-img-wrap { position: relative; width: 100%; height: 64px; background: #EDE9DE; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 6px; }
.pvpon-ej-img { width: 100%; height: 100%; object-fit: cover; }
.pvpon-ej-icon { font-size: 1.6rem; }
.pvpon-ej-check {
  position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #1e8449; color: #fff; font-size: .68rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.pvpon-ej-check.hidden { display: none; }
.pvpon-ej-nome { font-size: .66rem; font-weight: 700; color: #20212A; line-height: 1.25; min-height: 2.2em; }
.pvpon-ej-dano { font-size: .62rem; color: var(--ember); font-weight: 700; margin-top: 2px; }

.pvpon-escolha-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid #D9D5CC; }
.pvpon-escolha-footer-hint { font-size: .7rem; color: #8b8f9a; }
.pvpon-btn-confirmar-escolha {
  background: linear-gradient(135deg, var(--success), #24a86a); color: #06210f;
  font-family: var(--font-body); font-weight: 800; font-size: .84rem; border: none;
  border-radius: var(--radius-sm); padding: 11px 22px; cursor: pointer;
}
.pvpon-btn-confirmar-escolha:hover { filter: brightness(1.08); }

/* ── 10. "AGUARDANDO CONFIRMAÇÃO" — dentro do modal único ────── */
.pvpon-aguard-card {
  margin: auto;
  background: #F4F2ED; border: 1px solid var(--success); border-radius: var(--radius-lg);
  padding: 32px 40px; text-align: center; max-width: 360px; width: 90%;
  box-shadow: 0 0 40px rgba(53,212,136,.15);
}
.pvpon-aguard-icon { font-size: 2.6rem; margin-bottom: 10px; }
.pvpon-aguard-titulo { font-family: var(--font-display); font-size: 1.1rem; color: #1e8449; margin-bottom: 8px; }
.pvpon-aguard-sub { font-size: .82rem; color: #666873; margin-bottom: 12px; }
.pvpon-aguard-timer { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; margin-bottom: 10px; }
.pvpon-aguard-hint { font-size: .68rem; color: #8b8f9a; }

/* ── 11. TELA DE COMBATE (dentro do modal único) ─────────────── */
.pvpon-modal-body-combate { padding: 0 !important; position: relative; }
.pon-combate-content { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 0; flex: 1; }
.pon-combate { display: flex; flex-direction: column; gap: 14px; padding: 18px; flex: 1; min-height: 0; overflow-y: auto; }

.pon-combate-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pon-combate-topo-titulo { display: flex; flex-direction: column; gap: 2px; }
.pon-combate-titulo-linha1 { font-family: var(--font-display); font-size: 1rem; color: var(--gold); letter-spacing: .3px; }
.pon-combate-titulo-linha2 { font-size: .76rem; color: #cfd2da; }
.pon-combate-titulo-linha2 strong { color: #fff; }
.pon-btn-abandonar {
  background: rgba(255,77,94,.12); border: 1px solid var(--danger); color: var(--danger);
  border-radius: var(--radius-sm); padding: 5px 12px; cursor: pointer; font-size: .72rem;
  font-family: var(--font-body); font-weight: 800;
}
.pon-btn-abandonar:hover { background: rgba(255,77,94,.25); }

/* Layout de 3 colunas: Time A (foto/nick) | quadro da arena | Time B */
.pon-arena-3col { display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap; }
.pon-arena-col-time { flex: 0 1 220px; min-width: 190px; display: flex; flex-direction: column; gap: 8px; }
.pon-time-label { font-family: var(--font-display); font-size: .82rem; letter-spacing: .5px; color: #fff; }
.pon-time-label.time-a { color: var(--ember); }
.pon-time-label.time-b { color: var(--chakra); }

/* Quadro central: a imagem de fundo da arena, com os personagens dentro — o
   destaque principal da tela de combate. */
.pon-arena-quadro {
  flex: 2 1 480px; min-width: 320px; position: relative; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--ink-line-strong);
  aspect-ratio: 16 / 10; max-height: 620px;
}
.pon-combate-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  z-index: 0;
}
.pon-combate-bg-overlay {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(14,17,23,.3), rgba(10,12,17,.55));
}
.pon-standees-arena {
  position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-around;
  height: 100%; padding: 16px 14px 14px; gap: 10px;
}
.pon-standees-col { display: flex; align-items: flex-end; justify-content: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.pon-standees-vs {
  flex: 0 0 auto; align-self: center; font-family: var(--font-display); font-size: 1.05rem;
  color: var(--gold); background: rgba(20,22,28,.65); border: 1px solid var(--ink-line-strong);
  border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
}
.pon-standee { display: flex; flex-direction: column; align-items: center; gap: 4px; transition: filter .15s, transform .15s; }
/* As artes de batalha (img/arte_batalha) vêm em proporções bem diferentes
   entre si (personagens mais altos/estreitos vs. mais largos), mas o
   personagem preenche quase 100% de cada imagem — não sobra "moldura vazia"
   pra recortar. Por isso o box aqui usa altura fixa + aspect-ratio LARGO o
   bastante pra cobrir até a arte mais larga do acervo (a mais larga medida
   tem proporção ~1:1) — assim, com object-fit:contain, TODA imagem bate no
   teto de altura da caixa (nenhuma fica "largura-limitada" e mais baixa),
   e só a largura final varia de acordo com o formato de cada personagem.
   Não combinar isso com um max-width — senão o navegador volta a reduzir a
   altura pra caber na largura, que foi o bug da vez anterior. */
.pon-standee-img-wrap { height: 78%; aspect-ratio: 11 / 10; display: flex; align-items: flex-end; justify-content: center; }
.pon-standee-img { height: 100%; width: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.pon-standee-fallback {
  height: 100%; width: 100%; border-radius: var(--radius); background: rgba(20,22,28,.6);
  border: 1px solid var(--ink-line); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 2rem; color: var(--text-dim);
}
.pon-standee-bars { width: 92px; display: flex; flex-direction: column; gap: 2px; }
.pon-hp-bar-wrap.mini, .pon-ck-bar-wrap.mini { height: 7px; background: rgba(0,0,0,.5); border-radius: 999px; overflow: hidden; }
.pon-standee-hp-txt {
  font-family: var(--font-mono); font-size: .62rem; font-weight: 700; color: #fff; text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.pon-standee-nome {
  font-size: .68rem; font-weight: 800; color: #fff; background: rgba(20,22,28,.65);
  border-radius: 999px; padding: 2px 9px; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis;
}
.pon-standee.lado-a .pon-standee-nome { border: 1px solid var(--ember-dim); }
.pon-standee.lado-b .pon-standee-nome { border: 1px solid var(--chakra-dim); }
.pon-standee.turno-ativo .pon-standee-img { filter: drop-shadow(0 0 14px var(--success)) drop-shadow(0 6px 10px rgba(0,0,0,.5)); transform: translateY(-4px); }
.pon-standee.morto { opacity: .35; filter: grayscale(.8); }
.pon-standee.alvo-clicavel { cursor: pointer; }
.pon-standee.alvo-clicavel:hover .pon-standee-img,
.pon-standee.alvo-clicavel:hover .pon-standee-fallback { filter: drop-shadow(0 0 14px var(--danger)) drop-shadow(0 6px 10px rgba(0,0,0,.5)); transform: translateY(-4px); }
.pon-standee-hint {
  font-size: .6rem; color: #fff; font-weight: 800; background: rgba(255,77,94,.85);
  border-radius: 999px; padding: 1px 8px;
}

.pon-fighter-mini {
  display: flex; flex-direction: column; gap: 4px; background: #FFFFFF;
  border: 1px solid #D9D5CC; border-radius: var(--radius); padding: 10px; transition: border-color .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.pon-fighter-mini.sou-eu { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, 0 2px 8px rgba(0,0,0,.18); }
.pon-fighter-mini.turno-ativo { border-color: var(--success); box-shadow: 0 0 0 1px var(--success) inset, 0 2px 8px rgba(0,0,0,.18); }
.pon-fighter-mini.morto { opacity: .55; filter: grayscale(.6); }
.pon-fighter-mini.alvo-clicavel { cursor: pointer; border-color: var(--danger); }
.pon-fighter-mini.alvo-clicavel:hover { background: #fff0f1; }
.pon-fighter-mini-name { display: flex; align-items: center; gap: 8px; }
.pon-fighter-mini-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pon-fighter-mini-info > span:first-child { font-size: .76rem; font-weight: 700; color: #20212A; display: flex; align-items: center; gap: 5px; }
.tag-eu { font-size: .58rem; color: var(--gold-dim); border: 1px solid var(--gold); border-radius: 999px; padding: 0 5px; }
.turno-badge { color: var(--success); }
.morto-badge { opacity: .8; }
.pon-hp-bar-wrap { height: 6px; background: #EDE9DE; border-radius: 999px; overflow: hidden; }
.pon-hp-bar { height: 100%; transition: width .3s ease; }
.pon-hp-bar.orange-bar { background: linear-gradient(90deg, var(--ember), var(--gold)); }
.pon-hp-bar.blue-bar { background: linear-gradient(90deg, var(--chakra), #7fd8ff); }
/* Verde pro time inimigo — evita confundir com o azul da barra de chakra. */
.pon-hp-bar.green-bar { background: linear-gradient(90deg, #1e8449, var(--success)); }
.pon-hp-txt { font-family: var(--font-mono); font-size: .62rem; color: #666873; }
.pon-ck-bar-wrap { height: 5px; background: #EDE9DE; border-radius: 999px; overflow: hidden; margin-top: 1px; }
.pon-ck-bar { height: 100%; background: linear-gradient(90deg, var(--chakra-dim), var(--chakra)); transition: width .3s ease; }
.pon-ck-txt { font-family: var(--font-mono); font-size: .6rem; color: var(--chakra-dim); }
.pon-alvo-hint { font-size: .64rem; color: var(--danger); font-weight: 700; text-align: center; }

.pon-log-titulo { font-family: var(--font-display); font-size: .78rem; color: var(--gold); letter-spacing: .3px; }
.pon-log { background: rgba(20,22,28,.55); border: 1px solid var(--ink-line); border-radius: var(--radius); padding: 10px 12px; max-height: 130px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.pon-log-line { font-size: .72rem; color: #d6d8de; }

.pon-acoes { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; background: #F4F2ED; border: 1px solid #D9D5CC; border-radius: var(--radius); padding: 14px; }
.pon-acoes-titulo { font-size: .82rem; font-weight: 800; color: #20212A; }
.pon-acoes-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pon-btn {
  background: #FFFFFF; border: 1px solid #D9D5CC; color: #20212A;
  border-radius: var(--radius-sm); padding: 9px 16px; cursor: pointer; font-size: .78rem;
  font-family: var(--font-body); font-weight: 700; display: inline-flex; align-items: center; gap: 6px;
}
.pon-btn:hover:not(:disabled) { border-color: var(--chakra); }
.pon-btn-ataque { border-color: var(--ember-dim); }
.pon-btn-danger { border-color: var(--danger); color: var(--danger); background: #fff0f1; }
.pon-btn-primary { background: linear-gradient(135deg, var(--chakra), var(--chakra-dim)); border: none; color: #fff; }
.pon-btn-jutsu { flex-direction: column; align-items: center; gap: 4px; min-width: 96px; }
.pon-btn-jutsu.pon-jutsu-cd { opacity: .5; cursor: not-allowed; }
.pon-jutsu-img { width: 30px; height: 30px; object-fit: cover; border-radius: var(--radius-sm); }
.pon-jutsu-emoji { font-size: 1.2rem; }
.pon-jutsu-dano { font-family: var(--font-mono); font-size: .62rem; color: var(--danger); }
.pon-jutsu-cd-badge { font-size: .6rem; color: #96702b; }
.pon-aguardando { text-align: center; font-size: .82rem; color: #666873; padding: 10px; background: #F4F2ED; border: 1px solid #D9D5CC; border-radius: var(--radius); }

.pon-resultado { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 16px; background: #F4F2ED; border: 1px solid #D9D5CC; border-radius: var(--radius); }
.pon-vitoria, .pon-derrota { font-family: var(--font-display); font-size: 1.3rem; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pon-vitoria { color: #1e8449; }
.pon-derrota { color: var(--danger); }
.pon-pdl-delta { font-family: var(--font-mono); font-size: 1rem; font-weight: 700; }
.pon-pdl-delta.positivo { color: #1e8449; }
.pon-pdl-delta.negativo { color: var(--danger); }
.pon-liga-popup { font-size: .8rem; font-weight: 700; padding: 8px 14px; border-radius: var(--radius-sm); }
.pon-liga-popup.promovido { background: rgba(53,212,136,.12); color: #1e8449; border: 1px solid var(--success); }
.pon-liga-popup.rebaixado { background: rgba(255,77,94,.12); color: var(--danger); border: 1px solid var(--danger); }

/* ── 12. RESPONSIVO ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .pvpon-col-esq { flex: 1 1 100%; }
  .pvpon-col-central { flex: 1 1 100%; }
  .pvpon-escolha-aside { flex: 1 1 100%; order: 2; }
  .pvpon-escolha-main { flex: 1 1 100%; order: 1; }
  .pvpon-arena-wide { max-width: 96vw; }
}
@media (max-width: 640px) {
  .pvpon-page-head { padding: 14px; }
  .pvpon-page-title h1 { font-size: 1.35rem; }
  .pvpon-sala-card { flex: 1 1 100%; max-width: none; }
  .pvpon-ej-card { flex: 1 1 90px; width: 90px; }
  .pvpon-criar-row { flex-direction: column; }
  .pvpon-vis-toggle { flex-direction: column; }
  .pon-arena-3col { flex-direction: column; }
  .pon-arena-quadro { aspect-ratio: 4 / 3; max-height: 260px; }
}

/* ── 13. RESERVADO — EXPANSÕES FUTURAS ──────────────────────── */
/* Espectadores: quando existir, um botão "👁 Assistir" pode ser
   adicionado a .pvpon-sala-card-acao e um modo somente-leitura de
   .pvpon-sa-* pode reutilizar toda a estrutura de times já pronta.
   Torneios: uma nova aba ao lado dos filtros de modo/visibilidade
   (mesma classe .pvpon-chip) pode alternar para uma futura
   .pvpon-torneio-grid sem tocar no layout do lobby.
   Histórico de partidas: um novo card lateral (mesmo padrão visual
   de .pvpon-chat-card) pode ser adicionado a .pvpon-col-esq listando
   partidas recentes, usando os já existentes .liga-badge/.pvpon-modo-badge. */