/* A PRAÇA DO CASTELO (04/11, SQL 2074): 3 salas com 3 cenários (Pátio, Grande Salão, Bazar), heróis vestidos no chão e a
   troca direta. Tela cheia; no PC a troca fica numa coluna à direita, no celular sobe de baixo. Os heróis nunca saem do
   palco (praca-ui.js prende o lugar pela largura do herói). src/ui/praca-ui.js desenha; tests/praca-browser.mjs fotografa. */
.praca-janela{position:fixed;inset:0;z-index:9000;overflow:hidden;color:#f3e6c4;background:#120d08;font-size:14px;
  -webkit-tap-highlight-color:transparent}
.praca-janela[hidden]{display:none}
.praca-janela *{box-sizing:border-box}
.praca-fundo{position:absolute;inset:0;background:#1b140c center 62%/cover no-repeat}
.praca-fundo::after{content:"";position:absolute;inset:0;background:linear-gradient(#000a,#0000 18%,#0000 72%,#0009)}
.praca-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* topo */
.praca-topo{position:absolute;z-index:3000;left:0;right:0;top:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:max(8px,env(safe-area-inset-top)) 12px 8px;background:linear-gradient(#000d,#0000)}
.praca-topo h2 small{display:block;font-size:11px;letter-spacing:.06em;color:#e9dcb8;font-weight:600}
.praca-topo h2{margin:0;font-size:clamp(14px,3.6vw,20px);letter-spacing:.12em;text-transform:uppercase;color:#ffd77a;text-shadow:0 2px 4px #000;white-space:nowrap}
.praca-sala select{max-width:min(240px,46vw);background:#000b;color:#f3e6c4;border:1px solid #c9a24d99;border-radius:14px;padding:4px 8px;font:inherit;font-size:13px}
.praca-conta{white-space:nowrap;background:#0009;border:1px solid #5fd36d;color:#b8f5bf;border-radius:14px;padding:3px 10px;font-size:13px}
.praca-atalhos{display:flex;gap:6px;margin-left:auto}
.praca-atalho{background:#000a;color:#f3e6c4;border:1px solid #c9a24d99;border-radius:8px;padding:5px 10px;font:inherit;font-size:12px;font-weight:800;letter-spacing:.04em;cursor:var(--cur-mao,pointer)}
.praca-x{width:36px;height:36px;flex:none;border-radius:50%;background:#000a;border:1px solid #c9a24d;color:#fff;font-size:16px;cursor:var(--cur-mao,pointer)}

/* o chão */
/* 05/11 (jogador: "o baú ... na praça não funfa"): o chão cobre a camada dos NPCs (BAÚ, Máquina, Mercador), que vem antes
   e tem o mesmo z-index. O chão deixa o toque passar; só os heróis pegam o toque. */
.praca-palco{position:absolute;inset:0;z-index:1;pointer-events:none}
.praca-palco .praca-heroi{pointer-events:auto}
.praca-heroi{position:absolute;width:200px;height:240px;padding:0;border:0;background:none;color:inherit;cursor:var(--cur-mao,pointer);transform-origin:50% 100%}
.praca-corpo{position:absolute;inset:0;pointer-events:none}
.praca-corpo>*{position:absolute;left:50%;bottom:0;transform:translateX(-50%)}
/* 04/11 (autor: "meu pet virou mini pet"): o duelo desenha o pet numa caixa de 44 px; na Praça ele fica
   na mesma proporção da arena (pet ~ 1/4 da altura do herói, cada bicho com o tamanho dele). */
.praca-corpo .pvp-pet-companion{width:64px!important;height:64px!important}
/* a sombra de verdade é a dos duelos (COL_SOMBRA_HEROI, praca-ui.js); esta só acende o herói escolhido */
.praca-sombra{position:absolute;left:50%;bottom:-6px;width:120px;height:22px;transform:translateX(-50%);background:none;border-radius:50%}
.praca-nomes{position:absolute;inset:0;z-index:2000;pointer-events:none}
.praca-npc-rotulos{position:absolute;inset:0;z-index:1999;pointer-events:none}
.praca-npc-rotulos .praca-npc-nome{margin-top:0;transition:left .6s ease,top .6s ease}
.praca-npc-rotulos .praca-npc-nome.atacando{opacity:0}
.praca-nome{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;white-space:nowrap;line-height:1.15;
  padding:1px 6px;border-radius:6px;background:#0007;color:#fff;text-shadow:0 1px 2px #000}
.praca-nome b{font-size:12px}
.praca-nome small{font-size:10px;color:#ffd77a}
.praca-nome.eu b{color:#ffd77a}
.praca-nome.ocupado b::after{content:" ⇄";color:#9ad8ff}
.praca-heroi.sel .praca-sombra{background:radial-gradient(#ffd77a99,#0000 70%)}
.praca-heroi:focus-visible{outline:3px solid #ffd77a;outline-offset:4px;border-radius:12px}

/* menu do herói, lista "+N" e dica */
.praca-menu{position:absolute;z-index:3100;display:flex;flex-direction:column;gap:4px;min-width:180px;max-width:calc(100vw - 16px);padding:8px;
  border-radius:10px;background:linear-gradient(#2b1e10f5,#1a1209f5);border:1px solid #c9a24d;box-shadow:0 6px 24px #000c}
.praca-menu b{font-size:15px;color:#ffd77a}
.praca-menu small{color:#d9c89d;margin-bottom:4px}
.praca-menu .praca-menu-eu{max-width:200px;margin:4px 0 0;font-size:12px;line-height:1.3}
.praca-menu button,.praca-lista button{font:inherit;text-align:left;padding:8px 10px;border-radius:6px;border:1px solid #c9a24d55;background:#0006;color:#f3e6c4;cursor:var(--cur-mao,pointer);font-weight:700}
.praca-menu button:disabled{opacity:.55;cursor:var(--cur-seta,default)}
.praca-mais{position:absolute;z-index:3000;left:12px;top:64px;background:#000b;color:#ffd77a;border:1px solid #c9a24d;border-radius:14px;padding:5px 12px;font:inherit;font-weight:800;cursor:var(--cur-mao,pointer)}
.praca-lista{position:absolute;z-index:3100;left:12px;top:94px;width:min(280px,calc(100vw - 24px));max-height:50vh;overflow:auto;display:flex;flex-direction:column;gap:4px;
  padding:8px;border-radius:10px;background:#1a1209f5;border:1px solid #c9a24d}
.praca-lista b{color:#ffd77a}
.praca-lista small{color:#d9c89d;font-weight:400}
.praca-dica{position:absolute;z-index:2000;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);margin:0;max-width:calc(100% - 24px);
  padding:5px 12px;border-radius:12px;background:#000a;color:#e9dcb8;font-size:12px;text-align:center;pointer-events:none}
.praca-janela.trocando .praca-dica,.praca-dica.some{display:none}
.hidden.praca-menu,.hidden.praca-mais,.hidden.praca-lista,.hidden.praca-troca{display:none}

/* aviso */
.praca-aviso{position:absolute;z-index:3300;left:50%;top:62px;transform:translate(-50%,-8px);max-width:min(520px,calc(100% - 24px));padding:8px 14px;border-radius:10px;
  background:#1a1209f5;border:1px solid #c9a24d;color:#fff4d6;font-weight:700;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.praca-aviso.vis{opacity:1;transform:translate(-50%,0)}

/* a troca */
.praca-troca{position:absolute;z-index:3200;right:12px;top:60px;max-height:calc(100% - 72px);width:min(440px,calc(100% - 24px));overflow:auto;padding:12px;border-radius:12px;
  background:linear-gradient(#2b1e10f5,#1a1209f5);border:1px solid #c9a24d;box-shadow:0 6px 24px #000c}
.praca-troca h3{margin:0 0 8px;font-size:16px;color:#ffd77a;letter-spacing:.04em}
.praca-troca p{margin:0 0 8px}
.praca-lados{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.praca-lado{min-width:0;padding:8px;border-radius:8px;background:#0005;border:1px solid #c9a24d44}
.praca-lado.ok{border-color:#5fd36d;box-shadow:inset 0 0 0 1px #5fd36d55}
.praca-lado h4{margin:0 0 6px;font-size:13px;color:#f3e6c4}
.praca-lado h4 em{font-style:normal;color:#8fe39a;font-size:12px}
.praca-lado ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.praca-linha{display:flex;align-items:center;gap:6px;min-width:0}
.praca-ic{flex:none;width:36px;height:36px;border-radius:6px;background:#0007;display:grid;place-items:center}
.praca-ic img{max-width:32px;max-height:32px}
.praca-ln{min-width:0;flex:1;display:flex;flex-direction:column}
.praca-ln b{font-size:12px;overflow-wrap:anywhere}
.praca-ln small{font-size:11px;color:#d9c89d}
.praca-tirar{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid #c9a24d77;background:#0008;color:#fff;cursor:var(--cur-mao,pointer)}
.praca-vazio{color:#a99a7a;font-size:12px}
.praca-por{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.praca-por button{flex:1 1 auto;font:inherit;font-size:12px;font-weight:800;padding:6px 6px;border-radius:6px;border:1px solid #c9a24d88;background:#0006;color:#ffd77a;cursor:var(--cur-mao,pointer)}
.praca-esc{margin-top:8px;padding:8px;border-radius:8px;background:#0006;border:1px solid #c9a24d55;display:flex;flex-direction:column;gap:6px}
.praca-esc-itens{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:38vh;overflow:auto}
.praca-esc-itens button{width:100%;display:flex;align-items:center;gap:8px;text-align:left;font:inherit;padding:6px;border-radius:6px;border:1px solid #c9a24d44;background:#0006;color:#f3e6c4;cursor:var(--cur-mao,pointer)}
.praca-esc-itens img{width:36px;height:36px;object-fit:contain;flex:none}
.praca-esc-itens span{display:flex;flex-direction:column;min-width:0}
.praca-esc-itens small{font-size:11px;color:#d9c89d}
/* 05/11: o ◆ colorido da Marca de Região no canto do ícone (igual à mochila; cores em marca-regiao.css). Sem brilho. */
.praca-esc-itens .praca-esc-ic{position:relative;display:block;flex:none;width:36px;height:36px}
.praca-ic{position:relative}
.praca-marca{position:absolute;left:2px;bottom:1px;font-style:normal;font-size:12px;line-height:1;color:var(--mr,#d7a944);text-shadow:0 1px 1px #000;pointer-events:none}
.praca-joias{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:4px}
.praca-joias button{display:flex;flex-direction:column;align-items:center;gap:2px;font:inherit;font-size:11px;padding:6px 4px;border-radius:6px;border:1px solid #c9a24d44;background:#0006;color:#f3e6c4;cursor:var(--cur-mao,pointer);text-align:center}
.praca-joias button.sel{border-color:#ffd77a;background:#c9a24d33}
.praca-joias img{width:28px;height:28px}
.praca-joias small{color:#d9c89d}
.praca-qtd{display:flex;gap:6px}
.praca-qtd input{flex:1;min-width:0;font:inherit;padding:6px 8px;border-radius:6px;border:1px solid #c9a24d88;background:#000a;color:#fff}
.praca-nota{font-size:12px;color:#d9c89d;margin-top:8px!important}
.praca-botoes{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.praca-ok,.praca-sec,.praca-volta{font:inherit;font-weight:800;border-radius:6px;padding:8px 12px;cursor:var(--cur-mao,pointer);border:0}
.praca-ok{background:linear-gradient(#e0b25a,#9c6b1e);color:#1a1006}
.praca-ok:disabled{opacity:.6;cursor:var(--cur-seta,default)}
.praca-sec,.praca-volta{background:#0006;color:#f3e6c4;border:1px solid #c9a24d88}
.praca-volta{align-self:flex-start;padding:5px 10px;font-size:12px}
.praca-janela.ocupado .praca-troca button,.praca-janela.ocupado .praca-menu button{pointer-events:none;opacity:.7}

/* o botão PRAÇA da barra de cima (04/11: no lugar do PVP, que foi para o MAIS) */
.nav-praca.hidden{display:none}

/* celular: a troca sobe de baixo; o topo encolhe */
@media (max-width:760px){
  .praca-atalhos{order:5;margin-left:0;width:100%}
  .praca-atalho{flex:1}
  .praca-x{margin-left:auto}
  .praca-conta{display:none}
  .praca-topo h2{letter-spacing:.04em}
  .praca-troca{left:8px;right:8px;width:auto;top:auto;bottom:max(8px,env(safe-area-inset-bottom));max-height:64dvh}
}
@media (max-height:480px) and (orientation:landscape){
  .praca-atalhos{order:0;width:auto;margin-left:auto}
  .praca-troca{left:auto;right:8px;top:52px;bottom:auto;width:min(420px,58vw);max-height:calc(100% - 60px)}
}

/* 04/11 (autor: "verifique se a horda não fica rolando no fundo pra dar lag"): com a Praça aberta o jogo de trás não é
   pintado, como no Mapa do Mundo e na Montaria; a horda segue lutando e rendendo. html.col-com-praca: praca-ui.js */
html.col-com-praca #gameShell{visibility:hidden}
/* 04/11 (autor): o jogo escondido ainda ocupava a página e dava para rolar "o nada"; o chat ficava atrás da Praça. */
html.col-com-praca,html.col-com-praca body{overflow:hidden!important}
html.col-com-praca #colChatPanel{z-index:9500!important}
html.col-com-praca .col-chat-menu{z-index:9600!important}

/* 04/11 (autor): BAÚ e Máquina do Caos parados no cenário (NPCs), como no MU. Com a Praça aberta para o herói
   (html.col-praca-viva, praca-ui.js) eles saem do MAIS e do Ferreiro. */
html.col-praca-viva #navMoreMenu [data-view="chest"],html.col-praca-viva #forgeTabMaquina{display:none!important}
.praca-npcs{position:absolute;inset:0;z-index:1;pointer-events:none}
.praca-npc{position:absolute;transform:translate(-50%,-100%);aspect-ratio:1/1;padding:0;border:0;background:none;cursor:var(--cur-mao,pointer);pointer-events:auto;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.praca-npc .praca-npc-arte,.praca-guarda .praca-npc-arte{position:relative;display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
/* 05/11: sombra igual à do herói (silhueta deitada pela luz da sala + mancha no pé) */
.praca-npc-sombra{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;transform-origin:50% 97%;filter:brightness(0) blur(1px);pointer-events:none;z-index:-1}
.praca-npc-contato{position:absolute;left:22%;right:22%;bottom:-3%;height:9%;pointer-events:none;z-index:-1}
.praca-npc-nome{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:2px;white-space:nowrap;font-size:11px;font-weight:800;letter-spacing:.06em;color:#ffd77a;
  background:#000b;border:1px solid #c9a24d88;border-radius:6px;padding:2px 7px}
.praca-npc:hover .praca-npc-arte,.praca-npc:focus-visible .praca-npc-arte,.praca-guarda:hover .praca-npc-arte{transform:scale(1.04)}
.praca-npc:focus-visible{outline:3px solid #ffd77a;outline-offset:4px;border-radius:12px}
/* 2083: o chat da sala. Balão em cima da cabeça; a linha de escrever embaixo (o botão do chat global fica no canto). */
.praca-baloes{position:absolute;inset:0;z-index:2100;pointer-events:none}
.praca-balao{position:absolute;transform:translate(-50%,-100%);max-width:min(240px,46vw);padding:6px 10px;border-radius:12px;background:#fff8e8;color:#2a1d0c;
  font-size:13px;line-height:1.3;font-weight:600;text-align:center;overflow-wrap:anywhere;box-shadow:0 3px 8px #0007;animation:pracaBalao .18s ease-out}
.praca-balao::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#fff8e8}
@keyframes pracaBalao{from{opacity:0;transform:translate(-50%,-90%)}to{opacity:1;transform:translate(-50%,-100%)}}
@media (prefers-reduced-motion:reduce){.praca-balao{animation:none}}
.praca-falar{position:absolute;z-index:2150;left:12px;bottom:max(10px,env(safe-area-inset-bottom));display:flex;gap:6px;width:min(440px,calc(100% - 96px))}
.praca-falar input{flex:1;min-width:0;font:inherit;font-size:14px;padding:8px 10px;border-radius:9px;border:1px solid #c9a24d99;background:#0b0806e6;color:#f3e6c4}
.praca-falar input::placeholder{color:#d9c89daa}
.praca-falar button{font:inherit;font-size:12px;font-weight:800;letter-spacing:.05em;padding:0 12px;border-radius:9px;border:1px solid #c9a24d;background:#c9a24d33;color:#ffd77a;cursor:var(--cur-mao,pointer)}
.praca-dica{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 48px)}
@media (max-width:760px){.praca-falar{left:8px;width:calc(100% - 84px)}}
html.col-com-praca .col-app-instalar{display:none!important}
/* 04/11: o Mercador Secreto mora na Praça; o menu dele abre por cima dela. */
html.col-com-praca .ms-veu{z-index:9700}
/* 2085: quem tem anúncio aberto no Mercado */
.praca-nome.vende b::after{content:" 💰";font-size:.9em}
.praca-menu-mercado{display:flex;flex-direction:column;gap:4px;margin-top:6px;padding-top:6px;border-top:1px solid #ffd77a33}
.praca-menu-mercado>small{color:#ffd77a;font-weight:800;letter-spacing:.06em}
.praca-menu .praca-anuncio{text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.praca-menu-mais{opacity:.8}
/* 2086: o guarda da Praça (vigia; com PK na sala, vai até o herói e bate) */
.praca-guarda{position:absolute;transform:translate(-50%,-100%);aspect-ratio:1/1;padding:0;border:0;background:none;font:inherit;color:inherit;isolation:isolate;pointer-events:auto;cursor:var(--cur-mao,pointer);transition:left .6s ease,top .6s ease}
.praca-guarda.atacando{pointer-events:none}
.praca-guarda .praca-npc-nome{left:50%;transform:translateX(-50%)}
.praca-guarda:focus-visible{outline:3px solid #ffd77a;outline-offset:4px;border-radius:12px}

.praca-guarda.golpe .praca-npc-arte{animation:praca-golpe .35s ease-out}
@keyframes praca-golpe{0%{transform:translateX(0) rotate(0)}40%{transform:translateX(12%) rotate(6deg)}100%{transform:translateX(0) rotate(0)}}
.praca-guarda-vidas{position:absolute;inset:0;z-index:2050;pointer-events:none}
.praca-vida{position:absolute;width:64px;height:7px;transform:translateX(-50%);border:1px solid #000;border-radius:4px;background:#2a0b0b;overflow:hidden}
.praca-vida i{display:block;height:100%;background:#d83a3a;transition:width .3s}
.praca-guarda-alerta{position:absolute;z-index:3300;left:50%;top:64px;transform:translateX(-50%);max-width:calc(100% - 24px);padding:8px 14px;border-radius:10px;
  border:1px solid #d83a3a;background:#2a0b0bee;color:#ffd9d9;font-weight:800;font-size:14px;text-align:center}
.praca-guarda-alerta.hidden{display:none}
@media (prefers-reduced-motion:reduce){.praca-guarda.golpe .praca-npc-arte{animation:none}.praca-guarda{transition:none}}
@media (max-width:760px) and (orientation:portrait){.praca-guarda-alerta{top:auto;bottom:84px;font-size:13px}}

/* 2093 (05/11): o chat da sala também na lateral, em cima do campo de falar. PC começa aberto; celular recolhido. */
.praca-chat{position:absolute;z-index:2140;left:12px;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 44px);width:min(440px,calc(100% - 96px));
  display:flex;flex-direction:column;border-radius:10px;border:1px solid #c9a24d66;background:#0b0806f0;color:#f3e6c4;overflow:hidden;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.praca-chat-cab{display:flex;align-items:center;gap:8px;width:100%;padding:5px 10px;border:0;background:#0006;color:#ffd77a;font:inherit;font-size:11px;font-weight:800;letter-spacing:.08em;text-align:left;cursor:var(--cur-mao,pointer)}
.praca-chat-cab span{flex:1}
.praca-chat-cab b{min-width:18px;padding:0 6px;border-radius:9px;background:#c9a24d;color:#1a1206;font-size:11px;text-align:center}
.praca-chat-cab b:empty{display:none}
.praca-chat-cab i{font-style:normal}
.praca-chat-cab i::before{content:"▾"}
.praca-chat.fechado .praca-chat-cab i::before{content:"▴"}
.praca-chat-lista{height:min(180px,26vh);overflow-y:auto;overscroll-behavior:contain;padding:4px 10px 6px;font-size:13px;line-height:1.35}
.praca-chat.fechado{width:auto;max-width:min(440px,calc(100% - 96px))}
.praca-chat.fechado .praca-chat-lista{display:none}
.praca-chat-linha{margin:2px 0;overflow-wrap:anywhere}
.praca-chat-linha b{color:#ffd77a;font-weight:800;margin-right:4px}
.praca-chat-linha.minha b{color:#9fe0ff}
.praca-chat-vazio{margin:6px 0;color:#d9c89daa;font-style:italic}
@media (max-width:760px){.praca-chat{left:8px;width:calc(100% - 84px)}.praca-chat.fechado{max-width:calc(100% - 84px)}.praca-chat-lista{height:20vh;font-size:12.5px}}

/* 05/11 (autor: "olha o mercador secreto ai, nem movimento ele tem"): os NPCs e o guarda respiram parados, cada um
   no seu tempo (a sombra fica no chão). O golpe do guarda continua por cima (classe .golpe). */
@keyframes praca-respira{0%,100%{transform:scale(1,1)}50%{transform:scale(1.012,1.028)}}
.praca-npc .praca-npc-arte,.praca-guarda .praca-npc-arte{transform-origin:50% 100%;animation:praca-respira 3.6s ease-in-out infinite}
.praca-npc-maquina .praca-npc-arte{animation-duration:3.1s;animation-delay:-1.2s}
.praca-npc-mercador .praca-npc-arte{animation-duration:4.2s;animation-delay:-2.1s}
.praca-guarda .praca-npc-arte{animation-duration:3.3s;animation-delay:-.7s}
.praca-npc-mural .praca-npc-arte{animation:none}   /* estátua de pedra não respira (05/11) */
.praca-npc:hover .praca-npc-arte,.praca-npc:focus-visible .praca-npc-arte,.praca-guarda:hover .praca-npc-arte{animation-play-state:paused;filter:brightness(1.12)}
@media (prefers-reduced-motion:reduce){.praca-npc .praca-npc-arte,.praca-guarda .praca-npc-arte{animation:none}}
/* 05/11 (autor: "precisamos por o mercador na praça tambem" + "nao existe botão pra 'voltar pra praça'") */
.praca-npc-mercado .praca-npc-arte{animation-duration:3.7s;animation-delay:-.6s}
.praca-voltar{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;padding:8px 14px;border-radius:9px;border:1px solid #c9a24d;background:#1a1208e6;color:#ffd77a;font:inherit;font-size:13px;font-weight:800;letter-spacing:.04em;cursor:var(--cur-mao,pointer)}
.praca-voltar:hover{background:#2a1d0c}
.praca-voltar span{font-size:15px;line-height:1}