/* ============================================================================
   PvP do CAMPEONATO na arena (core/raid.js + core/pvp.js) — classes .pvb-*
   spec: techterra-online-backend/docs/spec-campeonatos/CONTRATOS.md (3.2, 3.4, 3.6, 3.7)
   mock: techterra-online-backend/docs/mock-campeonato-batalha.html (telas Banco, Nocaute,
   Fim e Celular). Tudo aqui so' entra no ar com BANCO ou CAMPEONATO no payload: o PvP
   comum (time = em campo) nao usa nenhuma destas classes.
   ============================================================================ */

/* ---------- cabecalho: selo do campeonato, formato e placar ---------- */
.raid-tela .raid-selo-raid.pvb-selo {
    background: linear-gradient(180deg, rgba(201, 168, 76, .3), rgba(139, 105, 20, .3));
    border-color: rgba(243, 218, 156, .7);
    color: #f3da9c;
}
.raid-tela .pvb-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 999px; white-space: nowrap;
    font: 600 .68rem/1.5 'Cinzel', serif; letter-spacing: .06em;
    color: rgba(232, 216, 184, .92);
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(201, 168, 76, .4);
}
.raid-tela .pvb-chip b { color: #f3da9c; }

/* ---------- o adversario e o time dele (banco em silhueta ate' entrar) ---------- */
.raid-tela .pvb-op {
    position: absolute; top: 10px; left: 12px; z-index: 4;
    display: flex; align-items: center; gap: 9px;
    padding: 6px 10px 6px 6px; border-radius: 999px;
    background: rgba(12, 8, 5, .78);
    border: 1px solid rgba(255, 132, 110, .45);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    max-width: calc(100% - 24px);
}
.raid-tela .pvb-op-ret {
    width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
    object-fit: cover; object-position: top;
    border: 2px solid rgba(255, 132, 110, .7); background: #2a1a10;
}
.raid-tela .pvb-sem-ret { display: inline-grid; place-items: center; font-size: 1rem; color: rgba(232, 216, 184, .6); }
.raid-tela .pvb-op-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.raid-tela .pvb-op-txt b {
    font: 600 .82rem 'Cinzel', serif; color: #f6ead0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.raid-tela .pvb-op-ia {
    font: 600 .62rem 'Cinzel', serif; letter-spacing: .1em; text-transform: uppercase;
    color: #ff9b8a; white-space: nowrap;
}
.raid-tela .pvb-op-time {
    display: flex; gap: 4px; padding-left: 8px; margin-left: 2px;
    border-left: 1px solid rgba(201, 168, 76, .25);
}
.raid-tela .pvb-op-mon {
    position: relative; width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
    display: grid; place-items: center; overflow: hidden;
    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(201, 168, 76, .35);
    font: 700 .8rem 'Cinzel', serif; color: rgba(232, 216, 184, .55);
}
.raid-tela .pvb-op-mon img,
.raid-tela .pvb-op-mon .shiny-wrapper { width: 100%; height: 100%; object-fit: cover; }
.raid-tela .pvb-op-mon .mon-fx-frame { display: none; }
.raid-tela .pvb-op-mon.em-campo { border-color: #ff9b8a; box-shadow: 0 0 8px rgba(255, 132, 110, .55); }
.raid-tela .pvb-op-mon.oculto { border-style: dashed; }
.raid-tela .pvb-op-mon.caido img { filter: grayscale(1) brightness(.55); }
.raid-tela .pvb-op-mon.caido::after {
    content: '\2715'; position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
    color: #ff6a55; font: 700 1rem system-ui, sans-serif; text-shadow: 0 0 3px #000;
}
.raid-tela .pvb-op-ok {
    font: 600 .66rem 'Cinzel', serif; letter-spacing: .06em; color: #9be3a6; white-space: nowrap;
}
/* 2x2 / 3x3: a grade dos inimigos desce pra pilula nao cobrir a arte do primeiro. */
.raid-tela .v1-arena:has(> .pvb-op) > .raid-inimigos { padding-top: 54px; }

/* ---------- o BANCO (coluna "No campo" do 3x3, com o contador de trocas) ---------- */
/* (so' na coluna com banco: "No campo" da Jornada, do PvP comum e da raid de grupo nao muda) */
.raid-tela .pvb-banco > .vgc-cap { display: flex; align-items: baseline; gap: 4px; }
.raid-tela .pvb-banco > .pvb-cap { margin-top: 4px; }
.raid-tela .pvb-trocas {
    margin-left: auto; padding-left: 8px;
    font: 600 .66rem 'Cinzel', serif; letter-spacing: .06em;
    color: rgba(232, 216, 184, .8); text-transform: none; white-space: nowrap;
}
.raid-tela .pvb-trocas b { color: #f3da9c; }
.raid-tela .vgc-ficha.pvb-ficha[role="button"] { cursor: pointer; }
.raid-tela .vgc-ficha.pvb-ficha[role="button"]:hover { border-color: rgba(201, 168, 76, .6); }
.raid-tela .vgc-ficha.pvb-ficha .l1 em { font-style: normal; }
.raid-tela .pvb-vai-entrar {
    border-color: #f3da9c !important;
    box-shadow: 0 0 0 1px rgba(243, 218, 156, .5), 0 0 14px rgba(243, 218, 156, .35);
}
.raid-tela .pvb-tag-entra {
    flex: 0 0 auto; padding: 1px 7px; border-radius: 999px;
    font: 700 .6rem 'Cinzel', serif; letter-spacing: .08em; text-transform: uppercase;
    color: #1a1208; background: linear-gradient(180deg, #f3da9c, #c9a84c);
}

/* ---------- "⇄ Trocar" com o contador ---------- */
.raid-tela .pvb-trocar-n {
    display: inline-grid; place-items: center;
    min-width: 18px; height: 18px; margin-left: 4px; padding: 0 4px; border-radius: 9px;
    font-size: .68rem; color: #1a1208; background: #c9a84c;
}
.raid-tela .raid-util.pvb-trocar:disabled .pvb-trocar-n { background: rgba(201, 168, 76, .45); }
.raid-tela .raid-util.pvb-trocar.pvb-declarada {
    border-color: #f3da9c;
    box-shadow: 0 0 0 1px rgba(243, 218, 156, .45), 0 0 12px rgba(243, 218, 156, .3);
}

/* ---------- faixa da rodada: quem caiu e espera substituto ---------- */
.raid-tela .pvp-jog.pvb-pendente {
    border-style: solid;
    border-color: rgba(255, 106, 85, .75);
    box-shadow: 0 0 10px rgba(255, 106, 85, .3);
    cursor: pointer;
}
.raid-tela .pvp-jog.pvb-pendente i { color: #ff9b8a; font-style: normal; }

/* ---------- quem caiu fica cinza ate' o substituto entrar ---------- */
.raid-tela .pvb-caido .mestrar-bn-fighter-img,
.raid-tela .pvb-caido .raid-sprite-img,
.raid-tela .pvb-caido .shiny-wrapper { filter: grayscale(1) brightness(.55); }
.raid-tela .mestrar-bn-fighter-jogador.pvb-caido .mestrar-bn-fighter-card { position: relative; }
.raid-tela .mestrar-bn-fighter-jogador.pvb-caido .mestrar-bn-fighter-card::after {
    content: 'Caiu'; position: absolute; left: 50%; top: 46%; z-index: 3;
    transform: translate(-50%, -50%) rotate(-8deg);
    padding: 3px 14px; border-radius: 6px; pointer-events: none;
    font: 700 .9rem 'Cinzel', serif; letter-spacing: .14em; text-transform: uppercase;
    color: #ffd8d0; background: rgba(120, 24, 16, .82);
    border: 1px solid rgba(255, 120, 100, .7);
}
.raid-tela .raid-boss-palco.pvb-caido { position: relative; }
.raid-tela .pvb-palco-aviso {
    position: absolute; left: 50%; top: 38%; z-index: 5;
    transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 20px; border-radius: 12px; text-align: center;
    background: rgba(10, 7, 4, .86);
    border: 1px solid rgba(255, 132, 110, .5);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
    max-width: 92%;
}
.raid-tela .pvb-palco-aviso b { font: 700 1rem 'Cinzel', serif; color: #ffb4a6; letter-spacing: .06em; }
.raid-tela .pvb-palco-aviso span { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: #f3e6c8; }
.raid-tela .pvb-palco-aviso .pvb-aviso-ret {
    width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
    object-fit: cover; object-position: top;
    border: 1px solid rgba(255, 132, 110, .7);
}
.raid-tela .pvb-palco-aviso small { font-size: .72rem; color: rgba(232, 216, 184, .6); }
.raid-tela .pvb-palco-aviso i { font-style: normal; color: #9be3a6; }
.raid-tela .pvb-entra-tag {
    margin-left: 6px; padding: 1px 7px; border-radius: 999px; vertical-align: 2px;
    font: 700 .58rem 'Cinzel', serif; letter-spacing: .08em; text-transform: uppercase;
    color: #1a1208; background: linear-gradient(180deg, #f3da9c, #c9a84c);
}

/* ---------- a troca na rodada: quem sai desce, quem entra sobe (dentro dos 4 s) ---------- */
.raid-tela .pvb-sai { animation: pvb-sai .5s cubic-bezier(.5, 0, .8, .4) both; }
.raid-tela .pvb-entra { animation: pvb-entra .6s cubic-bezier(.16, 1, .3, 1) both; }
.raid-tela .pvb-entra-brilho {
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: inset 0 0 0 2px rgba(243, 218, 156, .9), 0 0 26px rgba(243, 218, 156, .7);
    animation: pvb-brilho .9s ease-out both;
}
@keyframes pvb-sai { to { transform: translateY(46px) scale(.82); opacity: 0; filter: brightness(1.8); } }
@keyframes pvb-entra {
    from { transform: translateY(46px) scale(.82); opacity: 0; filter: brightness(2); }
    to { transform: none; opacity: 1; filter: none; }
}
@keyframes pvb-brilho { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .raid-tela .pvb-sai, .raid-tela .pvb-entra, .raid-tela .pvb-entra-brilho { animation: none; }
}

/* ---------- o seletor de troca/substituto (o .bn-pick-bd da selvagem) ---------- */
.pvb-pick-topo {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 0 0 10px; padding: 7px 10px; border-radius: 8px;
    background: rgba(0, 0, 0, .3); border: 1px solid rgba(201, 168, 76, .2);
    font-size: .8rem; color: rgba(232, 216, 184, .85);
}
.pvb-pick-topo > span:first-child { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pvb-pick-topo img {
    width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
    object-fit: cover; object-position: top;
    border: 1px solid rgba(255, 132, 110, .6);
}
.pvb-pick-topo b { color: #9be3a6; font-weight: 600; }
.pvb-pick-rel { font: 700 1rem 'Cinzel', serif; color: #f3da9c; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pvb-pick-rel b { color: inherit; font-weight: 700; }
.pvb-pick-rel small { font: 400 .66rem 'Lora', serif; color: rgba(232, 216, 184, .6); margin-left: 4px; }
.pvb-pick-rel.is-urgente { color: #ff8d7e; }
.pvb-tipos { display: inline-flex; gap: 3px; margin-left: auto; flex: 0 0 auto; }
.pvb-tipos img { width: 20px; height: 20px; object-fit: contain; }
.pvb-pick-bd .pick-active-row[data-pvb-k] { cursor: pointer; }
.pvb-pick-bd .pick-active-row[data-pvb-k]:focus-visible { outline: 2px solid #e8d38a; outline-offset: 2px; }

/* ---------- a escolha do time: lugar na ordem e o motivo da regra ---------- */
/* (o canto de baixo e' do "Nv." e o de cima a' esquerda e' o numero da ordem) */
.pvp-sel-card .pvb-sel-lugar {
    position: absolute; right: 4px; top: 6px; z-index: 3;
    padding: 1px 6px; border-radius: 999px;
    font: 700 .56rem 'Cinzel', serif; letter-spacing: .06em; text-transform: uppercase;
    color: #f3e6c8; background: rgba(0, 0, 0, .7); border: 1px solid rgba(201, 168, 76, .45);
}
.pvp-sel-card .pvb-sel-lugar.is-campo { color: #1a1208; background: linear-gradient(180deg, #f3da9c, #c9a84c); }
/* O `.is-fora` apaga o card INTEIRO (filtro no pai); aqui so' a arte e o nome apagam,
   pra o motivo continuar legivel em vermelho. */
.pvp-sel-card.is-fora.pvb-sel-regra { filter: none; opacity: 1; }
.pvp-sel-card.pvb-sel-regra .bestiary-card-img-wrap,
.pvp-sel-card.pvb-sel-regra .bestiary-card-bottom { filter: grayscale(.9) brightness(.55); }
.pvp-sel-card .pvb-sel-motivo {
    position: absolute; left: 6px; right: 6px; top: 34%; z-index: 3; transform: translateY(-50%);
    padding: 2px 5px; border-radius: 5px; text-align: center;
    font: 600 .6rem/1.25 'Lora', serif; color: #ffd8d0;
    background: rgba(120, 24, 16, .86); border: 1px solid rgba(255, 120, 100, .55);
    filter: none;
}
.pvp-sel-escolhido small { opacity: .75; font-size: .85em; }
/* "Só os que cabem" (campeonato): a pilula de regra da inscricao; o ✓ so' quando ligado. */
.pvp-sel-barra .pvb-cabem {
    cursor: pointer;
    border-color: rgba(76, 175, 125, .45); color: #b6e6cd; background: rgba(0, 0, 0, .25);
}
.pvp-sel-barra .pvb-cabem.on { border-color: #4caf7d; background: rgba(76, 175, 125, .18); color: #d5f5e3; }
.pvp-sel-barra .pvb-cabem:focus-visible { outline: 2px solid #e8d38a; outline-offset: 2px; }

/* ---------- fim: o desempate e o placar ---------- */
.pvb-desempate {
    margin: 2px 0 12px; padding: 12px 14px 10px; border-radius: 10px;
    background: rgba(0, 0, 0, .35); border: 1px solid rgba(201, 168, 76, .35);
}
.pvb-desempate-tit {
    margin-bottom: 10px; text-align: center;
    font: 600 .98rem/1.35 'Cinzel', serif; color: rgba(232, 216, 184, .92);
}
.pvb-desempate-tit b { color: #f3da9c; }
.pvb-placar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px 14px; align-items: center; }
.pvb-placar-lado { display: flex; align-items: center; gap: 8px; min-width: 0; font: 600 .86rem 'Cinzel', serif; color: #f3e6c8; }
.pvb-placar-lado.dir { flex-direction: row-reverse; text-align: right; }
.pvb-placar-lado > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvb-placar-ret { display: inline-grid; place-items: center; flex: 0 0 auto; }
.pvb-placar-img {
    width: 34px; height: 34px; border-radius: 50%;
    object-fit: cover; object-position: top;
    border: 2px solid rgba(201, 168, 76, .5); background: #2a1a10;
}
span.pvb-placar-img { display: inline-grid; place-items: center; font-size: .95rem; }
.pvb-placar-x { font: 700 .95rem/1 'Cinzel', serif; letter-spacing: .08em; color: #c9a84c; text-align: center; }
.pvb-placar-rot {
    font: 600 .62rem 'Cinzel', serif; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(232, 216, 184, .55); text-align: center; white-space: nowrap;
}
.pvb-placar-num { font: 700 1.7rem/1 'Cinzel', serif; color: rgba(232, 216, 184, .8); font-variant-numeric: tabular-nums; }
.pvb-placar-num.dir { text-align: right; }
.pvb-placar-num.ganha { color: #f3da9c; text-shadow: 0 0 14px rgba(255, 200, 90, .55); }
.pvb-placar-barra { display: flex; align-items: center; gap: 8px; font: 600 .82rem 'Cinzel', serif; color: rgba(232, 216, 184, .85); }
.pvb-placar-barra.dir { flex-direction: row-reverse; }
.pvb-placar-barra > span {
    flex: 1 1 auto; height: 9px; border-radius: 5px; overflow: hidden; display: flex;
    background: rgba(255, 255, 255, .08);
}
.pvb-placar-barra.dir > span { justify-content: flex-end; }
.pvb-placar-barra i {
    display: block; width: 0; height: 100%; border-radius: 5px;
    background: linear-gradient(90deg, #8b6914, #f3da9c);
}
.pvb-placar-barra.perde i { background: linear-gradient(90deg, #555, #9a9180); }
.pvb-placar-mons { display: flex; gap: 5px; flex-wrap: wrap; }
.pvb-placar-mons.dir { justify-content: flex-end; }
.pvb-pm {
    position: relative; width: 38px; height: 38px; border-radius: 7px; overflow: hidden; flex: 0 0 auto;
    display: grid; place-items: center;
    background: rgba(0, 0, 0, .55); border: 1px solid rgba(201, 168, 76, .25);
    font: 700 .85rem 'Cinzel', serif; color: rgba(232, 216, 184, .55);
}
.pvb-pm img, .pvb-pm .shiny-wrapper, .pvb-pm .bestiary-card-img { width: 100%; height: 100%; object-fit: cover; }
.pvb-pm .mon-fx-frame { display: none; }
.pvb-pm.oculto { border-style: dashed; }
.pvb-pm.ko img { filter: grayscale(1) brightness(.5); }
.pvb-pm.ko::after {
    content: '\2715'; position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
    color: #ff6a55; font: 700 1.1rem system-ui, sans-serif; text-shadow: 0 0 3px #000;
}
.pvb-pm i { position: absolute; left: 3px; right: 3px; bottom: 3px; height: 3px; border-radius: 2px; background: rgba(0, 0, 0, .6); }
.pvb-pm i b { display: block; height: 100%; border-radius: 2px; background: #6fd27f; }
.pvb-desempate-regra { margin-top: 9px; text-align: center; font-size: .74rem; color: rgba(232, 216, 184, .6); }
.pvb-avanca {
    margin: 10px 0 0; padding: 9px 12px; border-radius: 8px; text-align: center;
    font-size: .86rem; color: #f3e6c8;
    background: linear-gradient(90deg, transparent, rgba(201, 168, 76, .16), transparent);
    border-top: 1px solid rgba(201, 168, 76, .3); border-bottom: 1px solid rgba(201, 168, 76, .3);
}
.pvb-avanca b { color: #f3da9c; }
.pvb-avanca.fora { color: rgba(232, 216, 184, .8); background: rgba(0, 0, 0, .25); }
@media (max-width: 560px) {
    .pvb-placar { gap: 6px 8px; }
    .pvb-placar-num { font-size: 1.35rem; }
    .pvb-pm { width: 30px; height: 30px; }
    .pvb-placar-rot { white-space: normal; }
}

/* ---------- replay do campeonato: os controles na faixa da rodada ---------- */
.raid-tela .pvb-replay .pvb-replay-txt {
    display: flex; flex-direction: column; min-width: 0; line-height: 1.25;
    font-size: .78rem; color: rgba(232, 216, 184, .85);
}
.raid-tela .pvb-replay .pvb-replay-txt b { font: 700 .74rem 'Cinzel', serif; letter-spacing: .08em; color: #f3da9c; }
.raid-tela .pvb-replay .pvb-replay-txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.raid-tela .pvb-replay .pvp-faixa-fim { margin-left: auto; }

/* ---------- celular: o banco e' o "O seu time" da selvagem (toque para trocar) ---------- */
html[data-viewport="mobile"] .mestrar-submodal.raid-tela.raid-m .pvb-op { top: 6px; left: 6px; padding: 4px 8px 4px 4px; gap: 6px; }
html[data-viewport="mobile"] .mestrar-submodal.raid-tela.raid-m .pvb-op-ret { width: 30px; height: 30px; }
html[data-viewport="mobile"] .mestrar-submodal.raid-tela.raid-m .pvb-op-txt b { font-size: .72rem; }
html[data-viewport="mobile"] .mestrar-submodal.raid-tela.raid-m .pvb-op-mon { width: 24px; height: 24px; font-size: .7rem; }
html[data-viewport="mobile"] .mestrar-submodal.raid-tela.raid-m .pvb-m-banco .raid-m-time-cap { display: flex; align-items: baseline; }
html[data-viewport="mobile"] .mestrar-submodal.raid-tela.raid-m .raid-m-time-it.pvb-vai-entrar {
    outline: 2px solid #f3da9c; outline-offset: 1px;
}
/* o titulo precisa da linha: o formato sai do cabecalho e o selo vira so' o trofeu */
html[data-viewport="mobile"] .mestrar-submodal.raid-tela.raid-m .pvb-chip--formato,
html[data-viewport="mobile"] .mestrar-submodal.raid-tela.raid-m .pvb-selo .pvb-selo-txt { display: none; }
html[data-viewport="mobile"] .mestrar-submodal.raid-tela.raid-m .pvb-palco-aviso { top: 34%; padding: 9px 12px; max-width: 86%; }
html[data-viewport="mobile"] .mestrar-submodal.raid-tela.raid-m .pvb-palco-aviso b { font-size: .86rem; }
html[data-viewport="mobile"] .mestrar-submodal.raid-tela.raid-m .pvb-palco-aviso span { font-size: .76rem; }
html[data-viewport="mobile"] .mestrar-submodal.raid-tela.raid-m .v1-arena:has(> .pvb-op) > .raid-inimigos { padding-top: 40px; }
html[data-viewport="mobile"] .mestrar-submodal.raid-tela.raid-m .pvb-replay .pvb-replay-txt { display: none; }