/* =====================================================================
   PK nos mapas Hard e Hardcore (20/10, SQL 1952) — src/ui/pk-ui.js
   Botão PK no painel da área (ao lado do MUNDO), janela com 3 abas e a luta
   (reaproveita .gvg-ataque-fundo/.gvg-luta do style.css). As boas-vindas ao
   Hard reaproveitam o visual das do Hardcore (styles/hardcore-boas-vindas.css).
   ===================================================================== */
.pk-botao{position:relative;border-color:#7a2a22!important;background:linear-gradient(180deg,#3a1712,#1a0a08)!important;color:#ffb7a6!important}
.pk-botao:hover{border-color:#d0503c!important}
.pk-botao.hidden{display:none!important}
.pk-botao-icone{width:22px;height:22px;object-fit:contain;image-rendering:pixelated;flex:none}
.pk-botao-nivel{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#d0302a;color:#fff;font:900 calc(10px * var(--text-scale,1))/18px system-ui,sans-serif;text-align:center;box-shadow:0 0 0 2px #1a0a08}
.pk-botao-nivel[hidden]{display:none!important}
.estandarte .pk-botao{grid-column:1/-1}
/* 04/11 (foto do autor: "texto quebrado e fora de posição"): no PC a faixa "Só você farmando aqui" entrava na 2ª coluna,
   espremia o VOLTAR A AVANÇAR e ficava solta ao lado do MUNDO/PK. Ela vai sempre para uma linha inteira, embaixo dos botões. */
@media (min-width:641px){
  #monsterCard>.battle-zone-head.estandarte #pkMapaInfo{grid-column:1/-1;order:9;margin:0}
  #monsterCard>.battle-zone-head.estandarte #stageResumeButton{align-self:stretch}
}

.pk-fundo{z-index:3500}
.pk-fundo.hidden{display:none!important}
.pk-janela{width:min(560px,calc(100vw - 24px));max-height:min(88dvh,760px);display:flex;flex-direction:column;gap:10px;padding:14px;overflow:hidden;border:1px solid #7a2a22;border-radius:14px;background:linear-gradient(180deg,#1d0f0c,#0d0807);color:#ead8c0;box-sizing:border-box}
.pk-cab{display:flex;align-items:center;gap:10px}
.pk-cab-icone{width:40px;height:40px;object-fit:contain;image-rendering:pixelated;flex:none}
.pk-cab small{display:block;color:#c98b78;font-size:calc(10px * var(--text-scale,1));font-weight:800;letter-spacing:1px}
.pk-cab h2{margin:0;color:#ff8f78;font:900 calc(24px * var(--text-scale,1))/1 var(--font-display,Georgia,serif);letter-spacing:2px}
.pk-fechar{margin-left:auto}

.pk-eu{display:flex;flex-direction:column;gap:6px}
.pk-eu:empty{display:none}
.pk-eu-linha{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.pk-eu-linha b{color:#f3d58a;font-size:calc(14px * var(--text-scale,1))}
.pk-eu-linha span{color:#cdbb9c;font-size:calc(12px * var(--text-scale,1))}
.pk-eu-pk{border-color:#a3342a;background:rgba(160,40,30,.16)}
.pk-eu-pk b{color:#ff7a66}
.pk-limpar{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pk-limpar>span{color:#cdbb9c;font-size:calc(12px * var(--text-scale,1));font-weight:700}
.pk-nota{margin:0;color:#b9a689;font-size:calc(11.5px * var(--text-scale,1));line-height:1.35}
.pk-escudo{color:#9fd6ff}

.pk-btn{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 10px;border:1px solid #8a6a2e;border-radius:8px;background:linear-gradient(180deg,#3a2d16,#1d160b);color:#f3d58a;font:900 calc(11.5px * var(--text-scale,1)) var(--font-display,Georgia,serif);letter-spacing:.4px;cursor:var(--cur-mao,pointer);white-space:nowrap}
.pk-btn img{width:18px;height:18px;object-fit:contain;image-rendering:pixelated}
.pk-btn:hover{border-color:#d9a74a}
.pk-atacar{border-color:#a3342a;background:linear-gradient(180deg,#5a1a14,#2a0b08);color:#ffd0c4}
.pk-atacar:hover{border-color:#ff6a50}

.pk-abas{display:grid;gap:6px}
.pk-abas button{min-height:34px;padding:4px 6px;border:1px solid #4a3020;border-radius:8px;background:#160d0a;color:#b9a689;font:900 calc(11px * var(--text-scale,1)) var(--font-display,Georgia,serif);letter-spacing:.5px;cursor:var(--cur-mao,pointer);overflow-wrap:normal;word-break:keep-all;line-height:1.1}
.pk-abas button.ativa{border-color:#d0503c;background:linear-gradient(180deg,#4a1712,#22100c);color:#ffd0c4}

.pk-corpo{flex:1;min-height:120px;overflow:auto;display:flex;flex-direction:column;gap:8px;padding-right:2px}
.pk-vazio{padding:22px 10px;text-align:center;color:#a8957a;font-size:calc(12.5px * var(--text-scale,1))}
.pk-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pk-linha{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
.pk-nome{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pk-nome b{color:#f0e2c8;font-size:calc(13px * var(--text-scale,1));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-nome small{color:#a8957a;font-size:calc(11px * var(--text-scale,1));overflow-wrap:anywhere}
.pk-vermelho b{color:#ff5a48}
.pk-heroi b{color:#9fd6ff}
.pk-selo{flex:none;padding:2px 7px;border-radius:7px;background:#7a1c16;color:#ffe0d8;font:900 calc(10.5px * var(--text-scale,1)) system-ui,sans-serif;white-space:nowrap}
.pk-protegido{flex:none;color:#8f826e;font-size:calc(11px * var(--text-scale,1));font-weight:700;white-space:nowrap}
.pk-pos{flex:none;width:30px;color:#f3d58a;font-weight:900;font-size:calc(13px * var(--text-scale,1))}
.pk-valor{flex:none;color:#9fd6ff;font-weight:900;font-size:calc(14px * var(--text-scale,1))}
.pk-sub{display:flex;align-items:baseline;gap:8px;margin:6px 0 0;color:#ffb7a6;font:900 calc(14px * var(--text-scale,1)) var(--font-display,Georgia,serif);letter-spacing:.5px}
.pk-sub small{color:#a8957a;font:700 calc(11px * var(--text-scale,1)) system-ui,sans-serif}

/* Plano novo do PK (22/10): 4 abas, CAÇAR, PROCURADOS, MURAL e REGRAS (2 × 2 no celular estreito). */
.pk-abas{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:440px){.pk-abas{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pk-abas button[hidden]{display:none!important}
.pk-abas button{position:relative}
.pk-aba-conta{position:absolute;top:-7px;right:0;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#d0302a;color:#fff;font:900 calc(9.5px * var(--text-scale,1))/16px system-ui,sans-serif;text-align:center}
.pk-aba-conta[hidden]{display:none!important}
.pk-seq-eu{color:#f3d58a;font-weight:700}
.pk-selo-seq{background:#6a4a12;color:#ffe9b0}
.pk-mural-frase{color:#e6d6bc;font-size:calc(12.5px * var(--text-scale,1));overflow-wrap:anywhere}
.pk-mural-frase b{font-size:inherit;white-space:normal}
.pk-mural-venc{color:#f3d58a!important}
.pk-mural-perd{color:#c9b8a0!important}
.pk-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.pk-tag{padding:1px 6px;border-radius:6px;font:800 calc(10px * var(--text-scale,1)) system-ui,sans-serif;white-space:nowrap;background:#3a2a1a;color:#f0d9a8}
.pk-tag-vinganca{background:#6a1a16;color:#ffd0c4}
.pk-tag-quebra{background:#5a2a6a;color:#f0d0ff}
.pk-tag-virada{background:#1a4a5a;color:#c8f0ff}
.pk-tag-heroi{background:#1a3a6a;color:#cfe6ff}
.pk-linha.pk-meu{border-color:#8a6a2e}

/* Cabeça a prêmio (21/10, SQL 1730) */
.pk-cabeca-btn{flex:none;min-width:34px;justify-content:center;padding:4px 6px}
.pk-cabeca-btn img{width:20px;height:20px}
.pk-quadro .pk-nome b,.pk-linha-vinganca .pk-nome b{white-space:normal;overflow-wrap:anywhere}
.pk-premio{flex:none;display:inline-flex;align-items:center;gap:4px;color:#f3d58a;font-weight:900;font-size:calc(12.5px * var(--text-scale,1));white-space:nowrap}
.pk-premio img{width:18px;height:18px;object-fit:contain}
.pk-cabeca-eu{display:flex;align-items:center;gap:6px;color:#ffcf8a;font-weight:700}
.pk-cabeca-eu img{width:18px;height:18px;object-fit:contain;flex:none}
.pk-tag-cabeca{display:inline-flex;align-items:center;gap:3px;background:#5a4410;color:#ffe9b0}
.pk-tag-cabeca img{width:12px;height:12px;object-fit:contain}
.pk-form{display:flex;flex-direction:column;gap:10px}
.pk-form-campo{display:flex;flex-direction:column;gap:6px;color:#cdbb9c;font-size:calc(12.5px * var(--text-scale,1));font-weight:700}
.pk-form-entrada{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid #8a6a2e;border-radius:10px;background:#160d0a}
.pk-form-entrada img{width:22px;height:22px;object-fit:contain;flex:none}
.pk-form-entrada input{flex:1;min-width:0;border:0;background:transparent;color:#f3d58a;font:900 calc(16px * var(--text-scale,1)) system-ui,sans-serif;outline:none}
.pk-form-entrada:focus-within{border-color:#d9a74a}
.pk-form-chips{display:flex;flex-wrap:wrap;gap:6px}
.pk-form-botoes{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}

.pk-luta .gvg-luta-resultado{text-align:center}
.pk-luta .gvg-luta-resultado.pk-perdeu{color:#ff8f78}

@media (max-width:480px){
  .pk-janela{padding:12px 10px;max-height:92dvh}
  .pk-linha{flex-wrap:wrap}
  .pk-linha .pk-atacar,.pk-linha .pk-protegido{margin-left:auto}
  .pk-linha .pk-atacar+.pk-cabeca-btn,.pk-linha .pk-protegido+.pk-cabeca-btn{margin-left:0}
  .pk-form-botoes .pk-btn{flex:1;justify-content:center}
  .pk-limpar .pk-btn{flex:1;justify-content:center}
  .pk-abas button{letter-spacing:0;font-size:calc(10px * var(--text-scale,1));padding:4px 3px}
}

/* Celular (≤ 640 px, gaveta da área de styles/responsivo.css seção 32): o selo fechado não tem
   lugar para o botão; ele aparece na gaveta aberta, numa linha inteira abaixo de MUNDO. */
@media (max-width:640px){
  #gameShell #monsterCard>.battle-zone-head:not(.col-gaveta-aberta) #pkButton{display:none!important}
  #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #pkButton:not(.hidden){display:flex!important;grid-column:1/-1;grid-row:auto;order:6;width:100%!important;height:54px!important;
    margin:0!important;gap:8px;border-radius:12px!important;font-size:calc(14px * var(--text-scale,1))!important;letter-spacing:.5px}
  /* A faixa do mapa (1767) segue o botão: some com o selo fechado e fica embaixo dele na gaveta. */
  #gameShell #monsterCard>.battle-zone-head:not(.col-gaveta-aberta) #pkMapaInfo{display:none!important}
  #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #pkMapaInfo{grid-column:1/-1;grid-row:auto;order:7;margin:-4px 0 0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0}
  #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #pkMapaInfo::-webkit-scrollbar{display:none}
  #gameShell #monsterCard>.battle-zone-head.col-gaveta-aberta #pkMapaInfo span{flex:none}
}

/* Celular deitado (pouca altura): com as abas da rivalidade a lista ficava espremida;
   a janela inteira rola, em vez de só a lista (21/10, 1728). */
@media (max-height:460px){
  .pk-janela{overflow:auto}
  .pk-corpo{flex:none;overflow:visible;min-height:0}
}

/* COMO FUNCIONA (22/10): as regras do PK em cartões; o botão apagado fora do Hard */
.pk-como{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pk-como-item{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
.pk-como-item img{width:26px;height:26px;object-fit:contain;flex:none;margin-top:1px}
.pk-como-item div{min-width:0;display:flex;flex-direction:column;gap:2px}
.pk-como-item b{color:#ffb7a6;font-size:calc(13px * var(--text-scale,1))}
.pk-como-item span{color:#d6c4a8;font-size:calc(12px * var(--text-scale,1));line-height:1.4;overflow-wrap:anywhere}
.pk-botao.pk-botao-fora{opacity:.6;filter:saturate(.5)}

/* ---------------------------------------------------------------------
   Plano novo do PK (22/10, SQL 1767/1747)
   --------------------------------------------------------------------- */
/* Botão: quantos dá para atacar; vermelho piscando com PK no mapa */
.pk-botao-alvos{color:#ffd0c4;font:800 calc(10px * var(--text-scale,1)) system-ui,sans-serif;opacity:.9;white-space:nowrap}
.pk-botao-alvos[hidden]{display:none!important}
.pk-botao.pk-botao-alerta{animation:pk-alerta 1.6s ease-in-out infinite}
@keyframes pk-alerta{0%,100%{box-shadow:0 0 0 0 rgba(255,70,50,0)}50%{box-shadow:0 0 0 3px rgba(255,70,50,.55)}}
@media (prefers-reduced-motion:reduce){.pk-botao.pk-botao-alerta{animation:none;box-shadow:0 0 0 2px rgba(255,70,50,.6)}}
/* Faixa do painel da área: quantos farmam, quanto rende, PK e guerra */
.pk-mapa-info{display:flex;flex-wrap:wrap;gap:4px 6px;margin:4px 0 2px;cursor:var(--cur-mao,pointer)}
.pk-mapa-info[hidden]{display:none!important}
.pk-mapa-info span{padding:2px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.35);color:#e6d6bc;font:800 calc(10.5px * var(--text-scale,1)) system-ui,sans-serif;white-space:nowrap}
.pk-mapa-info .pk-info-rende{border-color:#8a6a2e;color:#f3d58a}
.pk-mapa-info .pk-info-alerta{border-color:#a3342a;background:rgba(120,25,18,.55);color:#ffd0c4}
.pk-mapa-info .pk-info-guerra{border-color:#7a3aa8;background:rgba(70,25,100,.55);color:#f0d0ff}
/* Cartão "Você" */
.pk-eu-protegido{border-color:#2f6a9a;background:rgba(40,90,140,.16)}
.pk-eu-protegido b{color:#9fd6ff}
/* CAÇAR */
.pk-linha-alvo .pk-nome b{white-space:normal;overflow-wrap:anywhere}
.pk-linha-guerra{border-color:#7a3aa8}
.pk-linha-vinganca{border-color:#a3342a}
.pk-tag-guerra{background:#4a1a6a;color:#f0d0ff}
/* Guilda do alvo (2001): o nome da guilda neutro; a sua em verde, e a linha mais apagada. */
.pk-tag-guilda{background:rgba(255,255,255,.08);color:#e6d6bc;border:1px solid rgba(255,255,255,.14);display:inline-block;vertical-align:bottom;max-width:14em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-tag-aliado{background:#1f5a2e;color:#d4ffd9}
.pk-linha-aliado{opacity:.82;border-color:rgba(90,190,110,.45)!important}
.pk-confirma-aliado{color:#ffcf9a;font-weight:800;border-left:3px solid #e0923a;padding-left:8px}
.pk-forca-forte{background:#6a1a16;color:#ffd0c4}
.pk-forca-parecido{background:#3a3a1a;color:#f0e6a8}
.pk-forca-fraco{background:#1a4a2a;color:#c8f0d0}
/* Antes de atacar */
.pk-confirma{display:flex;flex-direction:column;gap:10px}
.pk-confirma-quadros{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pk-confirma-quadro{display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035)}
.pk-confirma-quadro b{font:900 calc(13px * var(--text-scale,1)) var(--font-display,Georgia,serif);letter-spacing:.4px}
.pk-confirma-quadro span{color:#e0cfb2;font-size:calc(12px * var(--text-scale,1));line-height:1.35;overflow-wrap:anywhere}
.pk-confirma-ganha{border-color:#3a7a3a;background:rgba(40,110,50,.14)}
.pk-confirma-ganha b{color:#a8f0a0}
.pk-confirma-perde{border-color:#8a3a2e;background:rgba(140,50,40,.14)}
.pk-confirma-perde b{color:#ffb7a6}
.pk-confirma-pk{color:#f3d58a;font-weight:700}
@media (max-width:420px){.pk-confirma-quadros{grid-template-columns:1fr}}
/* Resultado da luta em linhas */
.pk-resultado{display:flex;flex-direction:column;align-items:center;gap:6px}
.pk-resultado-titulo{font:900 calc(18px * var(--text-scale,1)) var(--font-display,Georgia,serif);color:#a8f0a0;letter-spacing:1px}
.pk-resultado.pk-perdeu .pk-resultado-titulo{color:#ff8f78}
.pk-resultado ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;text-align:center}
.pk-resultado li{font-size:calc(13px * var(--text-scale,1));line-height:1.35;overflow-wrap:anywhere}
.pk-resultado .pk-resultado-mapa{color:#f3d58a}
/* Cartaz PROCURADO */
.pk-cartaz{flex-wrap:wrap;border-color:#8a6a2e;background:linear-gradient(180deg,rgba(90,68,16,.22),rgba(30,20,8,.2))}
.pk-cartaz-topo{flex:1 0 100%;color:#f3d58a;font:900 calc(11px * var(--text-scale,1)) var(--font-display,Georgia,serif);letter-spacing:2px}
.pk-cartaz.pk-meu .pk-cartaz-topo{color:#ff8f78}
.pk-cartaz .pk-premio{font-size:calc(15px * var(--text-scale,1))}
.pk-cartaz-pe{flex:1 1 100%;color:#b9a689;font-size:calc(10.5px * var(--text-scale,1))}
/* Aviso na tela para quem morreu */
.pk-derrota-fundo{position:fixed;inset:0;z-index:3600;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.55)}
.pk-derrota{width:min(420px,100%);display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;border:1px solid #a3342a;border-radius:14px;background:linear-gradient(180deg,#2a0f0b,#120806);color:#ead8c0;text-align:center;box-sizing:border-box}
.pk-derrota-icone{width:44px;height:44px;object-fit:contain;image-rendering:pixelated}
.pk-derrota h3{margin:0;color:#ffb7a6;font:900 calc(18px * var(--text-scale,1)) var(--font-display,Georgia,serif);overflow-wrap:anywhere}
.pk-derrota h3 b{color:#f3d58a}
.pk-derrota h3 b.pk-derrota-pk{color:#ff5a48}
.pk-derrota h3 b.pk-derrota-heroi{color:#9fd6ff}
.pk-derrota p{margin:0;color:#e0cfb2;font-size:calc(13px * var(--text-scale,1));line-height:1.4;overflow-wrap:anywhere}
.pk-derrota .pk-form-botoes{justify-content:center;margin-top:4px}
@media (max-width:480px){.pk-derrota .pk-form-botoes .pk-btn{flex:1;justify-content:center}}