/* CONQUISTA DE TERRITÓRIO DAS GUILDAS (03/11, SQL 2070) — src/ui/territorio-ui.js. Prévia aprovada (tela C). */
.tr-faixa{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 2px;padding:6px 10px;border-radius:10px;border:1px solid rgba(255,196,92,.45);background:linear-gradient(90deg,rgba(80,52,10,.85),rgba(20,14,6,.75));color:#f3dfb2;font-weight:700;font-size:calc(12px * var(--text-scale, 1));position:relative;z-index:5}
.tr-faixa[hidden]{display:none}
.tr-faixa img.tr-flag{width:26px;height:26px;object-fit:contain;flex:none}
.tr-faixa .tr-cr{width:22px;height:22px;display:inline-flex;flex:none}
.tr-faixa .tr-cr svg{width:22px;height:22px}
.tr-faixa b{color:#ffcf6e;letter-spacing:.04em}
.tr-faixa small{display:block;font-weight:600;font-size:calc(11px * var(--text-scale, 1));color:#cfe9b9;overflow-wrap:anywhere}
.tr-faixa.fora{border-color:rgba(255,110,90,.5);background:linear-gradient(90deg,rgba(70,18,12,.88),rgba(20,10,8,.78))}
.tr-faixa.fora small{color:#ffc2b3}
.tr-faixa.livre{border-color:rgba(160,255,190,.4);background:linear-gradient(90deg,rgba(18,52,30,.85),rgba(8,20,12,.75))}
.tr-faixa.tr-fortaleza{box-shadow:0 0 0 1px rgba(255,207,110,.55),0 0 14px rgba(255,190,80,.3)}
.tr-faixa .tr-txt{flex:1 1 100px;min-width:0;line-height:1.25}
.tr-ajuda{appearance:none;flex:none;width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,215,140,.45);background:rgba(0,0,0,.35);color:#ffcf6e;font-weight:900;font-size:12px;cursor:var(--cur-mao,pointer);padding:0}
.tr-forte-selo{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:5px;background:#ffcf6e;color:#24160a !important;font-weight:900;font-size:calc(9.5px * var(--text-scale, 1));letter-spacing:.08em;vertical-align:1px}
.tr-btn{appearance:none;border:1px solid #d9a441;background:linear-gradient(180deg,#e2b453,#a8741f);color:#24160a;font-weight:900;font-size:calc(11px * var(--text-scale, 1));letter-spacing:.06em;padding:7px 12px;border-radius:8px;white-space:nowrap;cursor:var(--cur-mao,pointer)}
.tr-btn[disabled]{opacity:.5;cursor:var(--cur-seta,default)}
.tr-btn.sec{background:rgba(0,0,0,.4);color:#f0d9a8;border-color:rgba(255,215,140,.35)}
.tr-btn.perigo{background:rgba(60,10,10,.5);color:#ff9d8a;border-color:rgba(255,110,90,.5)}
.tr-btn:focus-visible,.tr-ajuda:focus-visible,.tr-abas button:focus-visible,.tr-esc label:focus-visible{outline:2px solid #ffcf6e;outline-offset:2px}

/* Mapa do Mundo */
/* 04/11: o dono é a 1ª linha do texto do cartão (antes ficava no canto, por cima do selo do mapa) */
.mundo-regiao .tr-mundo-dono{justify-self:start;display:flex;flex-wrap:wrap;align-items:center;gap:4px;max-width:100%;min-width:0;margin-bottom:2px}
.tr-mundo-sel{display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:100%;padding:2px 7px 2px 3px;border-radius:10px;background:rgba(20,12,4,.88);border:1px solid rgba(255,196,92,.6);color:#ffcf6e;font-weight:800;font-size:calc(10px * var(--text-scale, 1));line-height:1.25;text-shadow:none}
/* nome comprido quebra em 2 linhas dentro da etiqueta (nunca corta com ...) */
.tr-mundo-sel .tr-mundo-nome{min-width:0;overflow-wrap:anywhere}
.tr-mundo-sel svg{width:16px;height:16px;flex:none}
.tr-mundo-sel.outra{border-color:rgba(120,170,255,.6);color:#b9d3ff}
.tr-mundo-sel.imune{border-color:rgba(160,255,190,.6);color:#bff5cf}
.tr-mundo-imune{display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;background:rgba(6,24,12,.88);border:1px solid rgba(160,255,190,.6);color:#bff5cf;font-weight:800;font-size:calc(10px * var(--text-scale, 1));line-height:1.25;white-space:nowrap}
.tr-mundo-sel.tr-mundo-forte-selo{padding:2px 7px;background:#ffcf6e;color:#24160a;border-color:#ffcf6e;letter-spacing:.08em}
.mundo-regiao.tr-mundo-forte{box-shadow:0 0 0 1px rgba(255,207,110,.7),0 0 14px rgba(255,190,80,.35)}

/* Tela da guilda */
.tr-sub{padding:4px 0 6px;color:#e9dcc0}
.tr-topo{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.tr-topo img{width:46px;height:46px;object-fit:contain}
.tr-topo>div{flex:1 1 180px;min-width:0}
.tr-topo h3{margin:0;color:#ffcf6e;font-size:calc(20px * var(--text-scale, 1))}
.tr-topo p{margin:2px 0 0;color:#bfae8d;font-size:calc(12.5px * var(--text-scale, 1))}
.tr-voltar{white-space:nowrap}
.tr-abas{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.tr-abas button{appearance:none;border:1px solid rgba(255,215,140,.25);background:rgba(0,0,0,.35);color:#cdb98f;font-weight:800;font-size:calc(11px * var(--text-scale, 1));letter-spacing:.06em;padding:7px 12px;border-radius:8px;cursor:var(--cur-mao,pointer)}
.tr-abas button.on{background:linear-gradient(180deg,#5a4013,#2c1f08);color:#ffcf6e;border-color:#d9a441}
.tr-aviso{margin:0 0 10px;padding:8px 10px;border-radius:9px;background:rgba(255,196,92,.1);border:1px solid rgba(255,196,92,.3);color:#ffdf9e;font-size:calc(12.5px * var(--text-scale, 1))}
.tr-vazio{color:#a99877;font-size:calc(13px * var(--text-scale, 1))}
.tr-nota{display:block;margin:8px 0 0;color:#bfae8d;font-size:calc(12px * var(--text-scale, 1));line-height:1.4}
.tr-rot{font-weight:800;font-size:calc(10.5px * var(--text-scale, 1));letter-spacing:.08em;color:#c9b48a;margin-top:2px}
.tr-tesouro{border:1px solid rgba(255,196,92,.45);border-radius:12px;background:linear-gradient(180deg,rgba(90,62,14,.55),rgba(20,14,6,.7));padding:12px;display:grid;gap:8px;margin-bottom:12px;font-size:calc(12.5px * var(--text-scale, 1))}
.tr-tesouro h4{margin:0;color:#ffcf6e;font-size:calc(15px * var(--text-scale, 1));display:flex;align-items:center;gap:8px}
.tr-tesouro h4 img{width:26px}
.tr-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:8px}
.tr-cx{display:flex;gap:8px;align-items:center;padding:8px;border-radius:9px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08)}
.tr-cx img{width:34px;height:34px;object-fit:contain;flex:none}
.tr-cx b{display:block;color:#ffcf6e;font-size:calc(14px * var(--text-scale, 1))}
.tr-cx small{color:#bfae8d;font-size:calc(11.5px * var(--text-scale, 1))}
.tr-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.tr-slot{border:1px solid rgba(255,215,140,.28);border-radius:12px;background:linear-gradient(180deg,rgba(54,38,14,.6),rgba(10,8,6,.7));padding:12px;font-size:calc(12.5px * var(--text-scale, 1));display:flex;flex-direction:column;gap:8px;min-width:0}
.tr-slot.tr-fortaleza{border-color:#ffcf6e;box-shadow:0 0 14px rgba(255,190,80,.25)}
.tr-slot.vazio{border-style:dashed;align-items:center;justify-content:center;text-align:center;color:#a99877;min-height:160px}
.tr-slot.vazio img{width:54px;opacity:.75}
.tr-slot.vazio b{color:#d9c79f}
.tr-slot h4{margin:0;color:#ffcf6e;font-size:calc(15px * var(--text-scale, 1));display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tr-slot h4 img{width:24px}
.tr-slot h4 small{font-weight:800;font-size:calc(10px * var(--text-scale, 1));color:#c9b48a;letter-spacing:.06em;padding:2px 6px;border:1px solid rgba(255,215,140,.3);border-radius:6px}
.tr-slot h4 small.tr-forte-selo{border:0}
.tr-imune{display:inline-flex;align-items:center;gap:5px;color:#bff5cf;font-weight:800;font-size:calc(11px * var(--text-scale, 1))}
.tr-imune img{width:16px}
.tr-imune.tr-ouro{color:#ffcf6e}
.tr-imune.tr-perigo{color:#ff9d8a}
.tr-defs{display:flex;gap:8px;flex-wrap:wrap}
.tr-def{display:flex;align-items:center;gap:7px;flex:1 1 120px;min-width:0;padding:6px 8px;border-radius:9px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08)}
.tr-def img{width:30px;height:30px;object-fit:contain;flex:none}
.tr-def b{display:block;color:#f6e7c4;font-size:calc(12.5px * var(--text-scale, 1));overflow-wrap:anywhere}
.tr-def small{color:#a99877;font-size:calc(11px * var(--text-scale, 1))}
.tr-def.vago{border-style:dashed;color:#a99877;justify-content:center}
.tr-ganhos{display:flex;gap:6px;flex-wrap:wrap}
.tr-ganhos span{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.4);border:1px solid rgba(255,215,140,.2);font-weight:800;font-size:calc(11.5px * var(--text-scale, 1));color:#f3dfb2}
.tr-acoes{display:flex;gap:8px;flex-wrap:wrap}
.tr-reg{font-size:calc(12px * var(--text-scale, 1));color:#bfae8d;display:grid;gap:6px}
.tr-reg b{color:#ffcf6e}
.tr-leg{display:flex;gap:12px;flex-wrap:wrap;font-weight:700;font-size:calc(11px * var(--text-scale, 1));color:#bfae8d;margin-bottom:8px}
.tr-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.tr-c-minha{background:#c99a3a}.tr-c-outra{background:#4b78c9}.tr-c-forte{background:#ffcf6e;box-shadow:0 0 6px #ffcf6e}
.tr-quadro{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px;margin:4px 0 10px}
.tr-q{border-radius:8px;padding:6px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.07);font-weight:700;font-size:calc(11px * var(--text-scale, 1));color:#b5a483;display:flex;flex-direction:column;gap:3px;min-height:46px;min-width:0}
.tr-q b{color:#e9dcc0;font-size:calc(11px * var(--text-scale, 1));overflow-wrap:anywhere}
.tr-q .tr-q-dono{display:flex;align-items:center;gap:4px;font-size:calc(10.5px * var(--text-scale, 1));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-q .tr-q-dono svg{width:14px;height:14px;flex:none}
.tr-q.minha{border-color:rgba(255,196,92,.7);background:rgba(80,55,12,.5)}
.tr-q.minha .tr-q-dono{color:#ffcf6e}
.tr-q.outra{border-color:rgba(120,170,255,.5);background:rgba(18,30,60,.5)}
.tr-q.outra .tr-q-dono{color:#b9d3ff}
.tr-q.outra2{border-color:rgba(200,120,255,.5);background:rgba(40,18,60,.5)}
.tr-q.outra2 .tr-q-dono{color:#e0c0ff}
.tr-q.outra3{border-color:rgba(110,220,200,.5);background:rgba(10,45,40,.5)}
.tr-q.outra3 .tr-q-dono{color:#b5f0e4}
.tr-q.forte{border-color:#ffcf6e;box-shadow:0 0 0 1px rgba(255,207,110,.5),0 0 14px rgba(255,190,80,.35)}
.tr-rk{display:grid;gap:6px}
.tr-rk>div{display:grid;grid-template-columns:28px 22px 1fr auto;gap:8px;align-items:center;padding:7px 9px;border-radius:9px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.07);font-size:calc(12.5px * var(--text-scale, 1))}
.tr-rk>div.eu{border-color:#d9a441;background:rgba(80,55,12,.45)}
.tr-rk .p{font-weight:900;font-size:calc(14px * var(--text-scale, 1));color:#ffcf6e;text-align:center}
.tr-rk svg{width:22px;height:22px}
.tr-rk b{color:#f6e7c4}
.tr-rk small{color:#a99877;display:block;font-size:calc(11px * var(--text-scale, 1))}
.tr-rk .pt{font-weight:800;font-size:calc(13px * var(--text-scale, 1));color:#f6e7c4;font-variant-numeric:tabular-nums}

/* Janelas */
.tr-modal-fundo{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:100000;display:flex;align-items:center;justify-content:center;padding:12px}
.tr-modal{width:min(640px,100%);max-height:calc(100dvh - 24px);overflow:auto;border-radius:14px;border:1px solid rgba(255,215,140,.35);background:linear-gradient(180deg,#221a10,#0f0c09);box-shadow:0 20px 60px rgba(0,0,0,.6);padding:18px;color:#e9dcc0;font-size:calc(13px * var(--text-scale, 1))}
.tr-modal.tr-modal-luta{width:min(860px,100%)}
.tr-modal h2{margin:0 0 2px;color:#ffcf6e;font-size:calc(20px * var(--text-scale, 1));overflow-wrap:anywhere}
.tr-modal .tr-eye{font-weight:800;font-size:calc(10.5px * var(--text-scale, 1));letter-spacing:.14em;color:#c99a45}
.tr-visualizador{min-height:300px;margin-top:10px}
.tr-lados{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:start;margin:14px 0}
.tr-lado{border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px;background:rgba(0,0,0,.3);display:flex;flex-direction:column;gap:7px;min-width:0}
.tr-lado h5{margin:0;font-weight:800;font-size:calc(11px * var(--text-scale, 1));letter-spacing:.08em;color:#c9b48a;display:flex;align-items:center;gap:6px}
.tr-lado h5 svg{width:18px;height:18px;flex:none}
.tr-lado .tr-def{flex:none}
.tr-vs{align-self:center;justify-self:center}
.tr-vs img{width:40px}
.tr-regras{display:grid;gap:5px;padding:10px;border-radius:10px;background:rgba(255,196,92,.07);border:1px solid rgba(255,196,92,.2);font-size:calc(12.5px * var(--text-scale, 1))}
.tr-regras div{display:flex;gap:8px;align-items:flex-start}
.tr-regras img{width:18px;height:18px;flex:none}
.tr-rod{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
.tr-rod .tr-btn{padding:10px 18px;font-size:calc(12px * var(--text-scale, 1))}
.tr-esc{display:grid;gap:6px;max-height:300px;overflow:auto}
.tr-esc label{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);cursor:var(--cur-mao,pointer)}
.tr-esc label.on{border-color:#d9a441;background:rgba(80,55,12,.45)}
.tr-esc img{width:28px;height:28px;flex:none}
.tr-esc .tr-nm{flex:1;min-width:0}
.tr-esc .tr-nm b{display:block;color:#f6e7c4;overflow-wrap:anywhere}
.tr-esc .tr-nm small{color:#a99877}
.tr-esc .tr-ck{width:20px;height:20px;flex:none;border-radius:5px;border:2px solid #8a6b33;display:inline-flex;align-items:center;justify-content:center;color:#24160a;font-weight:900;font-size:13px}
.tr-esc label.on .tr-ck{background:#e2b453;border-color:#e2b453}
.tr-res{display:grid;gap:8px;margin:12px 0}
.tr-res>div{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;background:rgba(40,80,40,.25);border:1px solid rgba(140,230,150,.35)}
.tr-res>div.perdeu{background:rgba(90,24,18,.3);border-color:rgba(255,110,90,.4)}
.tr-res img{width:28px;flex:none}
.tr-res b{color:#d8f5c8;min-width:0;overflow-wrap:anywhere}
.tr-res .perdeu b{color:#ffc2b3}
.tr-res .ok{margin-left:auto;font-weight:900;font-size:calc(11px * var(--text-scale, 1));color:#9ff0a9;letter-spacing:.08em}
.tr-res .perdeu .ok{color:#ff9d8a}
.tr-grande{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin-top:6px}
.tr-grande img{width:96px}
.tr-passos{display:grid;gap:8px;margin:12px 0}
.tr-passo{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:10px;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.08)}
.tr-passo img{width:40px;height:40px;object-fit:contain;flex:none}
.tr-passo b{display:block;color:#ffcf6e;font-size:calc(13.5px * var(--text-scale, 1))}
.tr-passo span{color:#d9ccb0;font-size:calc(12.5px * var(--text-scale, 1));line-height:1.4}
/* 04/11: "Como funciona" mais largo que alto: 2 colunas no PC para caber na tela sem rolar */
.tr-modal.tr-modal-como{width:min(1060px,100%)}
@media (min-width:820px){.tr-modal-como .tr-passos{grid-template-columns:1fr 1fr}}

/* Chat GLOBAL: a linha do Território (chat-ui.js avisoPkNode) */
.col-chat-pk.col-chat-pk-territorio{border-left-color:#d9a441;background:linear-gradient(90deg,rgba(120,60,10,.35),rgba(60,30,10,.15))}
.col-chat-pk.col-chat-pk-territorio .col-chat-msg-head b{color:#ffcf6e}

@media (max-width:560px){
  .tr-lados{grid-template-columns:1fr}
  .tr-modal{padding:14px}
  .tr-faixa{padding:5px 8px;gap:6px;margin:4px 0}
  .tr-faixa img.tr-flag{width:20px;height:20px}
  .tr-faixa b{font-size:calc(10.5px * var(--text-scale, 1))}
  .tr-faixa small{font-size:calc(10px * var(--text-scale, 1))}
  .tr-faixa .tr-btn{flex:1 1 100%;padding:6px}
  .tr-topo h3{font-size:calc(17px * var(--text-scale, 1))}
  .tr-visualizador{min-height:240px}
}
/* 04/11 painel do Mapa do Mundo (opção A do autor): quem domina o mapa, em frases (territorio-ui.js painelDoMapa) */
.tr-painel{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:10px;background:#2b1c12;border:1px solid #7a3d2a}
.tr-painel.minha{background:#14261a;border-color:#3b7a4a}
.tr-painel.livre{background:#1d180f;border-color:#4a3a1c}
.tr-painel>img{flex:none;width:26px;height:26px;object-fit:contain}
.tr-painel>svg{flex:none;width:30px;height:30px}
.tr-painel>div{min-width:0;display:grid;gap:2px}
.tr-painel b{color:#fff;font-size:calc(13px * var(--text-scale, 1));overflow-wrap:anywhere}
.tr-painel b em{font-style:normal;font-weight:700;color:#9be3a5;font-size:calc(11px * var(--text-scale, 1))}
.tr-painel small{color:#c9b995;font-size:calc(11px * var(--text-scale, 1));line-height:1.35}
.tr-painel-forte{justify-self:start;padding:1px 7px;border-radius:999px;background:#ffcf6e;color:#24160a;font-size:calc(9px * var(--text-scale, 1));font-weight:900;letter-spacing:.06em}
.tr-painel small.tr-painel-como{margin-top:3px;padding-top:4px;border-top:1px solid rgba(255,255,255,.08);color:#e9c46a}
