/* MONSTERIDLE — Barra do time com as peças do tileset
   (mockups/barra-time/tileset-barra-time.png → assets/ui/barra-time/)
   Moldura e anel na cor do tipo principal, pílulas de tipo, placa de nível,
   barras de HP/EXP, ícones de status e indicadores (shiny, seta do ativo).
   Clicar na linha = tornar ativo; clicar no retrato = abrir a ficha. */

#barra-time{display:flex;flex-direction:column;gap:5px;margin-top:4px;padding-left:9px}

.bt2{position:relative;display:flex;align-items:center;gap:7px;min-height:62px;padding:6px 10px 6px 4px;
  border-style:solid;border-width:0;border-image-slice:18 fill;border-image-width:14px;border-image-repeat:stretch;
  border-image-source:url(../assets/ui/barra-time/moldura-cinza.png);
  cursor:pointer;transition:filter .12s, transform .12s;user-select:none}
.bt2:hover{filter:brightness(1.15)}
.bt2:active{transform:scale(.99)}
.bt2.cor-azul{border-image-source:url(../assets/ui/barra-time/moldura-azul.png)}
.bt2.cor-ouro{border-image-source:url(../assets/ui/barra-time/moldura-ouro.png)}
.bt2.cor-roxo{border-image-source:url(../assets/ui/barra-time/moldura-roxo.png)}
.bt2.cor-verde{border-image-source:url(../assets/ui/barra-time/moldura-verde.png)}
.bt2.cor-vermelho{border-image-source:url(../assets/ui/barra-time/moldura-vermelho.png)}
.bt2.cor-cinza{border-image-source:url(../assets/ui/barra-time/moldura-cinza.png)}
.bt2.ativo{filter:drop-shadow(0 0 6px rgba(34,211,238,.55))}
.bt2.ativo:hover{filter:drop-shadow(0 0 6px rgba(34,211,238,.55)) brightness(1.12)}
.bt2.desmaiado{cursor:not-allowed}

.bt2-seta{position:absolute;left:-11px;top:50%;width:11px;height:auto;transform:translateY(-50%);
  image-rendering:auto;animation:bt2-seta 1.2s ease-in-out infinite;pointer-events:none}
@keyframes bt2-seta{0%,100%{transform:translate(0,-50%)}50%{transform:translate(2px,-50%)}}

/* retrato redondo dentro do anel — é o único lugar que abre a ficha */
.bt2-ret{position:relative;flex:0 0 auto;width:50px;height:50px;margin-left:-2px;cursor:zoom-in}
.bt2-ret .bt2-fundo{position:absolute;inset:6px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,rgba(56,90,140,.55),rgba(6,14,28,.95) 70%)}
.bt2-ret .bt2-poke{position:absolute;inset:7px;width:36px;height:36px;object-fit:contain;border-radius:50%;image-rendering:pixelated}
.bt2-ret .bt2-anel{position:absolute;inset:0;width:50px;height:50px;object-fit:contain;pointer-events:none}
.bt2-ret .bt2-ind{position:absolute;left:-3px;top:-3px;width:16px;height:16px;object-fit:contain;pointer-events:none;
  filter:drop-shadow(0 0 3px rgba(250,204,21,.8))}
.bt2-ret:hover .bt2-anel{filter:brightness(1.35)}
.bt2.desmaiado .bt2-poke{filter:grayscale(.85);opacity:.55}

.bt2-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.bt2-topo{display:flex;align-items:center;justify-content:space-between;gap:6px}
.bt2-nome{font-size:12.5px;font-weight:800;color:#f1f5f9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 0 rgba(0,0,0,.8)}
.bt2-nv{flex:0 0 auto;padding:0 7px;line-height:16px;font-size:9.5px;font-weight:900;letter-spacing:.3px;
  background:url(../assets/ui/barra-time/nivel-ouro.png) 0 0/100% 100% no-repeat;color:#fcd34d;text-shadow:0 1px 0 #000}
.bt2-nv.nv-azul{background-image:url(../assets/ui/barra-time/nivel-azul.png);color:#7dd3fc}
.bt2-nv.nv-vermelho{background-image:url(../assets/ui/barra-time/nivel-vermelho.png);color:#fca5a5}
.bt2-nv.nv-cinza{background-image:url(../assets/ui/barra-time/nivel-cinza.png);color:#cbd5e1}

.bt2-tipos{display:flex;align-items:center;gap:3px;flex-wrap:wrap;min-height:14px}
.bt2-tipo{border-style:solid;border-width:0;border-image-slice:7 fill;border-image-width:5px;border-image-repeat:stretch;
  padding:0 6px;line-height:14px;font-size:8.5px;font-weight:900;letter-spacing:.4px;color:#fff;text-transform:uppercase;
  text-shadow:0 0 2px rgba(0,0,0,.95),0 1px 0 #000}
.bt2-status{width:15px;height:15px;object-fit:contain}

.bt2-linha{display:flex;align-items:center;gap:5px}
.bt2-rot{flex:0 0 18px;font-size:8.5px;font-weight:900;letter-spacing:.5px;color:#4ade80;text-shadow:0 1px 0 #000}
.bt2-rot.exp{color:#60a5fa}
.bt2-barra{position:relative;flex:1 1 auto;height:11px;background:url(../assets/ui/barra-time/barra-trilho.png) 0 0/100% 100% no-repeat}
.bt2-barra.exp{height:8px}
.bt2-barra i{position:absolute;left:2px;top:2px;bottom:2px;max-width:calc(100% - 4px);border-radius:2px;
  background:url(../assets/ui/barra-time/barra-verde.png) 0 0/100% 100%;transition:width .35s}
.bt2-barra i.b-amarela{background-image:url(../assets/ui/barra-time/barra-amarela.png)}
.bt2-barra i.b-vermelha{background-image:url(../assets/ui/barra-time/barra-vermelha.png)}
.bt2-barra.exp i{background-image:url(../assets/ui/barra-time/barra-azul.png)}
.bt2-barra em{position:absolute;right:4px;top:0;line-height:11px;font-style:normal;font-size:8.5px;font-weight:900;color:#fff;
  font-variant-numeric:tabular-nums;text-shadow:0 0 2px #000,0 1px 0 #000,0 -1px 0 #000}
.bt2-pct{flex:0 0 26px;text-align:right;font-size:8.5px;font-weight:800;color:#cbd5e1;font-variant-numeric:tabular-nums}

/* sem a caixa azul em volta: o cartão "Seu time" fica transparente e só
   aparecem os cards dos pokémon (título e botão continuam, flutuando no mapa) */
#lado-esq .card:has(#barra-time){
  background:none !important;border:0 !important;box-shadow:none !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  padding-left:0 !important;padding-right:0 !important}
#lado-esq .card:has(#barra-time)::before,
#lado-esq .card:has(#barra-time)::after{display:none !important}
#lado-esq .card:has(#barra-time) > h3{padding-left:9px;text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.8)}

/* botão do chat arrastável (js/ui/arrastavel.js, chave "chat"): com posição
   salva ele sai do canto fixo e usa left/top — vale também no celular */
#chat-btn.flut-custom,.chat-btn.flut-custom{right:auto !important;bottom:auto !important;touch-action:none}
#chat-btn.arrastando{cursor:grabbing;transform:scale(1.08);z-index:95;transition:none}
#chat-btn{touch-action:none}

/* Exp Share nos inativos: quanto do XP do ativo cada um leva (free / VIP) */
.bt2-share{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;padding:0 4px;line-height:12px;border-radius:4px;
  font-size:7.5px;font-weight:900;letter-spacing:.2px;white-space:nowrap;cursor:help;
  background:rgba(37,99,235,.28);border:1px solid rgba(96,165,250,.6);color:#dbeafe;text-shadow:0 1px 0 #000}
.bt2-share i{font-style:normal;color:#93c5fd}
.bt2-share.vip{background:rgba(245,158,11,.22);border-color:#f59e0b;color:#fde68a}
.bt2-share.vip i{opacity:1;color:#fbbf24}
.bt2-share.off{background:rgba(127,29,29,.35);border-color:rgba(248,113,113,.6);color:#fecaca;opacity:.8}

/* card do pokémon ATIVO (janelinha flutuante #meu-poke, UI.renderMeu): a
   mesma peça do tileset da barra do time; a caixa de vidro some e fica só a
   moldura. O card em si não é clicável — só o retrato (abre a ficha). */
#topo-poke .meu:has(.bt2-meu){background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;margin-left:9px;width:calc(100% - 9px)}
.bt2.bt2-meu{cursor:default;min-height:64px;padding-right:12px}
.bt2.bt2-meu:hover{filter:none}
.bt2.bt2-meu:active{transform:none}
.bt2-meu .bt2-topo{justify-content:flex-start}
.bt2-meu .bt2-nome{flex:0 1 auto}
.bt2-meu .bt2-iv{flex:0 0 auto;font-size:9.5px;font-weight:900;letter-spacing:.3px;text-shadow:0 1px 0 #000;cursor:help}
.bt2-meu .bt2-nv{margin-left:auto}
.bt2-st{display:inline-flex;align-items:center;gap:2px;font-size:8.5px;font-weight:900;cursor:help;text-shadow:0 1px 0 #000}
.bt2-st small{font-size:8px;color:#e2e8f0}
/* #topo-poke .meu img{36px} (style.css) tem id na frente e venceria o kit —
   devolve os tamanhos das peças do tileset dentro do card do ativo */
#topo-poke .meu .bt2-ret .bt2-poke{width:36px;height:36px}
#topo-poke .meu .bt2-ret .bt2-anel{width:50px;height:50px}
#topo-poke .meu .bt2-ret .bt2-ind{width:16px;height:16px}
#topo-poke .meu .bt2-status{width:15px;height:15px}