/* Idle Pokemon — tema escuro/dourado no estilo do client */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* 📊 relatório offline "bem-vindo de volta" */
.off-rep .or-sub { font-size: 13px; color: #cdd7e2; margin-bottom: 12px; }
.off-rep .or-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.off-rep .or-card { background: #0e1622; border: 1px solid #24344a; border-radius: 9px; padding: 10px; text-align: center; }
.off-rep .or-card span { display: block; font-size: 11px; color: #8b97a5; margin-bottom: 3px; }
.off-rep .or-card b { font-size: 18px; color: #ffd964; }
.off-rep .or-loot-h { margin: 14px 0 6px; font-weight: bold; color: #9fe28f; font-size: 13px; }
.off-rep .or-loot { display: flex; flex-wrap: wrap; gap: 6px; }
.off-rep .or-loot-i { display: inline-flex; align-items: center; gap: 3px; background: #101a26; border: 1px solid #26344a;
  border-radius: 14px; padding: 3px 9px; font-size: 12px; color: #cdd7e2; }
.off-rep .or-loot-i canvas { image-rendering: pixelated; vertical-align: middle; }
.off-rep .or-loot-i b { color: #ffd964; }
/* 📣 banner de boas-vindas (WhatsApp) — overlay com imagem + botão + X */
#welcome-bg { position: fixed; inset: 0; z-index: 10000; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(4, 2, 10, .82); backdrop-filter: blur(3px); animation: wc-fade .25s ease; }
@keyframes wc-fade { from { opacity: 0; } to { opacity: 1; } }
/* 🌈 borda arco-íris animada: gradiente girando na borda (border-box) +
   miolo opaco (padding-box) pra imagem não vazar cor por baixo. */
#welcome-card { position: relative; max-width: 620px; width: auto;
  max-height: 90vh; display: flex; flex-direction: column; align-items: center;
  border-radius: 14px; overflow: hidden;
  border: 4px solid transparent;
  background:
    linear-gradient(#0b0716, #0b0716) padding-box,
    linear-gradient(90deg, #ff2d55, #ff9500, #ffe600, #34e36f, #00d4ff, #4d5bff, #b84dff, #ff2d55) border-box;
  background-size: auto, 300% 100%;
  animation: wc-pop .3s cubic-bezier(.2,1.2,.4,1), wc-rainbow 4s linear infinite, wc-glow 4s linear infinite; }
@keyframes wc-pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes wc-rainbow { from { background-position: 0 0, 0% 50%; } to { background-position: 0 0, 300% 50%; } }
@keyframes wc-glow {
  0%   { box-shadow: 0 12px 48px rgba(0,0,0,.55), 0 0 22px 2px rgba(255, 45, 85, .65); }
  25%  { box-shadow: 0 12px 48px rgba(0,0,0,.55), 0 0 22px 2px rgba(255, 230, 0, .65); }
  50%  { box-shadow: 0 12px 48px rgba(0,0,0,.55), 0 0 22px 2px rgba(0, 212, 255, .65); }
  75%  { box-shadow: 0 12px 48px rgba(0,0,0,.55), 0 0 22px 2px rgba(184, 77, 255, .65); }
  100% { box-shadow: 0 12px 48px rgba(0,0,0,.55), 0 0 22px 2px rgba(255, 45, 85, .65); }
}
/* quem pede menos animação vê a borda parada (sem piscar) */
@media (prefers-reduced-motion: reduce) {
  #welcome-card { animation: wc-pop .3s cubic-bezier(.2,1.2,.4,1); box-shadow: 0 12px 48px rgba(0,0,0,.55); }
}
/* imagem NUNCA passa da tela: encolhe mantendo a proporção pra sobrar o X e o botão */
#welcome-img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(90vh - 64px); }
#welcome-x { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px;
  border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 17px;
  cursor: pointer; line-height: 1; z-index: 2; }
#welcome-x:hover { background: rgba(200,40,40,.85); }
#welcome-btn { display: block; align-self: stretch; width: 100%; box-sizing: border-box;
  text-align: center; text-decoration: none;
  background: linear-gradient(90deg, #25d366, #128c4b); color: #fff; font-weight: bold;
  font-size: 17px; padding: 14px; letter-spacing: .3px; }
#welcome-btn:hover { filter: brightness(1.1); }
/* ⚠️ banner de senha fraca (fixo no topo, acima de tudo) */
#weakpw-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  background: linear-gradient(90deg, #6e1414, #8a1f1f); color: #ffe3e3;
  border-bottom: 2px solid #ff6b6b; box-shadow: 0 3px 12px rgba(0,0,0,.5);
  font-size: 13px; animation: wpb-in .3s ease; }
@keyframes wpb-in { from { transform: translateY(-100%); } to { transform: translateY(0); } }
#weakpw-banner .wpb-txt { flex: 1; }
#weakpw-banner .wpb-btn { background: #ffd964; color: #2a1c00; border: 0; font-weight: bold;
  padding: 6px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
#weakpw-banner .wpb-btn:hover { background: #ffe58a; }
#weakpw-banner .wpb-x { background: transparent; color: #ffd0d0; border: 0; font-size: 16px; cursor: pointer; padding: 2px 6px; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: "Segoe UI", Verdana, sans-serif;
  font-size: 13px;
  background: #05070a;
  color: #dfe6ee;
  user-select: none;
}
.hidden { display: none !important; }
.dim { color: #8b97a5; }
.tiny-txt { font-size: 10px; margin-top: 2px; }
b { color: #fff; }

/* ------------------------------------------------ painéis */
.panel {
  background: rgba(9, 13, 19, .93);
  border: 1px solid #715c25;
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .55);
}
.hud { position: absolute; z-index: 10; }

.btn {
  background: #1a2330;
  color: #dfe6ee;
  border: 1px solid #37475c;
  border-radius: 5px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 13px;
}
.btn:hover { background: #243144; }
.btn.gold { background: #2e2410; border-color: #a3852f; color: #ffd964; }
.btn.gold:hover { background: #40331a; }
/* ⚔ AÇÃO DE CAÇADA em vermelho (pedido do dono, 17/08/2026). Não é enfeite: é a
   mesma língua do anel vermelho que marca, no Box e no Time, quem está caçando
   agora — o botão e a marca do ícone passam a se reconhecer. */
.btn.hunt { background: #3a1417; border-color: #a33a3f; color: #ff9ea2; }
.btn.hunt:hover { background: #4d1a1e; }
.btn.tiny { padding: 1px 8px; font-size: 11px; }
.btn.sel { border-color: #4d8fe0; color: #cfe6ff; box-shadow: 0 0 8px rgba(77,143,224,.3); }
.btn:disabled { opacity: .4; cursor: default; }

.tag {
  background: #1a2330; border: 1px solid #37475c; border-radius: 8px;
  font-size: 10px; padding: 1px 7px; color: #aeb9c6;
}
.err { color: #ff7a7a; min-height: 18px; font-size: 12px; margin-top: 8px; text-align: center; }

/* ------------------------------------------------ login */
/* ================= LOGIN / REGISTER (dark épico) ================= */
.login-wrap {
  position: fixed; inset: 0; z-index: 100; overflow: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px;
  /* tema "Gengar": roxo fantasma escuro. Troque por login-bg.jpg pra sua arte. */
  background:
    radial-gradient(1000px 700px at 50% -8%, rgba(140, 70, 190, .30), transparent 60%),
    radial-gradient(800px 600px at 12% 25%, rgba(90, 40, 150, .28), transparent 55%),
    radial-gradient(900px 650px at 88% 80%, rgba(60, 40, 140, .26), transparent 55%),
    radial-gradient(600px 500px at 50% 110%, rgba(180, 60, 120, .18), transparent 60%),
    linear-gradient(180deg, #140a20 0%, #0c0714 55%, #050308 100%);
}
/* camada opcional: coloque backgrounds/login.jpg em public/ pra um fundo
   próprio (se não existir, fica só o gradiente roxo por baixo)
   .jpg e NÃO .png: são a MESMA arte (1375x768), mas o .png tem 2,2 MB
   contra 367 KB do .jpg — e o canal alfa dele é 100% opaco, ou seja,
   inútil. Era 2,2 MB baixados por jogador em toda tela de login, para
   uma camada que aparece com opacity .38. */
.login-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('backgrounds/login.jpg') center/cover no-repeat;
  opacity: .38; filter: saturate(1.05);
}
.login-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 50% 40%, transparent 40%, rgba(2,4,8,.75) 100%);
}
/* logo/título */
.login-logo { position: relative; z-index: 2; text-align: center; margin-bottom: 18px; }
.lg-title {
  font-size: 46px; font-weight: 900; letter-spacing: 1px; line-height: 1;
  color: #ffd964; text-shadow: 0 3px 0 rgba(122,90,16,.6), 0 0 28px rgba(255,217,100,.45);
}
.lg-title span { color: #7fe0ff; text-shadow: 0 3px 0 rgba(16,70,90,.6), 0 0 28px rgba(127,224,255,.5); }
/* logotipo (logo.png) no lugar do texto — bloco no fluxo normal: o .lg-sub
   fica SEMPRE abaixo, nunca é coberto */
.lg-img {
  display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto -4px;
  filter: drop-shadow(0 6px 22px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(127,224,255,.22));
}
.lg-sub { margin-top: 6px; color: #9fb0c8; font-size: 12px; letter-spacing: 4px; }

/* card */
.login-card {
  position: relative; z-index: 2; width: 360px; max-width: 92vw; padding: 26px 26px 22px;
  background: linear-gradient(180deg, rgba(16,22,34,.94), rgba(9,13,22,.96));
  border: 1px solid #b9922f; border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.6), inset 0 0 40px rgba(255,217,100,.05);
}
.login-head {
  text-align: center; color: #ffd964; font-weight: bold; letter-spacing: 3px;
  text-transform: uppercase; font-size: 15px; margin-bottom: 18px;
}
.login-note { color: #9fb0c8; font-size: 12px; margin: 4px 0 10px; line-height: 1.5; }

/* abas Entrar / Criar conta (mesmo padrão visual de .chat-tabs/.ct) */
.login-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid #2a3a52; }
.lt {
  flex: 1; background: none; border: none; border-bottom: 2px solid transparent;
  color: #7c8ba0; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase;
  font-size: 12.5px; padding: 0 0 10px; cursor: pointer; transition: color .15s, border-color .15s;
}
.lt:hover { color: #cfd8e3; }
.lt.active { color: #ffd964; border-color: #c9a34e; }
/* campos que só existem numa das 2 abas (li-name/li-pass ficam nas 2, fora daqui) */
#login.mode-login .reg-only { display: none; }
#login.mode-register .login-only { display: none; }

/* inputs com ícone */
.in-wrap { position: relative; margin-bottom: 12px; }
.in-wrap .in-ic {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 14px; opacity: .8; pointer-events: none;
}
.in-wrap input {
  width: 100%; box-sizing: border-box; padding: 12px 40px 12px 36px;
  background: #0b111c; color: #fff; font-size: 14px;
  border: 1px solid #2a3a52; border-radius: 9px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.in-wrap input::placeholder { color: #6a7d95; text-transform: uppercase; font-size: 12px; letter-spacing: .5px; }
.in-wrap input:focus { border-color: #c9a34e; box-shadow: 0 0 0 2px rgba(201,163,78,.2); }
.in-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #8b97a5; cursor: pointer; font-size: 15px; padding: 4px;
}
.in-eye:hover { color: #ffd964; }

/* botão épico */
.btn-epic {
  width: 100%; margin-top: 6px; padding: 13px; cursor: pointer;
  background: linear-gradient(180deg, #2a2208, #1c1706);
  border: 1px solid #c9a34e; border-radius: 10px;
  color: #ffd964; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; font-size: 14px;
  box-shadow: inset 0 0 18px rgba(255,217,100,.12); transition: transform .05s, box-shadow .15s, background .15s;
}
.btn-epic:hover { background: linear-gradient(180deg, #3a2f0c, #241d08); box-shadow: inset 0 0 24px rgba(255,217,100,.25), 0 0 18px rgba(255,217,100,.2); }
.btn-epic:active { transform: translateY(1px); }
.btn-ghost {
  width: 100%; margin-top: 10px; padding: 11px; cursor: pointer;
  background: transparent; border: 1px solid #37475c; border-radius: 10px;
  color: #cfd8e3; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; font-size: 12px;
  transition: border-color .15s, color .15s;
}
.btn-ghost:hover { border-color: #7fd0ff; color: #fff; }
.login-btns { display: flex; gap: 10px; }
.login-btns .btn-epic, .login-btns .btn-ghost { margin-top: 12px; }

/* divisor "ou" */
.login-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0 8px; color: #5a6b82; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #2a3a52, transparent); }

.login-discord {
  position: relative; z-index: 2; margin-top: 20px; color: #9fb0c8; font-size: 12px;
  text-decoration: none; letter-spacing: 1px; text-transform: uppercase; font-weight: bold;
  display: inline-flex; align-items: center; gap: 8px;
}
.login-discord:hover { color: #25d366; }

/* ------------------------------------------------ canvas */
#world { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }

#zone-label {
  /* escondido: o nome da zona colidia com a toolbar (que ficou mais alta).
     O elemento CONTINUA no DOM — o game.js escreve nele todo tick. */
  display: none;
  top: 10px; left: 50%; transform: translateX(-50%);
  margin-top: 52px;
  color: #cfe3b8; text-shadow: 0 1px 3px #000;
  font-size: 12px; letter-spacing: .4px; pointer-events: none;
}

/* ------------------------------------------------ painel do jogador */
#player-panel { top: 12px; left: 12px; width: 268px; padding: 10px 12px; }
.pp-head { display: flex; justify-content: space-between; align-items: baseline; }
#pp-name { font-weight: bold; color: #ffd964; font-size: 14px; }
.pp-poke { display: flex; gap: 8px; margin: 8px -4px 6px; padding: 4px; border-radius: 8px; align-items: center; }
.pp-poke.clickable { cursor: pointer; transition: background .15s; }
.pp-poke.clickable:hover { background: rgba(255,255,255,.06); }
.pp-poke.clickable:hover #pp-sprite { border-color: #c9a34e; }
#pp-sprite { image-rendering: pixelated; background: #0d141d; border: 1px solid #37475c; border-radius: 6px; transition: border-color .15s; }

/* ⚡ seletor rápido de pokémon ativo (popover sob o painel) */
#poke-switch { position: fixed; z-index: 120; width: 210px; padding: 10px; }
#poke-switch .ps-title { color: #ffd964; font-weight: bold; font-size: 12px; margin-bottom: 8px; }
#poke-switch .ps-grid { display: flex; flex-direction: column; gap: 5px; }
.ps-card {
  position: relative; display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: #101823; border: 1px solid #1c2836; border-radius: 8px; padding: 5px 8px 5px 6px;
  transition: border-color .15s, transform .12s, background .15s;
}
.ps-card:hover { border-color: #31465f; transform: translateX(2px); background: #121c29; }
.ps-card.active { border-color: #3f7d46; box-shadow: 0 0 8px rgba(63,125,70,.3); cursor: default; }
.ps-card.active:hover { transform: none; }
.ps-card.shiny { border-color: #b98f1f; }
.ps-card canvas { image-rendering: pixelated; }
.ps-info { flex: 1; min-width: 0; }
.ps-nm { font-size: 12px; color: #eaf0f6; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-lv { font-size: 10px; color: #7c8a99; }
.ps-hp { height: 4px; background: #26303c; border-radius: 3px; overflow: hidden; margin-top: 3px; }
.ps-hp > div { height: 100%; background: linear-gradient(#66d96b, #2f9d43); }
.ps-cur { color: #7fe08a; font-size: 12px; }
.pp-poke-info { flex: 1; min-width: 0; }
.pp-poke-info .row { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.bar { position: relative; height: 9px; background: #0d141d; border: 1px solid #37475c; border-radius: 4px; overflow: hidden; }
.bar > div { height: 100%; width: 0; transition: width .5s; }
.bar.hp > div { background: linear-gradient(#66d96b, #2f9d43); }
#pp-poke-hp-ghost { position: absolute; top: 0; left: 0; background: rgba(255,160,80,0.65) !important; z-index: 0; }
#pp-poke-xp { position: relative; z-index: 1; }
.bar.exp { margin-top: 6px; }
.bar.exp > div { background: linear-gradient(#ffd964, #b98f1f); }
.pp-cash { display: flex; gap: 12px; margin-top: 8px; font-size: 12px; }

/* ------------------------------------------------ topbar */
/* SEMPRE uma linha só. Como o número de botões varia (o settings-extra.js
   injeta 💰 🔗 🌎 🎮 ✉ 🏥 depois), o tamanho é FLUIDO: teto de 48px (os +25%)
   e encolhe junto com a tela em vez de quebrar linha. ~3.4vw ≈ 1/26 da tela. */
#topbar {
  top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; flex-wrap: nowrap; justify-content: center;
  gap: clamp(2px, .35vw, 5px); padding: 6px clamp(4px, .7vw, 10px);
  max-width: calc(100vw - 16px);
}
.tb {
  flex: 0 0 auto;
  background: transparent; border: 1px solid transparent; border-radius: 9px;
  font-size: 21px; padding: 4px 10px; cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s;
}
.tb:hover { background: #223047; border-color: #46618a; }
.tb:active { transform: scale(.9); }
/* ícones reais do client (PNG) */
/* 📏 +10% em 2026-08-10: com os menus recolhidos a barra caiu de 24 ícones pra
   8, então sobrou largura de sobra e dá pra respirar. Continua FLUIDO (clamp),
   então em tela estreita encolhe igual antes em vez de quebrar linha. */
.tb.ic {
  padding: clamp(3px, .45vw, 6px);
  width: clamp(32px, 3.7vw, 52px); height: clamp(32px, 3.7vw, 52px);
  display: flex; align-items: center; justify-content: center;
}
.tb.ic img {
  width: clamp(22px, 2.6vw, 36px); height: clamp(22px, 2.6vw, 36px); image-rendering: auto;
  /* a arte nova não é quadrada (perfil.png é 128×82, mapa.png é 128×122):
     `contain` encaixa dentro do quadrado sem achatar o desenho */
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.6));
  opacity: .92; transition: opacity .12s, transform .1s;
}
.tb.ic:hover img { opacity: 1; transform: scale(1.08); }
/* botão de emoji (📢 Update) + bolinha de "tem novidade" */
.tb.ic { position: relative; }
.tb.ic.emoji span { font-size: clamp(16px, 1.85vw, 26px); filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.upd-dot {
  position: absolute; top: 4px; right: 4px; width: 11px; height: 11px;
  border-radius: 50%; background: #e5484d; border: 1px solid #1a1408;
}
.upd-card {
  background: #0d141d; border: 1px solid #273246; border-radius: 8px;
  padding: 10px 14px; margin-bottom: 10px;
}
.upd-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.upd-head b { color: #ffd964; }
.upd-list { margin: 0; padding-left: 18px; }
.upd-list li { margin: 4px 0; font-size: 13px; }

/* ------------------------------------------------ auto helper */
#auto-panel {
  top: 12px; right: 12px; width: 232px; padding: 10px 12px; font-size: 12px;
  max-height: calc(100vh - 24px); overflow-y: auto; scrollbar-width: thin;
  accent-color: #58c468; /* checkboxes verdes */
}
.ap-title {
  color: #ffd964; font-weight: bold; margin-bottom: 8px;
  border-bottom: 1px solid #273246; padding-bottom: 6px;
  display: flex; justify-content: space-between; align-items: center; cursor: pointer;
}
#ah-min {
  background: #101823; border: 1px solid #37475c; border-radius: 5px;
  color: #aeb9c6; cursor: pointer; font-size: 12px; line-height: 1;
  padding: 2px 8px; font-weight: bold;
}
#ah-min:hover { border-color: #c9a34e; color: #ffd964; }
/* minimizado: só a barra do título */
#auto-panel.min > :not(.ap-title) { display: none !important; }
#auto-panel.min { width: 150px; }
#auto-panel.min .ap-title { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
#auto-panel label { display: block; margin: 0; cursor: pointer; }
#auto-ball, #fish-bait {
  background: #0d141d; color: #fff; border: 1px solid #37475c;
  border-radius: 4px; padding: 3px;
}

/* Auto-Helper: cards — LIGADO fica com moldura verde */
.ah-hunt { width: 100%; margin: 0 0 8px; font-size: 12px; }
/* viagem rápida: Centro Pokémon + Ir pro Mark */
.ah-travel { display: flex; gap: 6px; margin: 0 0 8px; }
.ah-go {
  flex: 1; font-size: 11px; font-weight: 700; cursor: pointer;
  padding: 7px 6px; border-radius: 8px; line-height: 1.15;
  background: linear-gradient(180deg, #16324a, #112433);
  color: #cfe6ff; border: 1px solid #2f6ea0; transition: .12s;
}
.ah-go:hover { border-color: #58b0ff; background: linear-gradient(180deg, #1c4463, #143246); color: #fff; }
.ah-go:active { transform: translateY(1px); }
/* 🪟 opacidade ajustável dos painéis (menus) */
.panel.hud { opacity: var(--menu-op, 1); }
.ah-opacity { margin: 4px 0 6px; font-size: 11px; color: #cfd8e3; }
.ah-opacity label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.ah-opacity #ah-op-val { color: #ffd964; font-weight: 700; }
.ah-opacity input[type=range] { width: 100%; accent-color: #58b0ff; cursor: pointer; }
.ah-row {
  background: #0d141d; border: 1px solid #273246; border-radius: 8px;
  padding: 7px 9px; margin: 6px 0; transition: border-color .15s, background .15s;
}
.ah-row:hover { border-color: #37475c; }
.ah-row.on {
  border-color: #3f8f4a;
  background: linear-gradient(180deg, #0e1c13, #0c1610);
  box-shadow: inset 0 0 12px rgba(88, 196, 104, .07);
}
.ah-row label { margin: 0; }
/* descrição em SUB-LINHA alinhada (inline embolava com o título) */
.ah-row .ah-desc { display: block; color: #8b97a5; font-size: 10px; margin: 2px 0 0 21px; line-height: 1.3; }
.ah-row.on .ah-desc { color: #9fb8a4; }
.ah-row:not(.on) b { color: #aeb9c6; font-weight: 600; }
.ah-row.on b { color: #cfeed4; }
.ah-sub { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
/* sub-config some quando a função está desligada — exceto as .always
   (Bola e Isca também servem pra captura/pesca MANUAL) */
.ah-row:not(.on) .ah-sub:not(.always) { display: none; }
.ah-line { display: flex; align-items: center; gap: 6px; }
.ah-line span { flex: none; color: #aeb9c6; font-size: 11px; }
.ah-line select {
  flex: 1; min-width: 0; background: #0d141d; color: #fff;
  border: 1px solid #37475c; border-radius: 4px; padding: 3px; font-size: 11px;
}
.ah-line .tag { flex: none; }
.ah-check { font-size: 11px; color: #aeb9c6; margin-left: 12px !important; }
.ah-warn { color: #ffd964; font-size: 10px; margin-top: 4px; }
/* celular: o painel abre mais pra baixo — não deixa passar da tela */
@media (max-width: 980px), (pointer: coarse) {
  #auto-panel { max-height: calc(100vh - 72px); }
}

/* badges dos slots do time/box — um canto pra cada, sem sobrepor:
   ✨ shiny = cima-esquerda · +boost = cima-direita (.slot-boost)
   🔒 travado = baixo-esquerda · Lv = baixo-direita (.eq-slot .lv) */
.eq-slot { position: relative; }
.slot-b { position: absolute; top: 2px; font-size: 11px; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
/* ✨ SHINY em destaque (pedido do dono, 17/08/2026): maior e com brilho dourado
   próprio. Era o mesmo 11px do 🔒 — a marca mais rara do jogo tinha o mesmo peso
   visual do cadeado. O `drop-shadow` (e não text-shadow) é que faz o brilho
   seguir o contorno do emoji em vez de virar um borrão atrás dele. */
.slot-b.sh { left: 3px; font-size: 14px; filter: drop-shadow(0 0 4px rgba(255,217,100,.95)); }
.slot-b.lk { top: auto; bottom: 2px; left: 3px; }

/* barra fininha de EXP do pokémon (abaixo do HP no painel do jogador) */
.poke-exp { height: 5px; margin-top: 3px; }

/* 📊 Hunt Analyse */
.ha-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ha-card {
  background: #0d141d; border: 1px solid #273246; border-radius: 8px;
  padding: 8px 10px; display: flex; flex-direction: column; gap: 2px;
}
.ha-card span { color: #8b97a5; font-size: 11px; }
.ha-card b { font-size: 16px; color: #fff; }
.ha-card i { font-style: normal; color: #ffd964; font-size: 11px; }
.ha-loot { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.ha-loot-row {
  display: flex; justify-content: space-between; align-items: center;
  background: #0d141d; border: 1px solid #273246; border-radius: 6px;
  padding: 4px 10px; font-size: 12px;
}
.ha-loot-row > b { color: #ffd964; }
.ha-loot-item { display: flex; align-items: center; gap: 8px; text-transform: capitalize; }
.ha-loot-item canvas { image-rendering: pixelated; flex: none; }
@media (max-width: 700px) { .ha-grid { grid-template-columns: repeat(2, 1fr); } }

/* 🗺️ minimapa ao vivo (canto superior esquerdo, sob o painel do jogador) */
#minimap {
  position: fixed; left: 12px; top: 262px; z-index: 26; padding: 5px 6px 6px;
  width: 194px;
}
.mm-head {
  display: flex; justify-content: space-between; align-items: center;
  color: #ffd964; font-size: 11px; font-weight: bold; margin-bottom: 4px; padding: 0 2px;
}
#mm-hide {
  background: #101823; border: 1px solid #37475c; border-radius: 4px;
  color: #aeb9c6; cursor: pointer; font-size: 11px; line-height: 1; padding: 1px 6px;
}
#mm-hide:hover { border-color: #c9a34e; color: #ffd964; }
#mm-canvas {
  display: block; width: 182px; height: 140px; border-radius: 5px;
  border: 1px solid #273246; background: #06090d; cursor: pointer;
  image-rendering: pixelated;
}
#mm-show {
  position: fixed; left: 12px; top: 262px; z-index: 26;
  background: rgba(10,16,24,.85); border: 1px solid #2a3d55; border-radius: 6px;
  color: #ffd964; cursor: pointer; font-size: 16px; padding: 5px 9px;
}
/* no celular o minimapa some (tela pequena) */
@media (max-width: 980px), (pointer: coarse) { #minimap, #mm-show { display: none; } }

/* 🗺️ mapa antigo, desacoplado da toolbar — visível só pra ADM (JS liga/desliga o .hidden) */
#btn-map-adm { position: fixed; left: 12px; top: 300px; z-index: 26; }

/* 📊 mini Hunt Analyse (barrinha ao vivo sob o painel do jogador) */
#mini-hunt {
  position: fixed; left: 12px; top: 230px; z-index: 26; cursor: pointer;
  background: rgba(10, 16, 24, .85); border: 1px solid #2a3d55; border-radius: 6px;
  padding: 4px 10px; font-size: 11px; display: flex; gap: 10px; align-items: center;
  white-space: nowrap;
}
#mini-hunt:hover { border-color: #37475c; }
#mini-hunt .mh-xp { color: #ffd964; }
#mini-hunt .mh-gold { color: #9fe28f; }
#mini-hunt .mh-k { color: #ff9d9d; }
#mini-hunt .mh-x { color: #8b97a5; cursor: pointer; font-size: 13px; padding: 0 2px; }
#mini-hunt .mh-x:hover { color: #fff; }
@media (max-width: 980px), (pointer: coarse) { #mini-hunt { display: none; } }

/* 💰 feed de ganhos (+XP, +gold, loot) — lateral esquerda */
#gain-feed {
  position: fixed; left: 12px; top: 430px; z-index: 25;
  display: flex; flex-direction: column; gap: 4px; pointer-events: none;
}
.gain {
  background: rgba(10, 16, 24, .85); border: 1px solid #2a3d55; border-radius: 6px;
  padding: 3px 10px; font-size: 12px; color: #cfd8e3; max-width: 240px;
  animation: gainIn .25s ease-out;
}
@keyframes gainIn { from { opacity: 0; transform: translateX(-14px); } }
.gain.out { opacity: 0; transition: opacity .5s; }
.gain.xp { color: #ffd964; border-color: #7a5a10; }
.gain.gold { color: #9fe28f; border-color: #3f8f4a; }
.gain.loot { color: #8fc7ff; border-color: #2f6d9d; }
.gain.catch { color: #ff9d9d; border-color: #a33; }

/* ✨ banner GLOBAL de captura shiny (anúncio dourado) */
#shiny-banner {
  position: fixed; top: 14%; left: 50%; transform: translateX(-50%);
  width: min(92vw, 860px); z-index: 95; cursor: pointer;
  background: linear-gradient(105deg, #2b2007 0%, #4a3a10 30%, #67511a 50%, #4a3a10 70%, #2b2007 100%);
  border: 1px solid #c9a34e; border-radius: 10px;
  clip-path: polygon(3% 0, 97% 0, 100% 18%, 100% 82%, 97% 100%, 3% 100%, 0 82%, 0 18%);
  padding: 18px 30px 22px; text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,.65), inset 0 0 60px rgba(255,217,100,.12);
  animation: sbIn .5s ease-out;
}
@keyframes sbIn { from { opacity: 0; transform: translateX(-50%) translateY(-24px) scale(.95); } }
#shiny-banner.sb-out { opacity: 0; transition: opacity .7s; }
#shiny-banner .sb-title {
  font-weight: bold; letter-spacing: 4px; color: #ffd964; font-size: 20px;
  margin-bottom: 10px; animation: sbPulse 1.4s infinite alternate;
}
@keyframes sbPulse { from { text-shadow: 0 0 8px rgba(255,217,100,.5); } to { text-shadow: 0 0 22px rgba(255,217,100,1); } }
#shiny-banner .sb-body { display: flex; align-items: center; gap: 22px; }
#shiny-banner .sb-poke { position: relative; flex: none; filter: drop-shadow(0 0 14px rgba(255,217,100,.85)); }
#shiny-banner .sb-poke::after { /* sombra dourada no chão, como no anúncio */
  content: ''; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  width: 96px; height: 24px; border-radius: 50%; z-index: -1;
  background: radial-gradient(ellipse, rgba(140,105,25,.85), transparent 70%);
}
#shiny-banner .sb-poke canvas { image-rendering: pixelated; }
#shiny-banner .sb-mid { flex: 1; }
#shiny-banner .sb-who { color: #f3e7c8; font-size: 15px; }
#shiny-banner .sb-cyan { color: #7fe7ff; font-weight: bold; letter-spacing: 1px; text-shadow: 0 0 10px rgba(127,231,255,.7); }
#shiny-banner .sb-name {
  font-size: 34px; font-weight: 900; letter-spacing: 3px; color: #ffd964;
  text-shadow: 0 2px 0 #7a5a10, 0 0 18px rgba(255,217,100,.5); margin: 4px 0 8px;
}
#shiny-banner .sb-global {
  display: inline-block; background: #5b2fd4; color: #fff; border-radius: 14px;
  padding: 4px 14px; font-size: 12px; font-weight: bold; letter-spacing: 1px;
}
#shiny-banner .sb-rare { color: #cbb98a; font-size: 11px; margin-top: 8px; font-style: italic; }
#shiny-banner .sb-hex {
  flex: none; width: 92px; height: 102px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(#3a2c08, #1f1804); border: 1px solid #c9a34e;
  color: #ffd964; font-size: 11px; font-weight: bold; letter-spacing: 1px;
}
#shiny-banner .sb-hex-star { font-size: 26px; text-shadow: 0 0 12px rgba(255,217,100,.9); }
@media (max-width: 700px) {
  #shiny-banner .sb-hex { display: none; }
  #shiny-banner .sb-name { font-size: 24px; }
}

/* 💿 banner GLOBAL de TM tier SS (2026-08-12) — mesma mecânica do shiny, mas
   bloco PRÓPRIO em vez de reaproveitar #shiny-banner com uma classe. Os dois
   podem aparecer no mesmo segundo, e o motivo real é outro: paleta VIOLETA
   contra o dourado do shiny, pra o jogador saber o que aconteceu antes de ler.
   Editar um não mexe no outro — de propósito. */
#tmss-banner {
  position: fixed; top: 14%; left: 50%; transform: translateX(-50%);
  width: min(92vw, 860px); z-index: 95; cursor: pointer;
  background: linear-gradient(105deg, #150a2b 0%, #2a1552 30%, #3d1f75 50%, #2a1552 70%, #150a2b 100%);
  border: 1px solid #a780ff; border-radius: 10px;
  clip-path: polygon(3% 0, 97% 0, 100% 18%, 100% 82%, 97% 100%, 3% 100%, 0 82%, 0 18%);
  padding: 18px 30px 22px; text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,.65), inset 0 0 60px rgba(167,128,255,.14);
  animation: sbIn .5s ease-out;
}
#tmss-banner.sb-out { opacity: 0; transition: opacity .7s; }
#tmss-banner .sb-title {
  font-weight: bold; letter-spacing: 4px; color: #cbb0ff; font-size: 20px;
  margin-bottom: 10px; animation: ssPulse 1.4s infinite alternate;
}
@keyframes ssPulse { from { text-shadow: 0 0 8px rgba(167,128,255,.5); } to { text-shadow: 0 0 22px rgba(167,128,255,1); } }
#tmss-banner .sb-body { display: flex; align-items: center; gap: 22px; }
#tmss-banner .sb-poke { position: relative; flex: none; filter: drop-shadow(0 0 14px rgba(167,128,255,.9)); }
/* o disco é 30×30: sem pixelated ele sai borrado ao ampliar */
#tmss-banner .sb-poke img { width: 82px; height: 82px; image-rendering: pixelated; }
#tmss-banner .sb-mid { flex: 1; }
#tmss-banner .sb-who { color: #ded2f7; font-size: 15px; }
#tmss-banner .sb-cyan { color: #7fe7ff; font-weight: bold; letter-spacing: 1px; text-shadow: 0 0 10px rgba(127,231,255,.7); }
#tmss-banner .sb-name {
  font-size: 34px; font-weight: 900; letter-spacing: 3px; color: #cbb0ff;
  text-shadow: 0 2px 0 #3d1f75, 0 0 18px rgba(167,128,255,.5); margin: 4px 0 8px;
}
#tmss-banner .sb-global {
  display: inline-block; background: #5b2fd4; color: #fff; border-radius: 14px;
  padding: 4px 14px; font-size: 12px; font-weight: bold; letter-spacing: 1px;
}
#tmss-banner .sb-rare { color: #ab9ad0; font-size: 11px; margin-top: 8px; font-style: italic; }
#tmss-banner .sb-hex {
  flex: none; width: 92px; height: 102px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(#2a1552, #120826); border: 1px solid #a780ff;
  color: #cbb0ff; font-size: 11px; font-weight: bold; letter-spacing: 1px;
}
#tmss-banner .sb-hex-star { font-size: 26px; text-shadow: 0 0 12px rgba(167,128,255,.9); }
@media (max-width: 700px) {
  #tmss-banner .sb-hex { display: none; }
  #tmss-banner .sb-name { font-size: 24px; }
}

/* 🌟 banner GLOBAL de LENDÁRIO CAPTURADO em boss (2026-08-15, pedido do dono:
   "caso o jogador consiga capturar ... um aviso no servidor").

   Terceiro bloco próprio, ao lado do shiny (dourado) e da TM SS (violeta) — e
   pelo MESMO motivo dos outros dois: paleta distinta faz o jogador saber o que
   aconteceu antes de ler a frase. Aqui é ÂMBAR/BRASA, que é a cor do evento mais
   raro do jogo (0,05% no melhor caso, 0,025% nos seis grandes).

   Herda a estrutura .sb-* do #tmss-banner de propósito: mesma anatomia, cores
   próprias. Só o que muda de cor está escrito aqui. */
#bosscatch-banner {
  position: fixed; top: 14%; left: 50%; transform: translateX(-50%);
  width: min(92vw, 860px); z-index: 96; cursor: pointer;
  background: linear-gradient(105deg, #1c1206 0%, #3a2409 30%, #573509 50%, #3a2409 70%, #1c1206 100%);
  border: 1px solid #f0cf6a; border-radius: 10px;
  clip-path: polygon(3% 0, 97% 0, 100% 18%, 100% 82%, 97% 100%, 3% 100%, 0 82%, 0 18%);
  padding: 18px 30px 22px; text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,.7), inset 0 0 60px rgba(240,207,106,.16);
  animation: sbIn .5s ease-out;
}
#bosscatch-banner.sb-out { opacity: 0; transition: opacity .7s; }
#bosscatch-banner .sb-title {
  font-weight: bold; letter-spacing: 4px; color: #ffdf95; font-size: 20px;
  margin-bottom: 10px; animation: bcPulse 1.4s infinite alternate;
}
@keyframes bcPulse { from { text-shadow: 0 0 8px rgba(240,207,106,.5); } to { text-shadow: 0 0 24px rgba(255,223,149,1); } }
#bosscatch-banner .sb-body { display: flex; align-items: center; gap: 22px; }
#bosscatch-banner .sb-poke { position: relative; flex: none; filter: drop-shadow(0 0 16px rgba(240,207,106,.9)); }
/* sprite de COMBATE (gif BW, ~96px): sem pixelated, que num gif remontado
   vira serrilha — o oposto do disco de 30px da TM. */
#bosscatch-banner .sb-poke img { width: 92px; height: 92px; object-fit: contain; }
#bosscatch-banner .sb-mid { flex: 1; }
#bosscatch-banner .sb-who { color: #efe2c4; font-size: 15px; }
#bosscatch-banner .sb-gold { color: #ffdf95; font-weight: bold; letter-spacing: 1px; text-shadow: 0 0 10px rgba(240,207,106,.7); }
#bosscatch-banner .sb-name {
  font-size: 34px; font-weight: 900; letter-spacing: 3px; color: #ffe9ae;
  text-shadow: 0 2px 0 #573509, 0 0 20px rgba(240,207,106,.55); margin: 4px 0 8px;
}
#bosscatch-banner .sb-global {
  display: inline-block; background: #a9791a; color: #fff; border-radius: 14px;
  padding: 4px 14px; font-size: 12px; font-weight: bold; letter-spacing: 1px;
}
#bosscatch-banner .sb-rare { color: #c9b992; font-size: 11px; margin-top: 8px; font-style: italic; }
#bosscatch-banner .sb-hex {
  flex: none; width: 92px; height: 102px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(#573509, #1c1206); border: 1px solid #f0cf6a;
  color: #ffdf95; font-size: 11px; font-weight: bold; letter-spacing: 1px;
}
#bosscatch-banner .sb-hex-star { font-size: 26px; text-shadow: 0 0 12px rgba(240,207,106,.9); }
@media (max-width: 700px) {
  #bosscatch-banner .sb-hex { display: none; }
  #bosscatch-banner .sb-name { font-size: 24px; }
}

/* 🧬 PULSEIRA DE MEGA achada num boss (2026-08-20). Drop de 0,1% por vitória:
   o mais raro que o chefe dá, e o que destranca a Mega Evolução.

   Herda a anatomia .sb-* do #tmss-banner, como o #bosscatch-banner já herdava.
   Paleta VERDE-ÁGUA pra não se confundir com nenhum dos outros dois banners —
   roxo é TM SS, âmbar é lendário. */
#pulseira-banner {
  position: fixed; top: 14%; left: 50%; transform: translateX(-50%);
  width: min(92vw, 860px); z-index: 96; cursor: pointer;
  background: linear-gradient(105deg, #04211c 0%, #073a31 30%, #0a5748 50%, #073a31 70%, #04211c 100%);
  border: 1px solid #5ce6c4; border-radius: 10px;
  clip-path: polygon(3% 0, 97% 0, 100% 18%, 100% 82%, 97% 100%, 3% 100%, 0 82%, 0 18%);
  padding: 18px 30px 22px; text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,.7), inset 0 0 60px rgba(92,230,196,.16);
  animation: sbIn .5s ease-out;
}
#pulseira-banner.sb-out { opacity: 0; transition: opacity .7s; }
#pulseira-banner .sb-title {
  font-weight: bold; letter-spacing: 4px; color: #9df5dd; font-size: 20px;
  margin-bottom: 10px; animation: pmPulse 1.4s infinite alternate;
}
@keyframes pmPulse { from { text-shadow: 0 0 8px rgba(92,230,196,.5); } to { text-shadow: 0 0 24px rgba(157,245,221,1); } }
#pulseira-banner .sb-body { display: flex; align-items: center; gap: 22px; }
#pulseira-banner .sb-poke { position: relative; flex: none; filter: drop-shadow(0 0 16px rgba(92,230,196,.9)); }
/* sprite de ITEM (32px): pixelated, igual ao disco da TM SS. */
#pulseira-banner .sb-poke img { width: 84px; height: 84px; object-fit: contain; image-rendering: pixelated; }
#pulseira-banner .sb-mid { flex: 1; }
#pulseira-banner .sb-who { color: #cfe8e1; font-size: 15px; }
#pulseira-banner .sb-cyan { color: #9df5dd; font-weight: bold; letter-spacing: 1px; text-shadow: 0 0 10px rgba(92,230,196,.7); }
#pulseira-banner .sb-name {
  font-size: 34px; font-weight: 900; letter-spacing: 3px; color: #c9fff2;
  text-shadow: 0 2px 0 #0a5748, 0 0 20px rgba(92,230,196,.55); margin: 4px 0 8px;
}
#pulseira-banner .sb-global {
  display: inline-block; background: #0f8a72; color: #fff; border-radius: 14px;
  padding: 4px 14px; font-size: 12px; font-weight: bold; letter-spacing: 1px;
}
#pulseira-banner .sb-rare { color: #94bdb3; font-size: 11px; margin-top: 8px; font-style: italic; }
#pulseira-banner .sb-hex {
  flex: none; width: 92px; height: 102px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(#0a5748, #04211c); border: 1px solid #5ce6c4;
  color: #9df5dd; font-size: 11px; font-weight: bold; letter-spacing: 1px;
}
#pulseira-banner .sb-hex-star { font-size: 26px; text-shadow: 0 0 12px rgba(92,230,196,.9); }
@media (max-width: 700px) {
  #pulseira-banner .sb-hex { display: none; }
  #pulseira-banner .sb-name { font-size: 24px; }
}

/* 🔑 bloco de recuperação no Perfil (letra maior pra dar pra LER) */
.prof-rec {
  margin-top: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.7;
  background: #0d141d; border: 1px solid #37475c; border-radius: 6px; color: #cfd8e3;
}

/* link "Esqueceu a senha?" da tela de login */
.linklike {
  background: none; border: none; color: #8fc7ff; cursor: pointer;
  font-size: 12px; margin-top: 8px; text-decoration: underline; padding: 0;
}
.linklike:hover { color: #bfe0ff; }

/* ------------------------------------------------ captura */
#capture-panel { right: 12px; bottom: 12px; width: 265px; padding: 10px 12px; }
.cp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 6px; }
/* ⚾ botão do gerenciador de bolas (pity por espécie) */
.cp-mgr {
  background: #101823; border: 1px solid #37475c; border-radius: 5px;
  cursor: pointer; font-size: 13px; padding: 1px 7px; margin-left: auto;
}
.cp-mgr:hover { border-color: #c9a34e; }
/* 🧍 bônus do outfit no card da loja */
.oc-bonus { font-size: 10px; color: #ffd964; margin: 2px 0 4px; min-height: 12px; }

/* 🪟 painéis arrastáveis */
.drag-handle { cursor: move; -webkit-user-select: none; user-select: none; }
.ah-reset {
  width: 100%; margin-top: 8px; padding: 6px; cursor: pointer;
  background: transparent; border: 1px dashed #37475c; border-radius: 6px;
  color: #8b97a5; font-size: 11px;
}
.ah-reset:hover { border-color: #c9a34e; color: #ffd964; }

/* ✨ botão Bônus no painel do jogador */
#btn-bonus {
  width: 100%; margin-top: 8px; padding: 6px; cursor: pointer;
  background: linear-gradient(180deg, #1a2233, #121826);
  border: 1px solid #37475c; border-radius: 7px;
  color: #ffd964; font-size: 12px; font-weight: bold; letter-spacing: .5px;
  transition: border-color .15s, background .15s;
}
#btn-bonus:hover { border-color: #c9a34e; background: linear-gradient(180deg, #232d40, #161d2c); }
/* linhas de bônus no modal */
.bonus-row {
  display: flex; align-items: center; gap: 12px;
  background: #0d141d; border: 1px solid #273246; border-radius: 8px;
  padding: 9px 12px; margin-bottom: 7px;
}
.bonus-row .bn-ic { font-size: 18px; width: 24px; text-align: center; flex: none; }
/* arte do boost (frasco em pé): trava pela ALTURA, largura sai do desenho */
.bonus-row .bn-ic img { height: 22px; width: auto; max-width: 24px; object-fit: contain; vertical-align: middle; }
.bonus-row .bn-lbl { flex: 1; display: flex; flex-direction: column; }
.bonus-row .bn-lbl b { font-size: 13px; }
.bonus-row .bn-from { font-size: 11px; color: #8b97a5; }
.bonus-row .bn-val { font-weight: 900; font-size: 17px; }

/* 🛡️ clãs — cards estilo banner com brasão */
.clan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.clan-card {
  position: relative; text-align: center; padding: 16px 10px 12px; border-radius: 12px;
  background:
    radial-gradient(120px 80px at 50% 0%, color-mix(in srgb, var(--cc) 40%, transparent), transparent 70%),
    linear-gradient(180deg, #131a26, #0b111a);
  border: 1px solid color-mix(in srgb, var(--cc) 45%, #273246);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  transition: transform .1s, box-shadow .15s, border-color .15s;
}
.clan-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.5); border-color: color-mix(in srgb, var(--cc) 70%, #273246); }
.clan-card.on { border-color: var(--cc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cc) 45%, transparent), 0 10px 28px rgba(0,0,0,.45); }
/* faixa de cor no topo do card */
.clan-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--cc), transparent); border-radius: 12px 12px 0 0;
}
/* 🛡️ BRASÃO heráldico: moldura dourada metálica + escudo na cor do clã + gloss */
.cc-shield {
  width: 72px; height: 80px; padding: 3px; margin-top: 2px;
  clip-path: polygon(50% 0, 100% 15%, 100% 64%, 50% 100%, 0 64%, 0 15%);
  background: linear-gradient(155deg, #fbeeb6 0%, #cba845 30%, #7c5f22 62%, #4a3712 100%);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.55)) drop-shadow(0 0 10px color-mix(in srgb, var(--cc) 45%, transparent));
}
.cc-emblem {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 36px; line-height: 1;
  clip-path: polygon(50% 0, 100% 15%, 100% 64%, 50% 100%, 0 64%, 0 15%);
  background:
    radial-gradient(70% 45% at 50% 18%, rgba(255,255,255,.45), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--cc) 92%, #fff 12%), color-mix(in srgb, var(--cc) 48%, #000 34%));
  box-shadow: inset 0 -8px 16px rgba(0,0,0,.35), inset 0 3px 8px rgba(255,255,255,.15);
  text-shadow: 0 2px 4px rgba(0,0,0,.6), 0 0 12px rgba(0,0,0,.3);
}
/* se você puser a SUA arte em public/clans/<clã>.png ela entra aqui */
.cc-img { width: 86%; height: 86%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.cc-name {
  font-weight: 900; font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase;
  color: #fff; text-shadow: 0 0 12px color-mix(in srgb, var(--cc) 70%, transparent), 0 1px 2px rgba(0,0,0,.6);
}
/* .cc-types usa .tp-row (mesma classe global do filtro de tipo das Hunts) —
   pedido do dono 2026-08-04: tipagem de clã igual à dos filtros. Só zera a
   margin-bottom que o .tp-row herda (ali é espaço pra próxima linha de
   filtro; aqui o próximo elemento já é o bloco de bônus do clã). */
.cc-types.tp-row { margin-bottom: 0; row-gap: 4px; column-gap: 4px; justify-content: center; }
/* pill do filtro é largo pra caber texto (Hunts tem a modal inteira de
   largura); o card de clã é estreito (grid minmax(140px,1fr)) e clã com 3
   tipos (Naturia/Orebound/Malefic) empilhava 1 pill por linha. Encolhe só
   aqui — mesmo ícone/cor/texto, escala menor — pra caber lado a lado. */
.cc-types .tp-chip { padding: 2px 7px 2px 2px; gap: 4px; font-size: 8px; letter-spacing: .4px; }
/* clã com 3 tipos (Naturia/Orebound/Malefic): 1ª linha sempre 1 pill, 2ª
   linha sempre os outros 2 — sem isso o quebra-linha dependia da largura
   de cada palavra (FANTASMA é mais largo que PLANTA+INSETO juntos, então
   só o Malefic quebrava "certo"). Elemento .cc-break vazio (inserido só
   quando há 3 tipos, ver game.js/openClanModal) força a quebra de linha
   SEM esticar o pill de cima — dar flex-basis:100% no próprio pill (1ª
   tentativa) fazia o box dele ocupar a linha toda e ficava gigante/feio. */
.cc-break { flex-basis: 100%; height: 0; }
.cc-types .tp-ic { width: 14px; height: 14px; }
.cc-types .tp-ic svg { width: 9px; height: 9px; }
.cc-bonus { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #b9f0a8; }
.cc-members { font-size: 11px; color: #8b97a5; }
.clan-card .btn { margin-top: 4px; width: 100%; }

/* 🏪 mercado entre jogadores */
.mk-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.mk-tab {
  flex: 1; padding: 9px; border-radius: 8px; cursor: pointer; font-weight: bold;
  background: #101823; border: 1px solid #273246; color: #aeb9c6; font-size: 13px;
}
.mk-tab.on { background: linear-gradient(180deg, #24344a, #1a2636); border-color: #c9a34e; color: #ffd964; }
.mk-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mk-chip {
  padding: 5px 12px; border-radius: 14px; cursor: pointer; font-size: 12px;
  background: #101823; border: 1px solid #37475c; color: #aeb9c6;
}
.mk-chip:hover { border-color: #c9a34e; }
.mk-chip.on { background: #2b2007; border-color: #c9a34e; color: #ffd964; }
.mk-search {
  width: 100%; box-sizing: border-box; margin-bottom: 12px;
  background: #0d141d; color: #fff; border: 1px solid #37475c;
  border-radius: 8px; padding: 9px 12px;
}
.mk-list { display: flex; flex-direction: column; gap: 8px; }
.mk-empty { text-align: center; padding: 30px 10px; color: #cfd8e3; font-size: 15px; line-height: 1.8; }
.mk-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(180deg, #0f1722, #0d141d);
  border: 1px solid #273246; border-radius: 12px; padding: 10px 14px;
  transition: border-color .15s, transform .05s;
}
.mk-row:hover { border-color: #37475c; }
.mk-row.mine { border-color: #3f6a3f; background: linear-gradient(180deg, #0e1a12, #0d1510); }
.mk-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mk-av {
  width: 60px; height: 60px; flex: none; border-radius: 10px;
  background: #0a0f16; border: 1px solid #273246;
  display: flex; align-items: center; justify-content: center;
}
.mk-av.shiny { border-color: #c9a34e; box-shadow: inset 0 0 14px rgba(255,217,100,.25); }
.mk-av canvas { image-rendering: pixelated; }
.mk-info { min-width: 0; }
.mk-nm { font-weight: bold; font-size: 15px; }
.mk-sub { font-size: 12px; margin: 4px 0; }
.mk-seller { font-size: 11px; color: #8b97a5; }
.mk-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.mk-price { font-weight: 900; font-size: 17px; color: #ffd964; white-space: nowrap; display: flex; align-items: center; gap: 3px; }
.mk-price.diamonds { color: #7fe7ff; }
.mk-sellform { display: flex; gap: 8px; margin-bottom: 4px; }

/* 🗳️ votações */
.pl-adminbox {
  background: linear-gradient(180deg, #141b12, #0f150d);
  border: 1px solid #3f5a2f; border-radius: 12px; padding: 12px; margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.pl-adm-h { font-weight: 800; font-size: 13px; color: #b7e08a; }
.pl-inp {
  background: #0d141d; color: #fff; border: 1px solid #37475c;
  border-radius: 8px; padding: 9px 11px; font: inherit; width: 100%;
}
.pl-inp:focus { outline: none; border-color: #6aa9e0; }
.pl-ta { resize: vertical; min-height: 54px; line-height: 1.4; }
.pl-empty { text-align: center; padding: 28px 10px; color: #cfd8e3; font-size: 15px; line-height: 1.8; }
.pl-card {
  background: linear-gradient(180deg, #0f1722, #0d141d);
  border: 1px solid #273246; border-left: 4px solid #4a6a9e;
  border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
}
.pl-card.approved { border-left-color: #4fbf6a; }
.pl-card.progress { border-left-color: #e0a94a; }
.pl-card.done     { border-left-color: #7fb0ff; opacity: .92; }
.pl-card.rejected { border-left-color: #c85454; opacity: .68; }
.pl-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.pl-badge {
  font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
  background: #16233a; color: #8fb8ee; border: 1px solid #2c4468; white-space: nowrap;
}
.pl-badge.approved { background: #123020; color: #7fe0a0; border-color: #2f5a3f; }
.pl-badge.progress { background: #2e2410; color: #f0c877; border-color: #5a4a2f; }
.pl-badge.done     { background: #16233a; color: #aaccff; border-color: #2c4468; }
.pl-badge.rejected { background: #2e1616; color: #e59b9b; border-color: #5a2f2f; }
.pl-by { font-size: 11px; color: #8b97a5; }
.pl-title { font-weight: 800; font-size: 16px; margin: 2px 0; }
.pl-desc { font-size: 13px; color: #c2ccd8; line-height: 1.5; margin: 4px 0 8px; white-space: pre-wrap; word-break: break-word; }
.pl-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: #0a0f16; border: 1px solid #273246; margin-top: 6px; }
.pl-bar-yes { background: linear-gradient(90deg, #3f9e5a, #56c878); }
.pl-bar-no { background: linear-gradient(90deg, #c85454, #e06a6a); }
.pl-nums { display: flex; justify-content: space-between; font-size: 12px; margin-top: 5px; }
.pl-nums .y { color: #7fd47f; font-weight: 700; }
.pl-nums .n { color: #e59b9b; font-weight: 700; }
.pl-vote { display: flex; gap: 8px; margin-top: 10px; }
.pl-vbtn {
  flex: 1; padding: 9px; border-radius: 8px; cursor: pointer; font: inherit; font-weight: 700;
  border: 1px solid #37475c; background: #131c27; color: #dfe7f0; transition: .12s;
}
.pl-vbtn:hover { border-color: #5a7292; }
.pl-vbtn.yes.on { background: linear-gradient(180deg, #1f5a34, #164026); border-color: #4fbf6a; color: #cfeecf; }
.pl-vbtn.no.on { background: linear-gradient(180deg, #5a1f1f, #401616); border-color: #d06a6a; color: #f0d0d0; }
.pl-myvote { margin-top: 9px; font-size: 12px; color: #9aa6b2; font-weight: 600; }
.pl-admin { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #273246; }
.pl-sel { flex: 1; background: #0d141d; color: #fff; border: 1px solid #37475c; border-radius: 8px; padding: 7px; font: inherit; }
.pl-del { flex: none; background: #2a1414; color: #e89b9b; border: 1px solid #5a2f2f; border-radius: 8px; padding: 7px 11px; cursor: pointer; }
.pl-del:hover { background: #3a1a1a; }
.pl-del.wide { flex: 1; width: 100%; text-align: center; font-weight: 700; }
/* caixa de sugestão do jogador (azul) + opções de enquete do ADM */
.pl-suggestbox {
  background: linear-gradient(180deg, #101a26, #0d1017);
  border: 1px solid #2f4a6a; border-radius: 12px; padding: 12px; margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.pl-note { font-size: 11px; color: #8b97a5; line-height: 1.4; }
.pl-opts { display: flex; flex-direction: column; gap: 6px; }
.pl-opt { font-size: 13px; }
.pl-addopt {
  align-self: flex-start; background: #16233a; color: #9cc2f0;
  border: 1px dashed #37475c; border-radius: 8px; padding: 5px 10px; cursor: pointer; font-size: 12px;
}
.pl-addopt:hover { border-color: #6aa9e0; }
/* enquete: opções clicáveis com barra de resultado no fundo */
.pl-enq { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pl-eopt {
  position: relative; overflow: hidden; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; border-radius: 8px; cursor: pointer; font: inherit; font-weight: 600;
  border: 1px solid #37475c; background: #0d141d; color: #dfe7f0; transition: .12s;
}
.pl-eopt:hover:not(.locked) { border-color: #6aa9e0; }
.pl-eopt.locked { cursor: default; }
.pl-eopt.on { border-color: #4fbf6a; }
.pl-efill {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(79,169,224,.30), rgba(79,169,224,.14));
  transition: width .25s;
}
.pl-eopt.on .pl-efill { background: linear-gradient(90deg, rgba(86,200,120,.42), rgba(86,200,120,.18)); }
.pl-etext { position: relative; z-index: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-epct { position: relative; z-index: 1; flex: none; font-size: 12px; color: #cfd8e3; font-weight: 700; }
.pl-etotal { font-size: 11px; color: #8b97a5; margin-top: 6px; }

/* 🚀 boost */
.boost-card {
  background: linear-gradient(180deg, #16101f, #100d17);
  border: 1px solid #4a3568; border-radius: 12px; padding: 14px; margin-bottom: 14px;
}
.boost-tag { color: #ffd964; font-weight: 900; font-size: 15px; margin-left: 4px; }
.boost-bar { position: relative; height: 14px; background: #0a0f16; border: 1px solid #273246; border-radius: 7px; overflow: hidden; margin-top: 4px; }
.boost-bar > div { height: 100%; background: linear-gradient(90deg, #7b4dd8, #c58cff); transition: width .4s; }
.boost-bar span { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 14px; color: #fff; text-shadow: 0 0 3px #000; font-weight: 700; }
.boost-cost { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.bc-item { font-size: 13px; font-weight: 700; padding: 7px 10px; border-radius: 8px; background: #0d141d; border: 1px solid #273246; }
.bc-item.ok { border-color: #2f5a3f; color: #9fe0a8; }
.bc-item.no { border-color: #5a2f2f; color: #e59b9b; }
.boost-maxed { margin-top: 10px; text-align: center; font-weight: 800; color: #ffd964; padding: 8px; }
/* 🚀 +boost no canto CIMA-DIREITA (o ✨ shiny já ocupa a cima-esquerda).
   Virou PÍLULA em 17/08/2026 (pedido do dono): como texto roxo de 9px sem fundo,
   sumia por cima da sprite — e boost é dinheiro do jogador (51💎 + 300M gold +
   550 stone por pokémon). Fundo próprio + borda clara garantem leitura em cima
   de qualquer sprite, inclusive as claras. */
.slot-boost {
  position: absolute; top: 2px; right: 3px; font-size: 10px; font-weight: 900;
  color: #fff; line-height: 14px; padding: 0 5px; border-radius: 9px;
  background: linear-gradient(180deg, #7b3fd4, #5a2aa8);
  border: 1px solid #b98cff; box-shadow: 0 0 6px rgba(150,90,255,.5);
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
/* nos ícones grandes do Time & Box (84–100px) as duas marcas podem crescer mais;
   nas telas de ícone pequeno (troca, mercado, boost — 46-48px) ficam no tamanho
   base pra não cobrir o bicho. */
.tb-team .slot-b.sh, .tb-grid .slot-b.sh { font-size: 17px; }
.tb-team .slot-boost, .tb-grid .slot-boost { font-size: 11px; line-height: 16px; padding: 0 6px; }

/* ⚙️ configurações */
.cfg-row {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: #0d141d; border: 1px solid #273246; border-radius: 10px;
  padding: 11px 13px; margin-bottom: 8px; transition: border-color .15s;
}
.cfg-row:hover { border-color: #37475c; }
.cfg-row input[type=checkbox] { width: 18px; height: 18px; accent-color: #56c878; flex: none; cursor: pointer; }
.cfg-row b { display: block; font-size: 14px; }
.cfg-desc { display: block; font-size: 11px; color: #8b97a5; margin-top: 2px; }

/* ⚔️ DUELO PvP */
#duel-challenge {
  position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%);
  z-index: 210; padding: 16px; width: 320px;
  border: 1px solid #a04848; box-shadow: 0 12px 40px rgba(0,0,0,.6);
}
.dc-t { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.dc-sub { font-size: 12px; color: #9aa6b2; margin-bottom: 10px; line-height: 1.4; }
.dc-row { display: flex; gap: 8px; margin-bottom: 10px; }
.dc-amt { flex: 1; background: #0d141d; color: #fff; border: 1px solid #37475c; border-radius: 8px; padding: 8px 10px; font: inherit; }
.dc-cur { background: #0d141d; color: #fff; border: 1px solid #37475c; border-radius: 8px; padding: 8px; font: inherit; }
.dc-btns { display: flex; gap: 8px; }
.dc-btns .btn { flex: 1; }
#duel-panel {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  z-index: 120; width: min(520px, 94vw); padding: 10px 14px 12px;
  border: 1px solid #a04848; box-shadow: 0 8px 30px rgba(160,40,40,.35);
}
.dp-head { font-size: 12px; color: #cfd8e3; margin-bottom: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dp-wager { color: #ffd964; font-weight: 700; }
.dp-left { margin-left: auto; font-size: 11px; color: #8b97a5; }
.dp-arena { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dp-f { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 120px; }
.dp-nm { font-size: 12px; font-weight: 700; }
.dp-hp { position: relative; width: 120px; height: 13px; background: #0a0f16; border: 1px solid #273246; border-radius: 6px; overflow: hidden; }
.dp-hp > div { height: 100%; background: linear-gradient(90deg, #3f9e5a, #56c878); transition: width .6s; }
.dp-hp.foe > div { background: linear-gradient(90deg, #c85454, #e06a6a); }
.dp-hp span { position: absolute; inset: 0; text-align: center; font-size: 9px; line-height: 13px; color: #fff; text-shadow: 0 0 3px #000; }
.dp-mid { flex: 1; text-align: center; font-size: 13px; }
.dp-vs { font-size: 20px; font-weight: 900; color: #a04848; }
.dp-count { font-size: 30px; font-weight: 900; color: #ffd964; text-shadow: 0 0 12px rgba(255,217,100,.5); }
.dp-switch { color: #ffd964; font-weight: 700; animation: dpblink 1s infinite; }
@keyframes dpblink { 50% { opacity: .45; } }
.dp-bench { display: flex; gap: 6px; justify-content: center; margin-top: 9px; }
.dp-bench.hot .dp-slot:not(.dead) { cursor: pointer; border-color: #ffd964; box-shadow: 0 0 8px rgba(255,217,100,.45); animation: dpblink 1s infinite; }
.dp-bench.hot .dp-slot:not(.dead):hover { transform: scale(1.18); animation: none; }
.dp-slot { width: 42px; height: 42px; border-radius: 8px; background: #0d141d; border: 2px solid #273246; display: flex; align-items: center; justify-content: center; position: relative; }
.dp-slot.cur { border-color: #56c878; }
.dp-slot.dead { opacity: .35; filter: grayscale(1); }
.dp-ff {
  position: absolute; top: 8px; right: 10px; background: #2a1414; color: #e89b9b;
  border: 1px solid #5a2f2f; border-radius: 7px; padding: 3px 9px; cursor: pointer; font-size: 11px;
}
.dp-ff:hover { background: #3a1a1a; }

/* ✨ seletor de auras */
.aura-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.aura-opt {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: #0d141d; border: 1px solid #273246; border-radius: 10px;
  padding: 12px 8px; cursor: pointer; color: #cfd8e3; font-size: 12px;
}
.aura-opt:hover { border-color: #37475c; }
.aura-opt.on { border-color: #c9a34e; background: #14110a; color: #ffd964; }
.aura-dot {
  width: 34px; height: 34px; border-radius: 50%;
  box-shadow: 0 0 12px 2px rgba(255,255,255,.15);
}
.aura-dot.none {
  background: #101823; border: 1px dashed #4a5a6e; color: #6a7787;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  box-shadow: none;
}

/* 🔗 pokémon linkado no chat (shift+clique no Time/Box) */
.poke-link { color: #7fe7ff; cursor: pointer; text-decoration: underline; font-weight: bold; }
.poke-link:hover { color: #fff; }

/* ⚾ gerenciador em GRADE compacta — todos lado a lado, clique expande */
.bm-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px; align-items: start;
}
.bm-card {
  background: #0d141d; border: 1px solid #273246; border-radius: 10px;
  overflow: hidden; transition: border-color .12s;
}
.bm-card:hover { border-color: #37475c; }
.bm-card.open { border-color: #c9a34e; }
.bm-head { display: flex; align-items: center; gap: 9px; padding: 8px 10px; cursor: pointer; }
.bm-head canvas { image-rendering: pixelated; flex: none; }
.bm-cinfo { flex: 1; min-width: 0; }
.bm-cnm { font-weight: bold; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-cmeta { font-size: 11px; color: #aeb9c6; margin-top: 2px; }
/* 🔴 MARCA DE CAPTURADO — a MESMA pokébola da Pokédex (.dex-cell.caught::before,
   icons/pokebola.png). Antes era um "✓" verde: dois desenhos diferentes pra
   dizer a mesma coisa em duas telas. Agora quem aprendeu a bola na Pokédex lê
   o Gerenciador de Bolas sem reaprender nada.
   Aqui a bola é INLINE (colada na palavra) e não selo de canto como na dex,
   porque nesta tela ela divide a linha com a contagem de bolas — "41.241 bolas
   · 🔴 capturado". */
.bm-caught {
  color: #7fd47f; font-weight: bold;
  display: inline-flex; align-items: center; gap: 4px; vertical-align: -2px;
}
.bm-caught::before {
  content: ''; width: 13px; height: 13px; flex: none;
  background: url('icons/pokebola.png') center/contain no-repeat;
  image-rendering: pixelated; filter: drop-shadow(0 0 2px #000);
}
.bm-card.caught { opacity: .82; }
.bm-card.caught .bm-head { background: linear-gradient(90deg, rgba(63,143,74,.10), transparent); }
.bm-caret { color: #8b97a5; font-size: 11px; flex: none; transition: transform .15s; }
.bm-card.open .bm-caret { transform: rotate(180deg); color: #ffd964; }
/* bolas escondidas até abrir */
.bm-chips { display: none; flex-wrap: wrap; gap: 6px; padding: 0 10px 10px; }
.bm-card.open .bm-chips { display: flex; }
.bm-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
  background: #101823; border: 1px solid #37475c; border-radius: 11px;
  padding: 3px 10px; color: #e6edf5;
}
.bm-chip canvas { image-rendering: pixelated; }
.cp-title { color: #ffd964; font-weight: bold; letter-spacing: .5px; }
.cp-balls { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.cp-ball {
  font-size: 10px; padding: 2px 7px; border-radius: 9px; cursor: pointer;
  background: #101823; border: 1px solid #37475c; color: #aeb9c6;
}
.cp-ball.sel { border-color: #a3852f; color: #ffd964; }
.cp-list { display: flex; flex-direction: column; gap: 5px; max-height: 230px; overflow-y: auto; }
.cp-row {
  display: flex; align-items: center; gap: 8px;
  background: #0d141d; border: 1px solid #273246; border-radius: 6px; padding: 4px 8px;
}
.cp-row canvas { image-rendering: pixelated; }
.cp-row .nm { flex: 1; min-width: 0; font-size: 12px; }
.cp-row .nm .dim { font-size: 10px; display: block; }
.cp-row.shiny { border-color: #b98f1f; }

/* ------------------------------------------------ chat */
#chat { left: 12px; bottom: 12px; width: 330px; height: 190px; display: flex; flex-direction: column; }
.chat-tabs { display: flex; gap: 3px; padding: 6px 6px 0; }
.ct {
  background: #101823; border: 1px solid #273246; color: #aeb9c6;
  border-radius: 5px 5px 0 0; padding: 3px 8px; cursor: pointer; font-size: 11px;
  white-space: nowrap;
}
.ct.active { color: #ffd964; border-color: #715c25; }
/* 🔔 bolinha roxa na aba Privado quando chega mensagem e você está em outra aba */
.ct.has-pm { color: #c58cff; border-color: #6b45a8; }
.ct.has-pm::after { content: " ●"; color: #c58cff; font-size: 9px; vertical-align: 1px; }

/* 📩 sub-abas do privado: uma caixa por pessoa, cada uma com × pra fechar */
.pm-tabs {
  display: flex; gap: 3px; padding: 4px 6px 0; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; border-top: 1px solid #273246;
}
.pm-tabs::-webkit-scrollbar { height: 0; }
.pmt {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
  background: #16101f; border: 1px solid #3a2b52; color: #b9a8cd;
  border-radius: 5px 5px 0 0; padding: 2px 5px 2px 8px; cursor: pointer;
  font-size: 10.5px; white-space: nowrap; max-width: 130px;
}
.pmt:hover { border-color: #6b45a8; color: #e0d0f4; }
.pmt.active { color: #e6d4ff; border-color: #8a5cff; background: #1e1430; }
.pmt .pmt-n { overflow: hidden; text-overflow: ellipsis; max-width: 84px; }
.pmt .pmt-b {
  background: #8a5cff; color: #fff; border-radius: 8px; padding: 0 4px;
  font-size: 9px; font-weight: bold; line-height: 13px; min-width: 13px; text-align: center;
}
.pmt .pmt-x { color: #7a6a90; padding: 0 1px; font-size: 12px; line-height: 1; }
.pmt .pmt-x:hover { color: #ff8f8f; }
.pmt.pmt-add { padding: 2px 8px; color: #8a5cff; font-weight: bold; }

#chat-log { flex: 1; overflow-y: auto; padding: 6px 10px; font-size: 11.5px; line-height: 1.5; }
#chat-log .t { color: #5d6b7a; margin-right: 4px; }
#chat-log .m-catch { color: #7fd47f; }
#chat-log .m-shiny { color: #ffd964; }
#chat-log .m-level { color: #6fc3ff; }
#chat-log .m-evolve { color: #d99cff; }
#chat-log .m-rare { color: #ffb066; }
#chat-log .m-flee { color: #ff8f8f; }
#chat-log .m-zone { color: #9ad0c2; }
#chat-log .m-chat { color: #e8eef4; }
#chat-log .m-chat .cn { color: #6fc3ff; font-weight: bold; }
#chat-log .m-trade { color: #ffe2ad; }
#chat-log .m-trade .cn { color: #f0b859; font-weight: bold; }
#chat-log .m-pm { color: #e8d9f4; }
#chat-log .m-pm .cn { color: #c58cff; font-weight: bold; }
#chat-log .pm-name { cursor: pointer; text-decoration: underline dotted; }
.chat-input { display: flex; gap: 6px; padding: 6px 8px; border-top: 1px solid #273246; }
.chat-input input {
  flex: 1; background: #0d141d; color: #fff;
  border: 1px solid #37475c; border-radius: 5px; padding: 5px 9px; outline: none; font-size: 12px;
}
.chat-input input:focus { border-color: #a3852f; }

/* banner do World Boss */
#boss-banner {
  top: 56px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 8px 14px; min-width: 380px;
  border-color: #8a2f2f;
}
#boss-face { image-rendering: pixelated; }
.bb-info { flex: 1; min-width: 0; }
.bb-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
#boss-name { color: #ff9d9d; font-weight: bold; letter-spacing: .5px; }
.bb-bar > div { background: linear-gradient(#e05252, #8a2f2f) !important; }

/* tarefas */
.task-row { background: #0d141d; border: 1px solid #273246; border-radius: 7px; padding: 10px 12px; margin-bottom: 8px; }
.task-row .bar { margin-top: 6px; }
.task-row .bar > div { background: linear-gradient(#6fc3ff, #2f6d9d); }
.task-row.done { border-color: #3f7d46; }

/* ------------------------------------------------ modais */
#modal-bg {
  /* 130 > login (100): os Termos de Uso precisam abrir NA TELA DE LOGIN */
  position: fixed; inset: 0; z-index: 130;
  background: rgba(0, 0, 0, .6);
  display: flex; align-items: center; justify-content: center;
}
#modal { width: min(760px, 92vw); max-height: 84vh; display: flex; flex-direction: column; }
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid #273246;
  color: #ffd964; font-weight: bold; letter-spacing: .5px;
}
#modal-close { background: none; border: none; color: #8b97a5; font-size: 15px; cursor: pointer; }
/* 🚀 arte no lugar do emoji no cabeçalho do modal — quem troca é o
   boostTitleIcon() do settings-extra.js (o título do painel de Boost vem do
   game.js ofuscado como texto puro). Fica com a mesma altura da linha do
   texto dourado, sem empurrar o ✕ do canto. */
#modal-title .mt-ic { height: 22px; width: auto; vertical-align: -6px; margin-right: 6px; }
#modal-body { overflow-y: auto; padding: 14px 16px; }

/* pokédex */
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.dex-cell {
  background: #0d141d; border: 1px solid #273246; border-radius: 7px;
  text-align: center; padding: 8px 4px; font-size: 10.5px; color: #8b97a5;
  /* as duas marcas (bola/✅) são ::before e ::after ancorados nos cantos */
  position: relative;
}
.dex-cell canvas { image-rendering: pixelated; filter: grayscale(1) brightness(.45); }
.dex-cell.caught { border-color: #3f7d46; color: #dfe6ee; }
.dex-cell.caught canvas { filter: none; }
.dex-cell.seen canvas { filter: grayscale(1) brightness(.8); }
.dex-cell .no { color: #5d6b7a; display: block; }
/* ✅ POKELOG CONCLUÍDO (17/08/2026): meta de abates da espécie batida. Borda
   DOURADA + selo, pra não se confundir com o verde de "capturado" — são duas
   coisas diferentes e o jogador precisa distinguir de relance na grade. */
.dex-cell.done { border-color: #c9a34e; }
/* ✅ POKELOG no canto DIREITO · 🔴 POKÉBOLA (capturado) no canto ESQUERDO.
   Um canto pra cada coisa: as duas marcas são independentes (dá pra fechar o
   pokelog de uma espécie que você nunca capturou — o pokelog conta ABATE) e
   assim nunca se sobrepõem nem trocam de lugar.
   ::before/::after e não <span>: o texto da célula é lido pela busca e pelos
   testes ("#001Bulbasaur") — marca dentro do textContent suja os dois. */
.dex-cell.done::after {
  content: '✅'; position: absolute; top: 2px; right: 3px;
  font-size: 12px; line-height: 1; filter: drop-shadow(0 0 2px #000);
}
/* a arte é a MESMA bola do botão Time & Box da topbar (icons/pokebola.png) —
   um vocabulário só, e o arquivo já está no cache de todo mundo. */
.dex-cell.caught::before {
  content: ''; position: absolute; top: 3px; left: 4px;
  width: 13px; height: 13px; background: url('icons/pokebola.png') center/contain no-repeat;
  image-rendering: pixelated; filter: drop-shadow(0 0 2px #000);
}

/* 🔎 barra de filtros da Pokédex (montada no game.js).
   Os chips de TIPO reusam .tp-row/.tp-chip do filtro de hunts lá embaixo —
   mesma paleta, mesmos ícones, um vocabulário só. */
.dexf { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
/* busca + abas de posse na MESMA fileira: em pé, o cabeçalho comia ~200px dos
   ~630px úteis do modal e sobrava pouco mais de 3 fileiras de bicho. */
.dexf-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dexf-topo .dexf-busca { flex: 1 1 220px; width: auto; }
.dexf-topo .dexf-posse { flex: 0 0 auto; }
.dexf-busca {
  width: 100%; box-sizing: border-box; padding: 7px 11px; border-radius: 8px;
  background: #0d141d; border: 1px solid #273246; color: #dfe6ee;
  font: 400 12.5px/1.3 Verdana, system-ui, sans-serif;
}
.dexf-busca::placeholder { color: #5d6b7a; }
.dexf-busca:focus { outline: none; border-color: #c9a34e; box-shadow: 0 0 0 2px rgba(201, 163, 78, .18); }
.dexf-posse { display: flex; gap: 6px; }
.dexf-tab {
  cursor: pointer; padding: 6px 10px; border-radius: 8px; white-space: nowrap;
  background: #0d141d; border: 1px solid #273246; color: #8b97a5;
  font: 700 10.5px/1 Verdana, system-ui, sans-serif; letter-spacing: .5px;
  transition: background .12s, border-color .12s, color .12s;
}
.dexf-tab:hover { border-color: #3d4d63; color: #cfd8e3; }
.dexf-tab.on { background: #16212f; border-color: #c9a34e; color: #ffd964; }
/* a linha de chips não tem margem própria aqui — o gap do .dexf já separa */
.dexf-tipos { margin-bottom: 0; }

/* ── 🪜 FILTRO DE TIER (F..SS) ────────────────────────────────────────────────
   As cores são as MESMAS da tier list de docs/tier-list.html — a paleta ESCURA
   dela, que é a que enxerga bem no fundo #0d141d do jogo. Um degrau de matiz
   por tier: quente em cima, frio embaixo. Mudou lá, muda aqui.
   O chip reusa a mecânica do .tp-chip (var --tc + color-mix), então hover,
   estado ligado e foco saem de graça e iguais aos chips de tipo. */
/* 🪜 PALETA DOS TIERS — a MESMA de docs/tier-list.html (a variante escura,
   que é a que enxerga no fundo do jogo). Mora no :root porque a etiqueta de
   tier aparece em cinco telas diferentes, e três delas são desenhadas pelo
   settings-extra.js, fora de qualquer contêiner da Pokédex. Mudou lá, muda
   aqui — é um degrau de matiz por tier, quente em cima e frio embaixo. */
/* 🪜 QUATRO tiers desde 30/08/2026 (SS absorvido pelo S; D, E e F pelo C).
   O degrau de matiz foi REESPAÇADO pra usar a escala inteira: com 4 letras nas
   4 primeiras cores, o C herdaria o verde-claro do antigo B e a tela perderia
   o contraste entre o topo e o fundo. Agora S é o quente e C é o frio, como a
   leitura de tier list espera. */
:root {
  --t-S: #e07aa8; --t-A: #e08a5c; --t-B: #ceac4a; --t-C: #4bc9ab;
}
/* ── a ETIQUETA de tier ──────────────────────────────────────────────────────
   Pastilha pequena, pra caber ao lado de um nome sem competir com ele. O tom
   sai todo de --tc, então trocar a paleta acima repinta as cinco telas. */
.tier-tag {
  /* ⚠️ o padrão era --t-F, que SUMIU com o colapso de 30/08. Variável de CSS
     inexistente não é erro: a cor simplesmente não aplica e a pastilha sai
     transparente, sem nada no console. O piso agora é o C, que é o degrau mais
     baixo que existe. */
  --tc: var(--t-C);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 7px; border-radius: 5px; vertical-align: middle; white-space: nowrap;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 30%, #131c28), color-mix(in srgb, var(--tc) 12%, #0b111a));
  border: 1px solid color-mix(in srgb, var(--tc) 55%, #37475c);
  color: color-mix(in srgb, var(--tc) 78%, #ffffff);
  font: 900 10px/1.15 Verdana, system-ui, sans-serif; letter-spacing: .6px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
/* variante CHEIA, pra onde a etiqueta é o assunto (ficha da Pokédex, cabeçalho) */
.tier-tag.solid {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 88%, #fff 10%), color-mix(in srgb, var(--tc) 48%, #000 30%));
  border-color: color-mix(in srgb, var(--tc) 72%, #fff);
  color: #0b1119; text-shadow: none;
}
.tier-tag.t-S { --tc: var(--t-S) }  .tier-tag.t-A { --tc: var(--t-A) }
.tier-tag.t-B { --tc: var(--t-B) }  .tier-tag.t-C { --tc: var(--t-C) }
.dexf-tiers { margin-bottom: 0; gap: 6px; }
/* a letra do tier no lugar do ícone do tipo — mesma caixa de 20px */
.tr-let {
  width: 22px; height: 20px; flex: none; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; color: var(--tc);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 26%, #1a2434), #0a0f18);
  border: 1px solid color-mix(in srgb, var(--tc) 42%, #37475c);
  font: 900 10px/1 Verdana, system-ui, sans-serif; letter-spacing: .5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .5);
  transition: background .12s, border-color .12s, color .12s;
}
.tp-chip:hover .tr-let {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 50%, #1a2434), #0a0f18);
  border-color: color-mix(in srgb, var(--tc) 65%, #37475c);
}
.tp-chip.on .tr-let {
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 86%, #fff 12%), color-mix(in srgb, var(--tc) 46%, #000 30%));
  border-color: color-mix(in srgb, var(--tc) 75%, #fff);
}
/* separador antes dos botões de ordenar/agrupar, pra ler como outro assunto */
.dexf-tiers .tr-sep {
  width: 1px; align-self: stretch; margin: 0 4px;
  background: linear-gradient(180deg, transparent, #37475c, transparent);
}
.tr-ord {
  cursor: pointer; padding: 5px 11px; border-radius: 15px;
  background: #101823; border: 1px solid #37475c; color: #8b97a5;
  font: 700 10px/1 Verdana, system-ui, sans-serif; letter-spacing: .6px;
  transition: background .12s, border-color .12s, color .12s;
}
.tr-ord:hover { border-color: #4a5a70; color: #cfd8e3; }
.tr-ord.on { background: #16212f; border-color: #c9a34e; color: #ffd964; }
/* ── cabeçalho de grupo: ocupa a fileira inteira da grade ────────────────── */
.dex-head {
  --tc: #9aa19e;
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px;
  margin: 6px 0 0; padding: 5px 2px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--tc) 34%, #273246);
}
.dex-head:first-child { margin-top: 0; }
.dex-head .dh-let {
  min-width: 34px; padding: 3px 8px; border-radius: 6px; text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 82%, #fff 10%), color-mix(in srgb, var(--tc) 44%, #000 30%));
  border: 1px solid color-mix(in srgb, var(--tc) 70%, #fff);
  color: #0b1119; font: 900 11px/1.25 Verdana, system-ui, sans-serif; letter-spacing: .8px;
}
.dex-head .dh-nm { color: color-mix(in srgb, var(--tc) 60%, #cfd8e3);
  font: 700 11px/1 Verdana, system-ui, sans-serif; letter-spacing: .5px; }
.dex-head .dh-qt { margin-left: auto; color: #7c8a99; font-size: 10.5px; }
.dexf-rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dexf-cont { color: #7c8a99; font-size: 11px; }
/* 🔖 legenda das marcas da grade. `margin-right:auto` gruda ela no contador e
   empurra o "✕ limpar" pra ponta direita (o rodapé é space-between). */
.dexf-leg {
  color: #6f7d8c; font-size: 10.5px; margin-right: auto;
  display: flex; align-items: center; gap: 4px;
}
.dexf-leg .lg-ball {
  width: 11px; height: 11px; display: inline-block;
  background: url('icons/pokebola.png') center/contain no-repeat; image-rendering: pixelated;
}
.dexf-vazio { grid-column: 1 / -1; text-align: center; color: #7c8a99;
  font-size: 12px; padding: 26px 10px; }

/* zonas */
.zone-row {
  display: flex; align-items: center; gap: 10px;
  background: #0d141d; border: 1px solid #273246; border-radius: 7px;
  padding: 8px 12px; margin-bottom: 7px;
}
.zone-row.locked { opacity: .45; }
.zone-row.current { border-color: #a3852f; }
.zone-row .zr-info { flex: 1; }
.zone-row .zr-poke { font-size: 11px; color: #8b97a5; }

/* time / loja / perfil */
.poke-row {
  display: flex; align-items: center; gap: 10px;
  background: #0d141d; border: 1px solid #273246; border-radius: 7px;
  padding: 6px 12px; margin-bottom: 6px;
}
.poke-row canvas { image-rendering: pixelated; }
.poke-row .pr-nm { flex: 1; }
.poke-row.active-poke { border-color: #3f7d46; }
.poke-row.shiny { border-color: #b98f1f; }
/* 🛒 hero da loja do Mark: avatar + saldo em gold sempre à vista */
.shop-hero {
  display: flex; gap: 12px; align-items: center; margin-bottom: 12px;
  background: linear-gradient(120deg, #1a1408, #2b2007 60%, #1a1408);
  border: 1px solid #7a5a10; border-radius: 10px; padding: 12px 14px;
}
.sh-av {
  width: 54px; height: 54px; border-radius: 50%; flex: none; overflow: hidden;
  background: #101823; border: 1px solid #37475c;
  display: flex; align-items: center; justify-content: center;
}
.sh-av canvas { image-rendering: pixelated; }
.sh-t { font-weight: bold; color: #f3e7c8; }
.sh-bal { font-size: 22px; font-weight: 900; color: #ffd964; display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.sh-bal .sh-ic { display: inline-flex; }
.sh-sub { color: #8b97a5; font-size: 11px; }

.shop-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: #101823; border: 1px solid #1c2836; border-radius: 8px;
  margin-bottom: 6px; transition: border-color .15s;
}
.shop-row:hover { border-color: #31465f; }
.shop-row .sr-nm { flex: 1; }
.shop-row .sr-ic { width: 30px; display: flex; justify-content: center; }
.shop-h {
  margin: 14px 0 8px; padding-bottom: 4px; border-bottom: 1px solid #24344a;
  color: #ffd964; font-weight: bold; font-size: 13px; letter-spacing: .4px;
}
.shop-h:first-child { margin-top: 0; }
.tag.dia { background: #1c2c44; color: #8fd0ff; border-color: #2c4a6e; }

/* 🛒 Loja do Mark custom (settings-extra: botões padronizados + venda de loot) */
/* 🗂 abas Comprar/Vender (mesmo formato do NPC Guru nativo) */
#mk-shop .mk-tabs { gap: 10px; margin-bottom: 14px; }
#mk-shop .mk-tab {
  padding: 11px 10px; font-size: 14px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: border-color .15s, color .15s, background .15s;
}
#mk-shop .mk-tab:hover { border-color: #c9a34e; color: #ffd964; }
#mk-shop .mk-tab.on { box-shadow: inset 0 0 14px rgba(201,163,78,.18); }
/* 🏷️ atalho largo pro painel "Vender por Raridade" */
#mk-shop .mk-wide {
  width: 100%; padding: 11px 10px; margin-bottom: 14px;
  border-radius: 10px; cursor: pointer; font-weight: bold; font-size: 14px;
  background: #101823; border: 1px solid #273246; color: #aeb9c6;
  transition: border-color .15s, color .15s;
}
#mk-shop .mk-wide:hover { border-color: #c9a34e; color: #ffd964; }
#mk-shop .mk-sec { margin-bottom: 14px; }
.mk-item {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 10px; margin: 6px 0;
  background: rgba(20, 30, 45, .55); border: 1px solid #2a3d55; border-radius: 8px;
}
.mk-item .mk-ic { flex: none; image-rendering: pixelated; }
.mk-item .mk-nm { flex: 1; min-width: 0; }
.mk-item .mk-hint { opacity: .6; font-size: 11px; }
.mk-price {
  border: 1px solid #2a3d55; border-radius: 10px; padding: 2px 8px;
  font-size: 11px; white-space: nowrap; color: #ffd964;
}
.mk-qty {
  background: #c9a34e; color: #1a1408; border: 0; border-radius: 10px;
  padding: 3px 10px; font-size: 11px; font-weight: bold; cursor: pointer;
}
.mk-qty:hover { background: #e0b95e; }
.mk-qty:disabled { opacity: .5; cursor: default; }
#mk-shop .mk-empty { color: #5f7085; font-size: 12px; padding: 4px 2px 10px; }
/* barra seletora de quantidade (comprar 1–1000 / vender 1–máx) */
.mk-bar { flex-basis: 100%; display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.mk-bar .mk-range { flex: 1; min-width: 60px; accent-color: #c9a34e; cursor: pointer; }
.mk-bar .mk-num {
  width: 60px; background: #101823; border: 1px solid #2a3d55; border-radius: 8px;
  color: #e8eef5; padding: 3px 6px; font-size: 12px; text-align: center;
}
/* 💵 total da linha (preço unitário × quantidade do slider) */
.mk-bar .mk-tot {
  flex: none; border: 1px solid #2a3d55; border-radius: 10px; padding: 3px 8px;
  font-size: 11px; font-weight: bold; white-space: nowrap; color: #ffd964;
  background: rgba(16, 24, 35, .7);
}
/* na COMPRA: total passou do saldo → o jogador vê antes de clicar */
.mk-bar .mk-tot.low { color: #ff8f8f; border-color: #6b2b2b; background: rgba(50, 16, 16, .5); }

/* 💎 Loja de Diamantes */
.dia-hero {
  display: flex; gap: 14px; align-items: center; margin-bottom: 14px;
  background: linear-gradient(135deg, #16273f 0%, #0e1826 60%, #101a2b 100%);
  border: 1px solid #2c4a6e; border-radius: 14px; padding: 14px 16px;
  box-shadow: inset 0 0 30px rgba(77,143,224,.08);
}
/* 🎁 aba de PACOTES + 👑 VIP */
.pkg-banner { display: block; width: 100%; max-width: 100%; border-radius: 12px; margin: 0 0 12px; border: 1px solid #3a2f14; }
.vip-status { background: linear-gradient(135deg, #3a2e0c, #1c1606); border: 1px solid #b8952f; color: #ffe08a; border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; font-size: 13px; }
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.pkg-card { background: #101823; border: 1px solid #24344a; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; }
.pkg-card.vip { border-color: #d4af37; background: linear-gradient(160deg, #201a08 0%, #141019 70%); box-shadow: 0 0 18px rgba(212,175,55,.18); }
.pkg-h { font-weight: bold; font-size: 15px; color: #ffd964; margin-bottom: 4px; }
.pkg-card.vip .pkg-h { color: #ffdf7a; }
.pkg-desc { font-size: 12.5px; color: #ccd6e6; line-height: 1.45; flex: 1; }
.pkg-items { font-size: 11.5px; color: #8fb0d0; margin-top: 6px; }
.dia-hero .dh-gem {
  background: #0b121d; border: 2px solid #4d8fe0; border-radius: 12px; padding: 6px;
  box-shadow: 0 0 14px rgba(77,143,224,.35);
}
.dia-hero .dh-gem canvas { image-rendering: pixelated; display: block; }
.dia-hero .dh-t { font-size: 13px; color: #8aa6c4; letter-spacing: .5px; text-transform: uppercase; }
.dia-hero .dh-bal { font-size: 28px; font-weight: bold; color: #9fd4ff; line-height: 1.1; text-shadow: 0 2px 8px rgba(77,143,224,.4); }
.dia-hero .dh-bal span { font-size: 20px; }
.dia-hero .dh-sub { font-size: 11.5px; color: #7c8a99; margin-top: 4px; }
.sh-sub { font-size: 11px; color: #7c8a99; font-weight: normal; letter-spacing: 0; }
.gem-price { color: #8fd0ff; font-weight: bold; white-space: nowrap; }

.dia-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; }
.dia-card {
  position: relative; background: #101823; border: 1px solid #1c2836; border-radius: 12px;
  padding: 12px 8px 10px; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 3px; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.dia-card:hover { border-color: #2c4a6e; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.dia-card.master { border-color: #6e57b0; }
.dia-card.master:hover { box-shadow: 0 0 16px rgba(147,112,219,.35); }
.dia-card.legendary { border-color: #c9a34e; background: linear-gradient(#141019, #101823); }
.dia-card.legendary:hover { box-shadow: 0 0 16px rgba(201,163,78,.35); }
.dia-card .dc-ic { height: 40px; display: flex; align-items: center; justify-content: center; }
.dia-card .dc-ic canvas { image-rendering: pixelated; }
.dia-card .dc-nm { font-weight: bold; color: #eaf0f6; font-size: 12.5px; }
.dia-card .dc-sub { font-size: 10.5px; color: #7c8a99; }
.dia-card .dc-price { font-size: 14px; margin-top: 2px; }
.dia-card .dc-have { font-size: 10px; color: #6a7889; margin-bottom: 6px; }
.dia-card .dc-buy { display: flex; gap: 5px; margin-top: auto; }
.dia-card .dc-buy .btn { flex: 1; }

/* 📢 broadcast do ADM na TELA (todo mundo vê) */
#broadcast-banner {
  position: fixed; top: 120px; left: 50%; transform: translateX(-50%) scale(.9);
  max-width: 76vw; z-index: 200; pointer-events: none;
  background: linear-gradient(135deg, rgba(58,32,4,.95), rgba(30,16,2,.95));
  border: 2px solid #ff9a3c; border-radius: 10px;
  padding: 14px 26px; text-align: center;
  color: #ffb46b; font-size: 20px; font-weight: bold; letter-spacing: .5px;
  text-shadow: 0 2px 6px rgba(0,0,0,.8);
  box-shadow: 0 6px 30px rgba(255,154,60,.35);
  opacity: 0; transition: opacity .3s, transform .3s;
}
#broadcast-banner.show { opacity: 1; transform: translateX(-50%) scale(1); }

/* talkactions: ADM fala laranja, broadcast destacado */
.cn.adm { color: #ff9a3c; font-weight: bold; }
.cn.tutor { color: #7fd0ff; font-weight: bold; }
.adm-txt { color: #ffb46b; }
.m-broadcast { color: #ff9a3c; font-weight: bold; }

/* escolha do pokémon inicial (criar conta) */
.starter-row { display: flex; gap: 8px; }
/* 📜 aceite dos termos no registro */
.terms-check { display: flex; align-items: flex-start; gap: 8px; margin: 12px 2px 2px; color: #9fb0c8; font-size: 12.5px; line-height: 1.45; cursor: pointer; }
.terms-check input { margin-top: 2px; width: 16px; height: 16px; accent-color: #3fbf6f; flex-shrink: 0; cursor: pointer; }
.terms-doc { max-height: 62vh; overflow-y: auto; padding-right: 6px; }
.terms-doc h4 { margin: 14px 0 4px; color: #ffd964; font-size: 14px; }
.terms-doc p { margin: 0 0 6px; color: #ccd6e6; font-size: 13px; line-height: 1.55; }
.terms-doc .terms-ver { font-size: 11px; margin-bottom: 8px; }
.starter-card {
  flex: 1; background: #101823; border: 2px solid #1c2836; border-radius: 10px;
  padding: 8px 4px; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: border-color .15s, transform .15s;
}
.starter-card:hover { border-color: #31465f; transform: translateY(-2px); }
.starter-card.sel { border-color: #c9a34e; box-shadow: 0 0 10px rgba(201,163,78,.35); }
.starter-card canvas { image-rendering: pixelated; }
.starter-card span { font-size: 12px; color: #c9d3dd; }

/* doação com valor livre */
.donate-card {
  background: linear-gradient(135deg, #131f31, #101823); border: 1px solid #2c4a6e;
  border-radius: 12px; padding: 14px;
}
.donate-card .dn-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.donate-card .dn-title { font-weight: bold; color: #eaf0f6; font-size: 14px; }
.donate-card .dn-rate { background: #1c2c44; color: #8fd0ff; border: 1px solid #2c4a6e; border-radius: 8px; padding: 2px 9px; font-size: 12px; font-weight: bold; }
.donate-card .dn-warn { padding: 8px 10px; border: 1px dashed #8a6d3b; border-radius: 8px; margin-bottom: 10px; color: #d8b878; font-size: 12px; }
.donate-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.donate-presets .btn { flex: 1; min-width: 56px; }
.donate-presets .btn.sel { border-color: #4d8fe0; color: #cfe6ff; box-shadow: 0 0 8px rgba(77,143,224,.3); }
.donate-row { display: flex; align-items: center; gap: 8px; }
.donate-row span { color: #9fb2c5; }
.donate-row input {
  flex: 1; background: #0b111a; color: #e8eef4; border: 1px solid #2a3d55;
  border-radius: 6px; padding: 8px 10px; font-size: 15px;
}
.donate-conv { color: #8fd0ff; font-size: 15px; font-weight: bold; white-space: nowrap; }

/* outfits */
.outfit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.outfit-card {
  position: relative; background: #101823; border: 1px solid #1c2836; border-radius: 10px;
  padding: 8px 6px; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 5px; transition: border-color .15s, transform .15s;
}
.outfit-card:hover { border-color: #31465f; transform: translateY(-2px); }
.outfit-card.cur { border-color: #3f7d46; box-shadow: 0 0 8px rgba(63,125,70,.35); }
.outfit-card.owned { border-color: #24405e; }
.outfit-card canvas { image-rendering: pixelated; }
.outfit-card .oc-nm { font-size: 11.5px; color: #c9d3dd; }
.outfit-card .oc-badge { position: absolute; top: 5px; right: 5px; font-size: 9px; font-weight: bold; padding: 1px 6px; border-radius: 7px; }
.outfit-card .oc-badge.cur { background: #16341c; color: #7fe08a; border: 1px solid #3f7d46; }
.outfit-card .oc-badge.own { background: #0e2436; color: #7fd0ff; border: 1px solid #24405e; padding: 1px 5px; }
.outfit-card .oc-badge.skin { background: #2e1a36; color: #e0a6ff; border: 1px solid #6a3d80; }

/* 🎨 pintor de outfit */
.paint-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.paint-lb { flex: none; width: 58px; font-size: 12px; font-weight: 700; color: #cfd8e3; }
.paint-swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.paint-sw {
  width: 21px; height: 21px; border-radius: 5px; cursor: pointer;
  border: 2px solid #37475c; padding: 0; font-size: 10px; line-height: 1;
}
.paint-sw:hover { transform: scale(1.15); }
.paint-sw.on { border-color: #ffd964; box-shadow: 0 0 6px rgba(255,217,100,.6); }
.paint-sw.none { background: #0d141d; color: #8b97a5; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.profile-grid div { padding: 5px 0; border-bottom: 1px solid #17202c; }
.profile-grid span { float: right; color: #ffd964; }
/* 🃏 linha do ranking = CARD (2026-08-08, pedido do dono: "aumente o tamanho
   dos cards, tá feio de ver"). Era uma linha magra separada por 1px de borda
   inferior; virou cartão com fundo, borda, canto e respiro. Só a tela de
   Ranking usa .rank-row, então isso não vaza pra nenhum outro modal. */
.rank-row {
  display: flex; gap: 14px; align-items: center;
  padding: 11px 14px; margin-bottom: 7px;
  background: #0d141d; border: 1px solid #1e2a3a; border-radius: 10px;
  transition: border-color .12s, background .12s;
}
.rank-row:hover { background: #111c29; border-color: #31465f; }
.rank-row .pos {
  flex: 0 0 48px; width: 48px; text-align: center;
  color: #ffd964; font-size: 17px; font-weight: bold; line-height: 1.1;
}
/* min-width:0 deixa o nome longo truncar em vez de esticar o card */
.rank-row .nm { flex: 1; min-width: 0; font-size: 14px; }
.rank-row .nm .dim { line-height: 1.45; }
.rank-row .tag {
  flex: 0 0 auto; font-size: 13px; font-weight: bold;
  padding: 7px 13px; color: #ffd964; border-color: #4a5a70;
}

/* diálogo de NPC */
#npc-box {
  bottom: 230px; left: 50%; transform: translateX(-50%);
  width: 340px; padding: 14px 16px; z-index: 30; text-align: center;
}
.npc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
#npc-face { image-rendering: pixelated; }
#npc-name { flex: 1; color: #ffd964; font-weight: bold; font-size: 15px; letter-spacing: .5px; text-align: left; }
#npc-close { background: none; border: none; color: #8b97a5; cursor: pointer; font-size: 14px; }
#npc-text { font-size: 12.5px; line-height: 1.5; color: #c9d3dd; margin-bottom: 10px; text-align: left; }
#npc-actions { display: flex; justify-content: center; gap: 8px; }
#npc-actions .btn { padding: 7px 20px; }

/* modal de desmaio */
#faint-box {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20, 4, 8, .55);
  display: flex; align-items: center; justify-content: center;
}
.fb-panel {
  width: 350px; padding: 22px 26px; text-align: center;
  border-color: #8a2f3f;
}
.fb-skull { font-size: 34px; margin-bottom: 6px; }
#faint-title { color: #ff7a8a; font-weight: bold; letter-spacing: 1px; font-size: 15px; margin-bottom: 8px; }
.fb-text { font-size: 12px; color: #c9d3dd; line-height: 1.5; margin-bottom: 12px; }
#faint-count { color: #ffd964; font-size: 26px; font-weight: bold; }
.fb-green {
  width: 100%; margin-bottom: 8px; padding: 10px;
  background: #1d4d26 !important; border-color: #3f9d4c !important; color: #b6f0be !important;
  font-weight: bold;
}
.fb-green:disabled { opacity: .45; }
.fb-city { width: 100%; padding: 9px; }

/* card de equipe */
.eq-slots { display: flex; gap: 8px; margin-bottom: 14px; }
.eq-slot {
  width: 64px; height: 64px; border-radius: 8px; cursor: pointer;
  background: #0d141d; border: 2px solid #273246;
  display: flex; align-items: center; justify-content: center; position: relative;
}
/* ══ 🎨 MOLDURA POR RARIDADE — regra do jogo INTEIRO (17/08/2026) ═══════════
   Todo ícone de pokémon (Box, Time, Mercado, troca, boost…) leva borda na cor
   da raridade: dá pra bater o olho numa caixa de 91 e ver o que presta sem
   abrir ficha nenhuma.

   🎯 A PALETA É A DO "VENDER POR RARIDADE" (RAR_COR, settings-extra.js:1517) —
   decisão do dono em 17/08/2026. Existiam DUAS paletas de raridade no jogo (a
   das badges daqui e a do painel de venda), discordando em Rara, Épica e
   Lendária. Agora a régua é uma só, e as badges lá embaixo também foram
   ajustadas pra ela. Se mexer numa cor, mexa NAS DUAS PONTAS.

   As classes vêm do `WI()` do game.js: "r-" + a etiqueta em minúscula. Ele
   troca É→E e Á→A, mas não o Í — por isso "r-mítica" aparece acentuada aqui, e
   as duas grafias estão cobertas em cada tier.

   `rar` é o INTERRUPTOR: só quem tem essa marca usa a paleta. Sem ela as badges
   de raridade (que carregam a mesma classe `r-*`) ganhariam borda sem querer.

   ⚠️ Fraca e Comum entram com ALFA na borda de propósito: são a esmagadora
   maioria da caixa, e no tom cheio (cinza claro) 80 ícones comuns viravam uma
   grade de molduras acesas — o destaque das raridades altas se perdia no meio. */
.r-fraca            { --rar-c: rgba(107,118,131,.55); --rar-g: transparent; }
.r-comum            { --rar-c: rgba(159,176,196,.45); --rar-g: transparent; }
.r-boa, .r-incomum  { --rar-c: #7fd47f; --rar-g: rgba(127,212,127,.30); }
.r-rara             { --rar-c: #5aa9ff; --rar-g: rgba(90,169,255,.34); }
.r-epica, .r-épica  { --rar-c: #b57bff; --rar-g: rgba(181,123,255,.36); }
.r-lendaria, .r-lendária { --rar-c: #ffb454; --rar-g: rgba(255,180,84,.40); }
.r-mitica, .r-mítica     { --rar-c: #ff5fa2; --rar-g: rgba(255,95,162,.42); }
.eq-slot.rar { border-color: var(--rar-c, #273246); box-shadow: 0 0 7px var(--rar-g, transparent); }
/* ══ estado POR DENTRO, raridade POR FORA (pedido do dono, 17/08/2026) ══
   Antes o estado repintava a BORDA e a raridade sumia justo no pokémon que o
   jogador está olhando. Agora a borda externa é sempre a raridade e o estado
   entra como um anel INTERNO (box-shadow inset), então as duas informações
   convivem: 🔴 vermelho = está caçando · ⚪ branco = selecionado · 🟢 verde =
   marcado pra venda. O `0 0 7px var(--rar-g)` é repetido em cada regra porque
   box-shadow não acumula entre regras — a última declaração ganha inteira, e
   sem repetir o brilho da raridade sumiria no estado. */
.eq-slot.sel { box-shadow: inset 0 0 0 2px #fff, 0 0 7px var(--rar-g, transparent); }
.eq-slot.empty { border-style: dashed; opacity: .5; cursor: default; }
.eq-slot .lv { position: absolute; bottom: 2px; right: 4px; font-size: 9px; color: #ffd964; }
/* 💰 venda em massa: selecionado + travado (protegido) */
.eq-slot.picked { box-shadow: inset 0 0 0 2px #56c878, 0 0 10px rgba(86,200,120,.35); }
.eq-slot.picked::after {
  content: '✔'; position: absolute; top: 1px; left: 3px; font-size: 12px; font-weight: 900;
  color: #7fffa0; text-shadow: 0 0 3px #000;
}
.eq-slot.dimlock { opacity: .45; cursor: not-allowed; }
/* ↔️ setas de ORDEM DE BATALHA (2026-08-11): trocam o pokémon de lugar com o
   vizinho do time. Ficam POR CIMA das bordas laterais do slot — o clique nelas
   não pode abrir o card (stopPropagation no game.js). Sempre visíveis (não só
   no hover) porque no celular não existe hover. */
.eq-slot .eq-ord {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 15px; height: 28px; padding: 0; line-height: 1; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #ffd964; cursor: pointer;
  background: rgba(8,12,18,.85); border: 1px solid #37475c; border-radius: 4px;
  opacity: .6; transition: opacity .12s, background .12s, border-color .12s;
}
.eq-slot .eq-ord.l { left: -2px; }
.eq-slot .eq-ord.r { right: -2px; }
.eq-slot .eq-ord:hover { opacity: 1; background: #1b2636; border-color: #c9a34e; }
.eq-slot .eq-ord:disabled { opacity: .3; cursor: default; }
.box-sellbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #101a12; border: 1px solid #2f5a3f; border-radius: 8px;
  padding: 7px 10px; margin-bottom: 10px;
}
.box-sellbar .bs-info { flex: 1; font-size: 13px; color: #cfe6d0; min-width: 120px; }
/* ⚠️ "(N fora da busca)": marcados que o filtro está escondendo — eles VÃO
   junto na venda em massa (o sellMany vende o que está selecionado, não o que
   está na tela). */
.box-sellbar .bs-fora { color: #ffd964; font-size: 11.5px; }

/* ══ Time & Box em DUAS COLUNAS (17/08/2026, pedido de jogador) ══
   Esquerda = time + ficha, PARADA. Direita = a caixa, rolando sozinha. Assim o
   jogador clica no último bicho da caixa e lê a ficha inteira sem rolar a tela.
   `tb-body` é posta no #modal-body pelo openTeamBox DEPOIS do openModal (que
   limpa a classe em toda abertura, senão o overflow travado vazava pros outros
   modais). Os `min-height:0` não são enfeite: sem eles um filho de flex/grid
   nunca encolhe abaixo do conteúdo e a rolagem interna simplesmente não
   acontece — a página inteira volta a rolar. */
#modal-body.tb-body { display: flex; flex-direction: column; overflow: hidden; min-height: 0; padding: 10px 12px; }
/* 📐 quadro maior SÓ pra esta tela (o Ranking segue no modal-wide de 1120): num
   notebook de ~977px de viewport o modal já batia no teto de 96vw/88vh, então
   cada ponto percentual conta. Vem DEPOIS do .modal-wide de propósito — as duas
   classes têm a mesma especificidade e o openTeamBox liga as duas. */
#modal.modal-xl { width: min(1440px, 98vw); max-height: 92vh; }
.tb-wrap {
  /* coluna da caixa em 460px (escolha do dono, 17/08): é o que faz caber 5 por
     fileira SEM encolher o ícone — em 380px, 5 por fileira devolvia a célula pro
     tamanho antigo (69px). O `minmax` deixa ela encolher em telas menores. */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  /* linha 1 = faixa do time (largura toda), linha 2 = ficha | caixa */
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px 14px; align-items: stretch; flex: 1 1 auto; min-height: 0;
}
/* ══ faixa do TIME, largura total ══
   Os 6 slots dividem o espaço em partes iguais (1fr) em vez de ficarem fixos em
   64px: era daí que vinha o ar de ~160px à direita na tela do dono. */
.tb-time { grid-column: 1 / -1; display: flex; gap: 12px; align-items: stretch; min-width: 0; }
.tb-team {
  flex: 1 1 auto; min-width: 0; margin-bottom: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px;
}
.tb-team .eq-slot { width: auto; height: 100px; }
/* o canvas nasce com tamanho fixo em px (loadSprite) — sem isto ele estoura a
   célula quando a tela encolhe, em vez de acompanhar */
.tb-team .eq-slot canvas, .tb-grid .eq-slot canvas { max-width: 100%; height: auto; }
.tb-team .eq-slot .lv { bottom: 6px; }
.tb-team .eq-slot .slot-b.lk { bottom: 6px; }
/* ⚔ o que CAÇA: topo-centro, porque os 4 cantos do slot já têm dono */
.slot-act {
  position: absolute; top: 1px; left: 50%; transform: translateX(-50%);
  font-size: 11px; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
/* 🔴 QUEM ESTÁ CAÇANDO: anel vermelho por dentro, raridade preservada por fora.
   Se o mesmo pokémon também está aberto (sel), os dois anéis aparecem — branco
   colado na borda e vermelho logo dentro. */
.eq-slot.atv { box-shadow: inset 0 0 0 2px #e5484d, 0 0 7px var(--rar-g, transparent); }
.eq-slot.sel.atv { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #e5484d, 0 0 7px var(--rar-g, transparent); }
.slot-hp {
  position: absolute; left: 4px; right: 4px; bottom: 2px; height: 3px;
  border-radius: 2px; background: #20303f; overflow: hidden;
}
.slot-hp::after {
  content: ''; display: block; height: 100%; width: var(--p, 100%);
  background: linear-gradient(90deg, #3f9d55, #7fe08a);
}
/* 🔗 atalhos + resumo do time, na sobra da faixa */
/* resumo em cima, os 2 atalhos lado a lado embaixo: empilhados em 3 andares a
   faixa passava de 130px de altura e roubava esse tanto da ficha (que é onde a
   altura faz falta). Assim a faixa fica na altura dos próprios slots. */
.tb-atalhos {
  flex: 0 0 auto; width: 240px; display: grid;
  grid-template-columns: 1fr 1fr; gap: 6px; align-content: center;
}
.tb-atalhos .tb-resumo { grid-column: 1 / -1; }
.tb-atalhos .btn { width: 100%; text-align: center; padding: 7px 4px; }
.tb-resumo {
  background: #0d141d; border: 1px solid #273246; border-radius: 8px;
  padding: 6px 9px; font-size: 11px; color: #8b97a5; line-height: 1.45;
}
.tb-resumo b { color: #ffd964; font-size: 13px; }
.tb-left { min-width: 0; min-height: 0; overflow-y: auto; padding-right: 4px; }

/* ══ FICHA em 2 sub-colunas (Fase 2, 17/08) ══
   Empilhado, o card passava da altura da coluna e ganhava rolagem própria — o
   Ditto era o caso extremo (o settings-extra ainda pendura o bloco .rc-morph
   nele). Lado a lado, a mesma informação ocupa ~40% menos altura.

   ⚠️ A regra `> *` é a que segura o layout no lugar: o settings-extra injeta
   filhos que este arquivo não conhece (.rc-morph do Ditto, botão de evolução,
   avisos) e sem um padrão eles cairiam numa das duas colunas, torto. Aqui todo
   filho desconhecido nasce em LARGURA TOTAL, e só head/stats são posicionados. */
.tb-left .eq-card {
  /* o lado do bicho leva MAIS largura que os stats: é lá que moram nome, badges,
     🔎 Catch e Growth — em coluna estreita cada badge caía numa linha e o card
     crescia ~40px à toa. Os stats precisam só de rótulo + barra + número. */
  display: grid; grid-template-columns: minmax(180px, 1fr) minmax(170px, 1fr);
  /* linha 1 estica (é onde os stats se centralizam), linha 2 = golpes */
  grid-template-rows: 1fr auto;
  gap: 10px 16px; align-items: start;
  /* 📏 o card OCUPA a coluna inteira (pedido do dono, 17/08): um pokémon com
     poucos golpes — Oddish, 6 golpes e 3 badges — deixava um vão enorme embaixo.
     Com `min-height:100%` a sobra vai pra linha 1 (a do `1fr`), que é onde o
     bicho e os stats moram, e os botões descem pro rodapé do card. */
  min-height: 100%;
}
/* com a sobra na linha 1, o bloco do bicho se centraliza nela em vez de ficar
   colado no topo com o vazio embaixo */
.tb-left .eq-card > .eq-head { justify-content: center; }
.tb-left .eq-card > * { grid-column: 1 / -1; min-width: 0; }
/* o bicho ocupa as DUAS linhas da esquerda; à direita, stats em cima e golpes
   embaixo. Assim a fileira de golpes não soma altura nenhuma ao card — ela cabe
   na sombra do bloco do bicho, que é sempre o mais alto. Foi o que fez o card
   caber sem encolher a sprite (medido: 504px → ~470px de conteúdo). */
.tb-left .eq-card > .eq-head { grid-column: 1; grid-row: 1 / span 2; flex-direction: column; align-items: stretch; gap: 5px; }
/* as linhas injetadas (🔎 Catch, 🧬 Growth, IVs) são 5 e vinham com entrelinha
   de texto corrido — apertar aqui vale ~15px de altura do card, que é o que
   segura a sprite no tamanho grande antes do auto-ajuste precisar agir */
.tb-left .eq-head .tiny-txt { line-height: 1.25; }
/* 🎛️ PAINEL "POKE STATS" — moldura própria em volta dos seis atributos, pra
   separar do resto da ficha (pedido do dono, 17/08). Os stats ficam JUNTINHOS e
   CENTRALIZADOS dentro dele: sobrar espaço em cima e embaixo é de propósito. */
.tb-left .eq-card > .ps-box {
  grid-column: 2; grid-row: 1; align-self: stretch;
  /* título ANCORADO no topo do painel e os stats centralizados no que sobra —
     com o painel inteiro centralizado, o título ficava boiando no meio do vazio */
  display: flex; flex-direction: column; justify-content: flex-start;
  background: linear-gradient(180deg, rgba(31,44,62,.55), rgba(13,20,29,.5));
  border: 1px solid #2f3f56; border-radius: 12px; padding: 9px 10px 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 4px 14px rgba(0,0,0,.28);
}
.ps-tt {
  text-align: center; font: 800 10px/1 Verdana, system-ui, sans-serif;
  letter-spacing: 2px; text-transform: uppercase; color: #c9a34e;
  padding-bottom: 8px; margin-bottom: 9px; border-bottom: 1px solid #2a3a4e;
}
.tb-left .ps-box .eq-stats { margin-top: 0; row-gap: 7px; flex: 1 1 auto; align-content: center; }
.tb-left .eq-stats > span.dim { font-size: 12px; }
.tb-left .eq-stats > b { font-size: 13px; }
.tb-left .eq-head > canvas { align-self: center; image-rendering: pixelated; }
.tb-left .eq-stats .bar { height: 12px; border-radius: 6px; }
/* 🟠 VARREDURA: começa ONDE O VERDE TERMINA (`left: --w`, que o game.js escreve
   por barra) e vai até a ponta; encolhe até sumir no valor real. Nunca passa por
   cima do verde — verde é verde o tempo todo, e o laranja do Growth
   (.rc-grow-seg), que vive DENTRO do verde, também nunca é coberto. */
.ps-sweep {
  position: absolute; left: var(--w, 0%); top: 0; height: 100%;
  width: calc(100% - var(--w, 0%));
  background: linear-gradient(#ffc061, #f0862f); pointer-events: none;
  animation: ps-sweep .9s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes ps-sweep {
  from { width: calc(100% - var(--w, 0%)); }
  to   { width: 0; }
}
/* quem prefere menos movimento não leva animação nenhuma */
@media (prefers-reduced-motion: reduce) { .ps-sweep { display: none; } }
/* golpes em pílulas que QUEBRAM EM LINHA — nunca rolam pro lado (pedido do dono,
   17/08: "não pode ter scroll pra direita"). Ficam na coluna dos stats (linha 2),
   onde as quebras não custam altura nenhuma ao card; se ainda apertar, o
   auto-ajuste lá embaixo diminui a pílula. */
.tb-left .eq-card > .eq-moves { grid-column: 2; grid-row: 2; align-self: start; margin-top: 0; }
.eq-moves { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.eq-moves .mv {
  flex: 0 0 auto; white-space: nowrap; font-size: 10px; padding: 2px 8px;
  border-radius: 999px; color: #cfd8e3; background: #16212f;
  border: 1px solid var(--tc, #37475c);
}
.tb-left .eq-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.tb-left .eq-actions .btn { flex: none; min-width: 0; font-size: 11.5px; padding: 8px 6px; }
/* ação primária (⚔ caçar) na largura toda: é a decisão principal da tela */
.tb-left .eq-actions .btn:first-child { grid-column: 1 / -1; }

/* 🧬 DITTO: o settings-extra pendura um bloco .rc-morph no card (Transformar,
   Voltar a ser X e o aviso da forma atual). Empilhado, ele era ~140px a mais de
   altura — o único caso que ainda estourava a coluna. Quando ELE existe, os
   botões encolhem pra METADE e o bloco vai pro lado (pedido do dono, 17/08).
   Duas formas de detectar de propósito: `:has()` pega na hora, e a classe
   `tem-morph` (posta pelo auto-ajuste do game.js) cobre navegador sem `:has()`.
   Sem Ditto nada muda: os botões seguem na largura toda, em 3 colunas. */
.tb-left .eq-card > .rc-morph { grid-column: 2; align-self: start; }
.tb-left .eq-card.tem-morph > .eq-actions,
.tb-left .eq-card:has(> .rc-morph) > .eq-actions {
  grid-column: 1; grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 🔧 AUTO-AJUSTE — o openTeamBox mede a coluna DEPOIS de montar (e de novo meio
   segundo depois, pra pegar o que o settings-extra injeta) e liga estes níveis
   até o card caber. Só encolhe o que é enfeite: sprite, respiro e corpo de
   texto. Nenhuma informação some. */
.eq-card.compacto > .eq-head > canvas { width: 108px; height: 108px; }
.eq-card.compacto { padding: 10px; gap: 8px 14px; }
.eq-card.compacto .eq-stats { font-size: 10.5px; gap: 3px 8px; row-gap: 5px; }
.eq-card.compacto .eq-badges .badge { font-size: 10px; padding: 2px 8px; }
.eq-card.compacto .tiny-txt { font-size: 9.5px; }
.eq-card.compacto .eq-actions .btn { padding: 6px 5px; font-size: 11px; }
.eq-card.compacto .eq-moves .mv { font-size: 9.5px; padding: 2px 6px; }
.eq-card.compacto2 .eq-moves .mv { font-size: 9px; padding: 1px 5px; }
/* nível 2 = o caso extremo (Ditto transformado: 8 golpes, 4 badges, 3 linhas
   injetadas E o bloco .rc-morph). Além de encolher, ele MUDA O ARRANJO: os
   golpes sobem pro lado dos stats e o bloco do bicho passa a ocupar as duas
   linhas da esquerda. Isso tira a fileira de golpes da conta da altura, que é o
   que faz o Ditto caber sem rolagem. */
.eq-card.compacto2 > .eq-head > canvas { width: 88px; height: 88px; }
.eq-card.compacto2 { padding: 8px; gap: 6px 12px; }
.eq-card.compacto2 .eq-stats .bar { height: 8px; }
.eq-card.compacto2 .eq-stats { row-gap: 4px; font-size: 10px; }
.eq-card.compacto2 .eq-badges .badge { font-size: 9.5px; padding: 2px 7px; }
.eq-card.compacto2 .tiny-txt { font-size: 9.5px; }
.eq-card.compacto2 .eq-actions { gap: 6px; margin-top: 6px; }
.eq-card.compacto2 .eq-actions .btn { padding: 5px 4px; font-size: 10.5px; }
.tb-left .eq-card.compacto2 > .eq-head { gap: 5px; }
/* nível 3 = último degrau antes de devolver a rolagem. Só aparece em janela
   baixa de verdade; na tela do dono (505px de coluna) o Ditto para no nível 2. */
.eq-card.compacto3 > .eq-head > canvas { width: 62px; height: 62px; }
.eq-card.compacto3 { padding: 6px; gap: 5px 10px; }
.eq-card.compacto3 .eq-stats { row-gap: 3px; }
.eq-card.compacto3 .eq-stats .bar { height: 6px; }
.eq-card.compacto3 .eq-moves .mv { font-size: 8.5px; padding: 1px 5px; }
.eq-card.compacto3 .eq-actions { gap: 4px; margin-top: 4px; }
.eq-card.compacto3 .eq-actions .btn { padding: 4px 3px; font-size: 10px; }
.tb-right { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.tb-head { flex: 0 0 auto; }
.tb-head .tb-busca { width: 100%; margin-bottom: 8px; }
.tb-grid { flex: 1 1 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
/* 🔍 ícone da caixa era o menor da tela (64px de célula, 52 de sprite). Agora a
   grade se ADAPTA à largura: `auto-fill` decide quantos cabem por fileira, e a
   célula estica pra preencher. Num notebook de ~977px dá 4 por fileira a ~84px;
   maximizado dá 5. Preço honesto: ícone maior = menos ícone visível. */
.tb-grid .eq-slots {
  /* 5 FIXO (pedido do dono, 17/08). Com `auto-fill` a fileira virava 4 sempre
     que a coluna encolhia alguns pixels — agora a célula é que se ajusta. */
  margin-bottom: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* aspect-ratio e não altura fixa: a célula estica na largura (auto-fill) e a
   altura acompanha, senão o ícone fica num retângulo torto de 89×84 */
.tb-grid .eq-slot { width: auto; height: auto; aspect-ratio: 1; }
.tb-vazio { text-align: center; font-size: 12px; padding: 26px 10px; }
/* 📱 tela estreita: tudo EMPILHA (time, ficha, caixa) e a caixa fica com uma
   faixa de rolagem própria — o pedido original do print 4. Aqui o corpo do modal
   volta a rolar normalmente, senão a ficha inteira não caberia.
   840px e não 900: a janela do dono tem ~977px e estava a 77px de cair no modo
   empilhado sem querer ao encostar a janela. */
@media (max-width: 840px) {
  #modal-body.tb-body { display: block; overflow-y: auto; }
  .tb-wrap { display: block; }
  .tb-time { display: block; }
  .tb-team { margin-bottom: 8px; }
  .tb-team .eq-slot { height: 78px; }
  .tb-atalhos { width: auto; flex-direction: row; margin-bottom: 10px; }
  .tb-resumo { flex: 1 1 auto; }
  .tb-left { overflow: visible; padding-right: 0; }
  .tb-grid { max-height: 44vh; }
  .tb-grid .eq-slots { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}
.eq-card { background: #0d141d; border: 1px solid #273246; border-radius: 10px; padding: 14px; }
.eq-head { display: flex; gap: 14px; align-items: center; }
.eq-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.badge { font-size: 10px; padding: 2px 9px; border-radius: 9px; font-weight: bold; }
.badge.tipo { background: #274156; color: #9fd0ff; }
.badge.poder { background: #2e2410; color: #ffd964; }
/* 🎨 RARIDADE nas badges — MESMA paleta do "Vender por raridade" (RAR_COR em
   settings-extra.js:1517), padronizada em 17/08/2026 por decisão do dono. Antes
   estas cores eram um segundo dicionário e discordavam do painel de venda:
   Rara era magenta aqui e AZUL lá, Épica laranja aqui e ROXA lá, Lendária
   amarela aqui e LARANJA lá. O fundo é o mesmo tom escurecido; o texto é a cor
   exata da régua. Mudou aqui? Mude na RAR_COR também — e vice-versa. */
.badge.r-comum { background: #232c36; color: #9fb0c4; }
.badge.r-boa { background: #16301c; color: #7fd47f; }
.badge.r-rara { background: #10263d; color: #5aa9ff; }
.badge.r-epica { background: #26173d; color: #b57bff; }
.badge.r-lendaria { background: #3a2710; color: #ffb454; }
/* MÍTICA: tier novo — o game.js gera a classe "r-mítica" (com acento, via WI());
   faltava a regra, então o badge ficava sem fundo. Mesmo padrão dos outros. */
.badge.r-mítica { background: #3d1533; color: #ff5fa2; }
/* ⚠️ O game.js NÃO tira acento: a classe é "r-" + a etiqueta em minúscula, com
   acento e tudo. Ou seja, .r-epica e .r-lendaria acima NUNCA casaram — Épica e
   Lendária vinham sem fundo desde sempre. As duas regras sem acento ficam (não
   custam nada e cobrem ficha antiga); as acentuadas abaixo é que valem. */
.badge.r-épica { background: #26173d; color: #b57bff; }
.badge.r-lendária { background: #3a2710; color: #ffb454; }
/* Etiquetas que a tabela de data/stats.json trouxe: "Fraca" (abaixo de Comum) e
   "Incomum" (que ocupou o lugar da antiga "Boa" — mesma cor de propósito). */
.badge.r-fraca { background: #22272e; color: #8b97a5; }
.badge.r-incomum { background: #16301c; color: #7fd47f; }
.eq-stats { margin-top: 12px; display: grid; grid-template-columns: 34px 1fr 40px; gap: 4px 8px; align-items: center; font-size: 11px; }
.eq-stats .bar { height: 7px; }
.eq-stats .bar > div { background: linear-gradient(#8fe89f, #3f9d4c); }
.eq-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.eq-actions .btn { flex: 1; min-width: 120px; }

/* inventário em grade */
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, 52px); gap: 7px; }
.inv-slot {
  width: 52px; height: 52px; border-radius: 8px; position: relative;
  background: #0d141d; border: 1px solid #273246;
  display: flex; align-items: center; justify-content: center;
}
.inv-slot.poke { border-color: #c9a34e; }
.inv-slot .qt {
  position: absolute; bottom: 1px; right: 3px;
  font-size: 10px; font-weight: bold; color: #ffd964;
  text-shadow: 0 1px 2px #000;
}

/* 💿 detalhe da TM/HM — abre ao clicar num disco da mochila (openTmDetail em
   public/game.js). O selo SS repete o visual do da aba "Seu Time"
   (.gp-tm-ss, gymproto.js): é a MESMA marca, e ela é a única coisa que separa
   um disco SS de um comum do mesmo tipo. */
.tm-det { display: flex; flex-direction: column; gap: 12px; }
.tm-det-head { display: flex; gap: 12px; align-items: center; }
.tm-det-ic {
  width: 52px; height: 52px; border-radius: 10px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.tm-det-name { font-size: 15px; font-weight: bold; color: #ffd964; }
.tm-det-ss {
  display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 4px;
  background: linear-gradient(#7c4dff, #4a1fb8); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .5px; vertical-align: 1px;
}
.tm-det-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tm-det-pill {
  background: #101823; border: 1px solid #273246; border-radius: 999px;
  padding: 2px 10px; font-size: 11px; color: #dfe7f0;
}
.tm-det-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tm-det-stat {
  background: #0d141d; border: 1px solid #273246; border-radius: 8px;
  padding: 8px 4px; text-align: center;
}
.tm-det-stat span { display: block; font-size: 11px; color: #8b97a6; margin-bottom: 3px; }
.tm-det-stat b { font-size: 14px; color: #fff; }
.tm-det-desc {
  margin: 0; background: #101823; border: 1px solid #273246; border-radius: 8px;
  padding: 10px 12px; font-size: 13px; line-height: 1.5; color: #dfe7f0;
}
.tm-det-warn {
  font-size: 12px; line-height: 1.45; color: #e8c27a;
  background: #191307; border: 1px solid #4a3a12; border-radius: 8px; padding: 8px 10px;
}
.tm-det-actions { display: flex; gap: 8px; }
.tm-det-actions .btn { flex: 1; }

/* quests por cidade */
.q-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.q-tab {
  background: #101823; border: 1px solid #273246; color: #aeb9c6;
  border-radius: 6px; padding: 4px 12px; cursor: pointer; font-size: 12px;
}
.q-tab.sel { border-color: #a3852f; color: #ffd964; }
.q-card { background: #0d141d; border: 1px solid #273246; border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; }
.q-card.done { opacity: .55; }
.q-card .q-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.q-card .q-npc { color: #ffd964; font-weight: bold; }
.q-card .q-rw { font-size: 11px; color: #9fd0ff; }
.q-target { display: flex; justify-content: space-between; font-size: 11.5px; margin: 3px 0 2px; }
.q-target .qt-n { color: #7fd47f; }
.q-card .bar { height: 6px; margin-bottom: 4px; }
.q-card .bar > div { background: linear-gradient(#6fc3ff, #2f6d9d); }

/* toast */
#toast {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%);
  background: #2e1212; border: 1px solid #a33; color: #ffb3b3;
  border-radius: 6px; padding: 8px 18px; z-index: 200; font-size: 13px;
}
#toast.ok { background: #12241a; border-color: #3f7d46; color: #a8e6b2; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #273246; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================ CELULAR */
/* aviso "gire o celular": aparece em RETRATO em telas de toque */
#rotate-hint {
  display: none; position: fixed; inset: 0; z-index: 999;
  background: #0b111a; color: #e8eef4;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 24px;
}
#rotate-hint .rh-icon { font-size: 64px; animation: rh-spin 2s ease-in-out infinite; }
#rotate-hint .rh-title { font-size: 22px; font-weight: bold; color: #ffd964; }
#rotate-hint .rh-sub { font-size: 14px; color: #8b97a5; }
@keyframes rh-spin {
  0%, 60%, 100% { transform: rotate(0); }
  25%, 40% { transform: rotate(90deg); }
}
@media (orientation: portrait) and (pointer: coarse) {
  #rotate-hint { display: flex; }
}

/* botões flutuantes do celular (abrem auto/captura/chat) */
#mob-fabs { display: none; position: fixed; right: 10px; bottom: 12px; flex-direction: column; gap: 10px; z-index: 55; }
.fab {
  width: 48px; height: 48px; border-radius: 50%;
  background: #131b28; border: 1px solid #2a3d55; color: #e8eef4;
  font-size: 22px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.fab:active { transform: scale(.92); }
body.show-auto .fab[data-show="auto"],
body.show-cap .fab[data-show="cap"],
body.show-chat .fab[data-show="chat"] { border-color: #c9a34e; color: #ffd964; }

/* layout compacto: telas estreitas OU qualquer tela de toque */
@media (max-width: 980px), (pointer: coarse) {
  #mob-fabs { display: flex; }
  /* painéis grandes começam ESCONDIDOS — abrem pelos botões flutuantes */
  #auto-panel, #capture-panel, #chat { display: none; }
  body.show-auto #auto-panel { display: block; top: 60px; right: 66px; z-index: 60; }
  body.show-cap #capture-panel { display: block; right: 66px; bottom: 12px; z-index: 60; max-height: 60vh; }
  body.show-chat #chat { display: flex; left: 8px; bottom: 12px; width: min(330px, 55vw); height: min(190px, 45vh); z-index: 60; }
  /* painel do jogador compacto */
  #player-panel { transform: scale(.82); transform-origin: top left; top: 6px; left: 6px; }
  /* menu no topo à DIREITA (não briga com o painel do jogador) */
  /* barra de ícones: nunca transborda pra fora da tela — quebra em linha
     ancorada à direita (em vez de sumir os primeiros pela esquerda) e fica
     compacta pra sobrar o mapa. max-width trava na largura da tela. */
  #topbar { left: auto; right: 6px; top: 6px; transform: none;
    flex-wrap: nowrap; justify-content: flex-start; max-width: calc(100vw - 12px);
    gap: 3px; padding: 4px 6px;
    /* uma linha só: se não couber, ARRASTA de lado (não quebra em 2 linhas).
       O ☰ do settings-extra.js continua servindo pra sumir com tudo. */
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #topbar::-webkit-scrollbar { display: none; }
  .tb { width: 38px; height: 38px; font-size: 17px; padding: 3px; }
  .tb.ic { width: 38px; height: 38px; padding: 3px; }
  .tb.ic img { width: 26px; height: 26px; }
  .tb.ic.emoji span { font-size: 19px; }
  #zone-label { top: 56px; font-size: 10px; max-width: 60vw; left: 8px; transform: none; }
  #coords { bottom: 4px; font-size: 10px; padding: 2px 8px; }
  #boss-banner { top: 56px; transform: scale(.85); transform-origin: top center; }
  #broadcast-banner { top: 64px; font-size: 15px; padding: 10px 16px; max-width: 88vw; }
  /* botões maiores pra dedo */
  .btn { min-height: 36px; }
  .btn.tiny { min-height: 30px; }
  #modal { width: min(760px, 96vw); max-height: 90vh; }
  #modal-body { padding: 10px; }
  .login-box { width: min(92vw, 360px); padding: 20px; }
  #npc-box { width: min(340px, 90vw); bottom: 80px; }
  .eq-slots { flex-wrap: wrap; }
}

/* ============================================ Rankings */
/* 📐 o modal do Ranking é LARGO (2026-08-08, pedido do dono). Cada linha carrega
   sprite + nome + clã + sublinha + etiqueta, e nas abas 👥/🏅 ainda vem uma
   fileira de miniaturas — em 760px tudo ficava espremido. `modal-wide` é
   opt-in e o openModal LIMPA a classe a cada abertura, então nenhum outro
   modal herda essa largura. */
#modal.modal-wide { width: min(1120px, 96vw); max-height: 88vh; }

/* flex-wrap + base flexível (2026-08-08): são 7 abas. Numa tela larga elas
   cabem em uma fila só; em tela estreita quebram sozinhas em vez de virar
   texto ilegível. */
.rank-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.rank-tab { flex: 1 1 130px; background: #101823; border: 1px solid #26344a; color: #aeb9c6;
  border-radius: 8px; padding: 11px 8px; cursor: pointer; font-size: 13px; font-weight: bold;
  transition: border-color .12s, color .12s, background .12s; }
.rank-tab:hover { border-color: #3d5273; color: #d6e2ef; }
.rank-tab.sel { background: #2e2410; border-color: #a3852f; color: #ffd964; }
/* 🔴 ramificações DENTRO da aba "Pokémon" (Poder, Nível, Boostados, os 6 stats
   e o DPS). Chip menor que a .rank-tab de cima, de propósito: são dez, e a
   fileira precisa ficar visivelmente ABAIXO da fileira principal em vez de
   parecer a continuação dela. Em tela estreita quebra em linhas (não rola na
   horizontal como a dos chefes: aqui o rótulo é curto e cabe). */
.rank-subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.rank-subtab {
  flex: 0 1 auto; background: #0d141d; border: 1px solid #223047; color: #93a2b3;
  border-radius: 999px; padding: 7px 13px; cursor: pointer; font-size: 12px; font-weight: bold;
  transition: border-color .12s, color .12s, background .12s;
}
.rank-subtab:hover { border-color: #3d5273; color: #d6e2ef; }
.rank-subtab.sel { background: #16283a; border-color: #4a86bb; color: #8fd0ff; }

/* linha de explicação da aba (ex.: "média dos 6 slots") */
.rank-hint { text-align: center; font-size: 11.5px; color: #7c8a99; padding: 0 0 12px; }
.rank-vazio { text-align: center; padding: 28px 16px; font-size: 13px; color: #7c8a99; }
/* 🏅 ranking de Ginásios: fileira de insígnias conquistadas (ordem de chegada)
   e destaque de quem já fechou as 12 — esse trava o topo pra sempre. */
.rk-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.rk-badges img { width: 24px; height: 24px; object-fit: contain; }
.rank-row.rk-gym-max { background: #2b2109; border-color: #a3852f; }
.rank-row.rk-gym-max:hover { background: #352910; border-color: #d0ac48; }
/* 👥 ranking de Equipe: os 6 slots do time em miniatura. O slot VAZIO é
   desenhado como quadrado tracejado de propósito — é ele que explica por que
   a média caiu (a média divide sempre por 6). */
/* card MAIOR só na aba Equipe (2026-08-08, 2ª passada, pedido do dono): é a
   única aba em que o ponto É olhar a skin do treinador e os 6 pokémon, então
   ela sai do tamanho padrão das outras listas. */
.rk-row-team { padding: 14px 16px; gap: 18px; }
.rk-row-team .nm { font-size: 15px; }
.rk-row-team .tag { font-size: 15px; padding: 9px 16px; }

.rk-team { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.rk-tp {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-end;
  /* altura CRAVADA (sprite 54 + as 2 linhas da legenda): sem isso o slot vazio
     fica mais baixo que os cheios e a fileira sai desalinhada. */
  gap: 3px; flex: 0 0 62px; width: 62px; height: 92px;
  padding: 5px 2px 4px; border-radius: 8px;
  background: #101823; border: 1px solid #26344a; overflow: hidden;
}
/* legenda embaixo de cada slot: Nv em cima (claro), Poder embaixo (apagado) */
.rk-tp-lb { font-size: 9.5px; line-height: 1.25; text-align: center; color: #8fa2b8; }
.rk-tp-lb b { display: block; font-size: 10.5px; color: #cfe0f2; font-weight: bold; }
.rk-tp-vazio { justify-content: center; border-style: dashed; border-color: #3a4a60; opacity: .5; }
.rk-tp-vazio .rk-tp-lb, .rk-tp-vazio .rk-tp-lb b { color: #5b6b80; }
.rank-row.rk-team-full { background: #0f1d16; border-color: #2f7a52; }
.rank-row.rk-team-full:hover { background: #13291e; border-color: #46a771; }

/* ═══════════ 👹 RANKING POR BOSS (2026-08-15) ═══════════
   Uma sub-fileira de abas DENTRO da aba Bosses — são 17 chefes, e eles não
   cabem na fileira de cima junto com Treinadores/Equipe/Ginásios. Por isso o
   chip é menor que .rank-tab e rola na horizontal em tela estreita, em vez de
   quebrar em 6 linhas e empurrar a lista pra fora da tela. */
.rk-boss-tabs {
  display: flex; gap: 6px; margin-bottom: 12px; padding-bottom: 8px;
  overflow-x: auto; scrollbar-width: thin;
}
.rk-boss-tab {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 74px; padding: 7px 4px 6px; cursor: pointer;
  background: #101823; border: 1px solid #26344a; border-radius: 8px;
  color: #aeb9c6; font-size: 10.5px; font-weight: bold; line-height: 1.2; text-align: center;
  transition: border-color .12s, color .12s, background .12s;
}
.rk-boss-tab:hover { border-color: #3d5273; color: #d6e2ef; }
.rk-boss-tab.sel { background: #2b1220; border-color: #a3446a; color: #ffb3cd; }
.rk-boss-tab img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
/* quantos já mataram: apagado de propósito — é informação de apoio, não o nome */
.rk-boss-tab span { display: block; font-size: 9px; font-weight: normal; color: #7c8a99; }
.rk-boss-tab.sel span { color: #c98aa4; }

/* o card de uma kill: card grande igual ao da aba Equipe, porque aqui também o
   ponto É enxergar o time inteiro que fez a marca. */
.rk-row-kill { padding: 14px 16px; gap: 18px; }
.rk-row-kill .nm { font-size: 15px; }
/* o TEMPO é o número da aba — fonte tabular pra a coluna não dançar entre linhas */
.rk-kill-t {
  flex: 0 0 auto; text-align: right; font-size: 17px; font-weight: bold; color: #ffd964;
  font-variant-numeric: tabular-nums; line-height: 1.25;
}
.rk-kill-t small { display: block; font-size: 10.5px; font-weight: normal; color: #7c8a99; }
/* a linha do PRÓPRIO jogador, pra ele se achar sem ler nome por nome */
.rank-row.rk-kill-eu { background: #17223a; border-color: #4a6dbb; }
.rank-row.rk-kill-eu:hover { background: #1d2a46; border-color: #6a8ede; }
/* faixa "seu tempo" quando ele está FORA do top da lista */
.rk-kill-minha {
  margin: 4px 0 12px; padding: 10px 14px; border-radius: 8px;
  background: #17223a; border: 1px solid #4a6dbb; color: #cfe0f2; font-size: 12.5px;
}
/* auto-fit em vez de 2 colunas fixas (2026-08-08): no modal largo os 6 chips
   caem em 3 colunas × 2 linhas; em tela estreita descem sozinhos pra 2 ou 1. */
.rank-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px; margin-bottom: 16px; }
.rh-chip { display: flex; gap: 11px; align-items: center; background: #0e1622;
  border: 1px solid #1e2c3e; border-radius: 10px; padding: 11px 14px; min-width: 0; }
.rh-ic { font-size: 24px; line-height: 1; }
.rh-t { font-size: 10px; color: #7c8a99; letter-spacing: .6px; }
.rh-v { font-size: 14px; color: #cfe0f2; font-weight: bold; }
.rh-chip > div { min-width: 0; }
.rh-v, .rh-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.pod-slot { display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: linear-gradient(#16233a, #0e1826); border: 1px solid #2c4a6e;
  border-radius: 12px; padding: 14px 20px; min-width: 130px; }
.pod-slot canvas { image-rendering: pixelated; }
.pod-1 { border-color: #c9a34e; box-shadow: 0 0 18px rgba(201,163,78,.4); padding-bottom: 24px; min-width: 150px; }
.pod-2 { margin-bottom: 8px; }
.pod-3 { margin-bottom: 8px; }
.pod-medal { font-size: 30px; line-height: 1; }
.pod-nm { text-align: center; font-size: 14px; }
.pod-nm .dim { display: block; font-size: 11.5px; }
/* `flex: 0 0 auto` (2026-08-08): a .rank-row é flex e o canvas do outfit é um
   item dela — sem isso ele ENCOLHE quando a linha tem conteúdo largo (foi o que
   aconteceu na aba 👥 Equipe, cuja sublinha traz os 6 slots do time: o sprite
   do treinador virava um risco fino). Sprite tem tamanho fixo, nunca deve
   ceder espaço. */
.rank-row canvas { image-rendering: pixelated; flex: 0 0 auto; }

/* ============================================ Daily Gift */
.daily-head { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg,#2a2004,#161002);
  border: 1px solid #6b5a1f; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.daily-head .dc-gem { font-size: 30px; }
.daily-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.daily-cell { background: #101823; border: 1px solid #1e2c3e; border-radius: 8px;
  padding: 7px 3px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.daily-cell .dn { font-size: 10px; color: #8b97a5; }
.daily-cell .di { font-size: 18px; }
.daily-cell .dl { font-size: 9px; color: #aeb9c6; line-height: 1.1; }
.daily-cell.claimed { opacity: .5; }
.daily-cell.today { border-color: #ffd964; box-shadow: 0 0 10px rgba(255,217,100,.4); background: #1c1708; }
.daily-cell.vip { border-color: #7a5cff; }
.daily-cell .vip-tag { font-size: 8px; color: #b49bff; background: #241a44; padding: 0 3px; border-radius: 3px; }

/* ============================================ Amigos */
.friend-row { display: flex; align-items: center; gap: 10px; background: #0d141d;
  border: 1px solid #1e2c3e; border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; }
.friend-row canvas { image-rendering: pixelated; }
.friend-row .fr-nm { flex: 1; }
.fr-status { font-size: 11px; }
.fr-status.on { color: #6fd47f; }
.fr-status.off { color: #6a7787; }

/* ============================================ Pokédex detalhe */
.dexmon-head { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.dexmon-spr { position: relative; background: #0d141d; border: 2px solid #37475c;
  border-radius: 12px; padding: 6px; }
.dexmon-spr.caught { border-color: #c9a34e; }
.dexmon-spr canvas { image-rendering: pixelated; }
.dexmon-spr .dm-chk { position: absolute; top: -8px; right: -8px; background: #2f9d43;
  color: #fff; border-radius: 50%; width: 24px; height: 24px; display: flex;
  align-items: center; justify-content: center; font-weight: bold; border: 2px solid #0d141d; }
.dm-no { color: #7c8a99; font-size: 13px; font-weight: bold; }
.dm-name { font-size: 24px; font-weight: bold; color: #fff; letter-spacing: .5px; }
.dm-type { display: inline-block; color: #fff; font-size: 10px; font-weight: bold;
  padding: 2px 10px; border-radius: 10px; letter-spacing: .5px; }
.dm-prog { background: #0e1622; border: 1px solid #1e2c3e; border-radius: 8px;
  padding: 10px 12px; margin-bottom: 14px; }
/* 📊 tag do BST, ao lado do nome. Cor NEUTRA de propósito: não indica se o
   número é alto ou baixo (pedido do dono) — é só o dado. Como mora dentro do
   .dm-name (24px), precisa de vertical-align pra não empurrar a linha. */
.dm-bst {
  display: inline-block; vertical-align: middle; margin-left: 9px;
  padding: 3px 9px; border-radius: 11px;
  background: #16212f; border: 1px solid #37475c; color: #b9c4d0;
  font: 700 11px/1 Verdana, system-ui, sans-serif; letter-spacing: .6px;
  cursor: help; white-space: nowrap; position: relative; top: -2px;
}

.dexmon-stats { display: grid; grid-template-columns: 40px 1fr 40px; gap: 6px 10px; align-items: center; }

/* 🧬 tira da LINHA EVOLUTIVA (ficha da Pokédex). Cada card é um <button>:
   clicar troca a ficha sem voltar pra grade. O card da espécie aberta fica
   `disabled` + .atual — destacado e sem clique que recarregaria a mesma tela. */
.dm-line { margin-top: 14px; background: #0e1622; border: 1px solid #1e2c3e;
  border-radius: 8px; padding: 10px 12px; }
.dm-line-tt { color: #8b97a5; font-size: 11px; font-weight: bold;
  letter-spacing: .5px; margin-bottom: 8px; }
.dm-line-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dm-line-arw { color: #4a5a70; font-size: 15px; flex: none; }
.dm-line-cell {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  width: 78px; padding: 6px 4px; border-radius: 7px; cursor: pointer;
  background: #0d141d; border: 1px solid #273246; color: #8b97a5;
  font: 400 10px/1.2 Verdana, system-ui, sans-serif;
  transition: background .12s, border-color .12s, color .12s;
}
.dm-line-cell canvas { image-rendering: pixelated; filter: grayscale(1) brightness(.45); }
.dm-line-cell.seen canvas { filter: grayscale(1) brightness(.8); }
.dm-line-cell.caught { border-color: #3f7d46; color: #dfe6ee; }
.dm-line-cell.caught canvas { filter: none; }
.dm-line-cell:hover:not(:disabled) { border-color: #c9a34e; color: #ffd964; background: #16212f; }
.dm-line-cell.atual { border-color: #c9a34e; background: #16212f; color: #ffd964; cursor: default; }
.dm-line-cell .dm-line-nm { font-weight: bold; text-align: center;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-line-cell .dm-line-no { color: #5d6b7a; font-size: 9px; }
.dm-line-cell.atual .dm-line-no, .dm-line-cell:hover:not(:disabled) .dm-line-no { color: #b99a52; }

/* ícones reais de moeda no painel do jogador */
.cash-ic { image-rendering: pixelated; vertical-align: middle; }
.daily-cell .di canvas, .daily-cell .di img { image-rendering: pixelated; }

/* ============================================ Perfil */
.prof-hero { display: flex; gap: 14px; align-items: center;
  background: linear-gradient(135deg, #16233a, #0e1826); border: 1px solid #2c4a6e;
  border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.prof-av { background: #0d141d; border: 2px solid #c9a34e; border-radius: 12px; padding: 4px; }
.prof-av canvas { image-rendering: pixelated; }
.prof-name { font-size: 20px; font-weight: bold; color: #fff; letter-spacing: .3px; }
.prof-lv { color: #aeb9c6; font-size: 13px; margin-top: 2px; }
.prof-badge { font-size: 10px; font-weight: bold; padding: 1px 7px; border-radius: 8px; vertical-align: middle; }
.prof-badge.adm { background: #4a2c08; color: #ff9a3c; border: 1px solid #ff9a3c; }
.prof-badge.tutor { background: #0e2a3a; color: #7fd0ff; border: 1px solid #7fd0ff; }
.prof-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.prof-tile { background: #0e1622; border: 1px solid #1e2c3e; border-radius: 10px;
  padding: 10px 4px; text-align: center; }
.prof-tile .pt-ic { height: 24px; display: flex; align-items: center; justify-content: center; }
.prof-tile .pt-ic canvas { image-rendering: pixelated; }
.prof-tile .pt-v { font-weight: bold; color: #ffd964; font-size: 15px; margin-top: 3px; }
.prof-tile .pt-l { font-size: 10px; color: #7c8a99; }
.prof-dex { background: #0e1622; border: 1px solid #1e2c3e; border-radius: 10px; padding: 12px; margin-bottom: 6px; }
.prof-best { display: flex; align-items: center; gap: 12px; background: #101823;
  border: 1px solid #2c4a6e; border-radius: 10px; padding: 10px; }
.prof-best canvas { image-rendering: pixelated; }
.prof-team { display: flex; gap: 6px; }
.prof-slot { flex: 1; background: #0d141d; border: 1px solid #273246; border-radius: 8px;
  padding: 6px 2px; text-align: center; position: relative; min-height: 54px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.prof-slot.empty { opacity: .3; }
.prof-slot canvas { image-rendering: pixelated; }
.prof-slot .ps-lv { font-size: 9px; color: #8b97a5; }

/* ============================================ Troca (Trade) */
.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trade-side { background: #0e1622; border: 1px solid #1e2c3e; border-radius: 10px; padding: 10px; }
.trade-side.confirmed { border-color: #3f7d46; box-shadow: 0 0 10px rgba(63,125,70,.3); }
.ts-head { font-weight: bold; color: #ffd964; margin-bottom: 8px; font-size: 13px; }
.ts-ok { color: #6fd47f; font-size: 11px; }
.ts-gold { margin-top: 8px; color: #ffd964; font-size: 13px; }
.trade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 5px; min-height: 50px; }
.trade-cell { background: #0d141d; border: 1px solid #273246; border-radius: 7px; padding: 3px; text-align: center; position: relative; cursor: pointer; }
.trade-cell.shiny { border-color: #b98f1f; }
/* 🛡️ moldura por raridade — a troca já tinha a ideia desde antes; agora ela usa
   a paleta ÚNICA lá de cima (era uma segunda paleta, com tons próprios de rara/
   épica/lendária e sem os outros tiers). `:not(.legend)` porque LENDÁRIO é outra
   coisa: é a espécie 🌟, não o tier de qualidade — e essa marca vem primeiro. */
.trade-cell.rar:not(.legend) { border-color: var(--rar-c, #273246); box-shadow: 0 0 7px var(--rar-g, transparent); }
.trade-cell.legend { border-color: #d94fd9; box-shadow: 0 0 9px rgba(217,79,217,.4); }
/* painel de troca rápida do HUD — mesma regra: raridade fora, estado dentro */
.ps-card.rar { border-color: var(--rar-c, #273246); }
.ps-card.rar.active { box-shadow: inset 0 0 0 2px #e5484d; }
/* 🔍 ETIQUETA DE HOVER DA TROCA: nível, raridade e o Growth aberto nos 6 stats,
   cada um com o teto (/32). Vive no <body> (position:fixed) pra não ser cortada
   pelo modal — por isso o z-index tem que ficar acima dele. pointer-events:none
   é essencial: sem isso ela roubaria o mouse da própria célula e piscaria. */
.tr-tip { position: fixed; z-index: 9999; pointer-events: none; width: 236px;
  background: #0f1721; border: 1px solid #2a3d55; border-radius: 10px;
  padding: 9px 10px; box-shadow: 0 8px 22px rgba(0,0,0,.55); font-size: 12px; }
.tr-tip .tt-head { display: flex; gap: 8px; align-items: center; }
.tr-tip .tt-sp { flex: 0 0 44px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.tr-tip .tt-sp canvas { image-rendering: pixelated; }
.tr-tip .tt-id { min-width: 0; }
.tr-tip .tt-id b { color: #fff; font-size: 13.5px; }
.tr-tip .tt-lv { color: #8b97a5; font-size: 11px; }
.tr-tip .tt-badges { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.tr-tip .tt-meta { color: #9fb0c4; font-size: 11px; margin: 8px 0 6px; }
/* mesma grade 2×3 do card do Mercado Global — cabe sem mudar de altura */
.tr-tip .tt-gdet { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 5px; }
.tr-tip .tt-gdet i { display: flex; justify-content: space-between; gap: 4px; font-style: normal;
  font-size: 11px; background: rgba(20,30,45,.55); border-radius: 5px; padding: 2px 5px; }
.tr-tip .tt-gdet i em { font-style: normal; color: #8b97a5; }
.tr-tip .tt-gdet i b { color: #ff9f43; font-weight: 800; }
.tr-tip .tt-gdet i b .mx { color: #6d7b8c; font-weight: 600; font-size: 10px; }
.tr-tip .tt-nog { color: #5f7085; font-size: 10.5px; }

/* 🎒 item ofertado que o dono já não tem mais na mochila (gastou a stone/bola
   depois de ofertar) — a troca vai recusar, então o painel avisa ANTES */
.trade-cell.ti-falta { border-color: #b03a3a; box-shadow: 0 0 8px rgba(176,58,58,.35); }
.trade-cell canvas { image-rendering: pixelated; }
.trade-cell .tc-lv { display: block; font-size: 9px; color: #8b97a5; }
.tc-badges { position: absolute; top: 1px; left: 1px; right: 1px; display: flex; gap: 2px; flex-wrap: wrap; }
.tc-badge { font-size: 9px; line-height: 1; padding: 1px 3px; border-radius: 4px; font-weight: bold; }
.tc-badge.lg { background: #4d1a4d; color: #f2a6f2; }
.tc-badge.sh { background: #4d3d10; color: #ffe066; }
.tc-badge.bs { background: #4a2a12; color: #ff9e5c; }
.trade-warn { margin-top: 8px; font-size: 11px; color: #ffcf8a; background: #2a2010; border: 1px solid #5a4520; border-radius: 7px; padding: 7px 9px; line-height: 1.35; }
.badge.boost { background: #4a2a12; color: #ff9e5c; }

/* ============================================ Painel Admin */
.admin-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.as-tile { background: #0e1622; border: 1px solid #1e2c3e; border-radius: 8px; padding: 8px; text-align: center; }
.as-tile b { display: block; color: #ffd964; font-size: 16px; }
.as-tile span { font-size: 10px; color: #7c8a99; }
.admin-row { display: flex; align-items: center; gap: 8px; background: #0d141d;
  border: 1px solid #1e2c3e; border-radius: 8px; padding: 7px 10px; margin-bottom: 6px; }
.admin-row.banned { border-color: #6a2020; background: #170d0d; }
.admin-row .ar-info { flex: 1; min-width: 0; }
.admin-row .ar-acts { display: flex; gap: 4px; flex-wrap: wrap; }
.admin-row .ar-acts .btn { padding: 3px 7px; }

/* 🎨 FILTRO POR TIPO do mapa-múndi (chips criados no settings-extra.js).
   Cada chip carrega a cor do seu tipo em --tc; o SVG herda currentColor, então
   o mesmo ícone serve pro estado apagado e pro aceso. */
.tp-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; align-items: center; }
.tp-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 3px 11px 3px 3px; border-radius: 15px;
  background: color-mix(in srgb, var(--tc) 11%, #101823);
  border: 1px solid color-mix(in srgb, var(--tc) 34%, #37475c);
  color: color-mix(in srgb, var(--tc) 52%, #cfd8e3);
  font: 900 10px/1 Verdana, system-ui, sans-serif; letter-spacing: .7px;
  transition: background .12s, border-color .12s, color .12s, box-shadow .15s;
}
.tp-ic {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--tc);
  background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--tc) 30%, #1a2434), #0a0f18);
  border: 1px solid color-mix(in srgb, var(--tc) 42%, #37475c);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .5);
  transition: background .12s, border-color .12s, color .12s;
}
.tp-ic svg { width: 13px; height: 13px; display: block; fill: currentColor; }
/* mouse em cima = destaca (o pedido do print) */
.tp-chip:hover {
  background: color-mix(in srgb, var(--tc) 22%, #101823);
  border-color: color-mix(in srgb, var(--tc) 62%, #37475c);
  color: #eaf0f6;
}
.tp-chip:hover .tp-ic {
  background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--tc) 55%, #1a2434), #0a0f18);
  border-color: color-mix(in srgb, var(--tc) 65%, #37475c);
}
.tp-chip.on {
  background: color-mix(in srgb, var(--tc) 26%, #101823);
  border-color: var(--tc); color: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tc) 40%, transparent),
              0 3px 12px color-mix(in srgb, var(--tc) 28%, transparent);
}
.tp-chip.on .tp-ic {
  color: #fff;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--tc) 88%, #fff 14%), color-mix(in srgb, var(--tc) 46%, #000 32%));
  border-color: color-mix(in srgb, var(--tc) 75%, #fff);
}
.tp-chip:active { transform: translateY(1px); }
.tp-clear {
  cursor: pointer; padding: 5px 11px; border-radius: 15px;
  background: #101823; border: 1px dashed #4a5a70; color: #8b97a5;
  font: 700 10px/1 Verdana, system-ui, sans-serif; letter-spacing: .6px;
}
.tp-clear:hover { border-color: #c9a34e; color: #ffd964; }

/* 📱 celular: 18 chips com nome viram 5-6 linhas e comem o mapa inteiro.
   Só o ícone (o title/aria-label mantêm o nome pra quem precisa). */
@media (max-width: 700px), (pointer: coarse) {
  .tp-row { gap: 5px; }
  .tp-chip { padding: 3px; border-radius: 50%; }
  .tp-chip .tp-nm { display: none; }
  .tp-ic { width: 26px; height: 26px; }
  .tp-ic svg { width: 16px; height: 16px; }
  /* 🪜 o chip de tier NÃO vira círculo: a pílula mantém a letra legível ao lado
     dos chips de tipo, que ali viram só ícone. (A justificativa original era o
     "SS" não caber em 26px; o SS saiu em 30/08, a pílula ficou — o alinhamento
     com a fileira de tipos é o motivo que continua valendo.) */
  .dexf-tiers .tp-chip { border-radius: 13px; }
  .tr-let { width: 28px; height: 24px; font-size: 11px; }
  .tr-ord { padding: 5px 9px; font-size: 9.5px; }
}

/* ⚔️ barra de ação (F1-F4, baixo centro) — até 4 golpes do pokémon ativo.
   Reusa a mesma paleta por tipo do .tp-chip/.tp-ic acima (--tc). */
#moves-bar {
  /* #coords (index.html) também fica fixed/bottom/centralizado — 34px deixa
     livre a faixa 8-28px que ele ocupa */
  bottom: 34px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; padding: 6px;
}
.mb-slot {
  width: 56px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 2px; border-radius: 6px; position: relative;
  background: color-mix(in srgb, var(--tc, #37475c) 11%, #101823);
  border: 1px solid color-mix(in srgb, var(--tc, #37475c) 34%, #37475c);
}
.mb-slot .mb-ic { width: 20px; height: 20px; color: var(--tc, #8b97a5); }
.mb-slot .mb-ic svg { width: 100%; height: 100%; fill: currentColor; }
.mb-slot .mb-name {
  font-size: 9px; color: #cfd8e3; text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 52px;
}
.mb-slot.locked { opacity: .45; }
.mb-slot.locked::after { content: "🔒"; position: absolute; top: 2px; right: 3px; font-size: 9px; }
.mb-slot.empty { visibility: hidden; }

@media (max-width: 700px), (pointer: coarse) {
  .mb-slot { width: 40px; padding: 3px; }
  .mb-slot .mb-name { display: none; }
  .mb-slot .mb-ic { width: 22px; height: 22px; }
}

/* 🎚️ filtro de faixa de nível — segunda fileira, abaixo dos chips de tipo.
   Rádio (só 1 ativo): sem --tc por item, cor única de destaque quando .on. */
.nv-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.nv-chip {
  cursor: pointer; padding: 5px 13px; border-radius: 15px;
  background: #101823; border: 1px solid #37475c; color: #8b97a5;
  font: 900 10px/1 Verdana, system-ui, sans-serif; letter-spacing: .7px;
  transition: background .12s, border-color .12s, color .12s, box-shadow .15s;
}
.nv-chip:hover { border-color: #c9a34e; color: #ffd964; }
.nv-chip.on {
  background: color-mix(in srgb, #c9a34e 26%, #101823);
  border-color: #c9a34e; color: #fff;
  box-shadow: 0 0 0 1px rgba(201,163,78,.4), 0 3px 12px rgba(201,163,78,.28);
}
.nv-chip:active { transform: translateY(1px); }
.nv-chip.locked, .nv-chip:disabled {
  cursor: not-allowed; opacity: .4; color: #6b7684;
}
.nv-chip.locked:hover, .nv-chip:disabled:hover { border-color: #37475c; color: #6b7684; }

/* ═══ 🌕 FUNDIR BOLAS — a tira de receita da mochila (15/08/2026) ══════════
   ⚠️ A 1ª versão usava `class="prim"`, e `.prim` NÃO EXISTE nesta folha (só
   dentro do palco do boss, em boss.js). Resultado: um botão branco cru do
   navegador, fonte de sistema, largura de conteúdo, plantado no meio de uma
   grade de slots de 52px. Não era feio por design — era feio por não ter
   design nenhum.

   Agora ela ATRAVESSA a grade (grid-column 1/-1) em vez de disputar uma célula
   de 52px com as bolas: é uma AÇÃO, não um item, e ocupar um slot de item era
   parte do que fazia a leitura quebrar.

   ⚠️ E a receita voltou pra tela. Ela tinha ido pro `title` pra encurtar o
   rótulo — mas title só existe pra quem passa o mouse e espera. Aqui ela é
   desenhada com os dois sprites e a seta, que é a forma mais curta possível de
   dizer "20 viram 1" sem escrever nada.

   Paleta violeta de propósito: é fusão de Moon Ball, e o violeta amarra a tira
   à própria bola em vez de repetir o dourado que a mochila já usa pra
   quantidade. */
.fuse-row {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px;
  width: 100%; margin: 3px 0 1px; padding: 7px 9px 7px 8px;
  border-radius: 10px; cursor: pointer; font: inherit; text-align: left;
  color: #cfc6ea; border: 1px solid #38305a;
  background: linear-gradient(180deg, rgba(78, 60, 130, .26), rgba(15, 17, 30, .5));
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.fuse-row:hover:not(:disabled) {
  border-color: #8f76d8;
  background: linear-gradient(180deg, rgba(104, 80, 175, .34), rgba(20, 22, 40, .58));
  box-shadow: 0 0 14px rgba(140, 105, 235, .2);
}
.fuse-row:disabled { opacity: .45; cursor: default; box-shadow: none; }
.fuse-mat { display: flex; align-items: center; gap: 4px; }
.fuse-mat canvas, .fuse-mat img { display: block; }
.fuse-mat i {
  font-style: normal; font-size: 11px; font-weight: 700;
  color: #9aa3bd; font-variant-numeric: tabular-nums;
}
.fuse-mat.alvo i { color: #ffd964; }
.fuse-seta { color: #6b5f8f; font-size: 12px; line-height: 1; }
/* o rótulo é discreto de propósito: quem decide é a receita à esquerda, e um
   "FUNDIR" gritando roubaria a leitura dela */
.fuse-go {
  margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: 2.2px;
  text-transform: uppercase; color: #e6d9ff; padding: 5px 12px; border-radius: 7px;
  border: 1px solid rgba(185, 155, 255, .4);
  background: linear-gradient(180deg, rgba(150, 120, 235, .3), rgba(70, 55, 130, .3));
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.fuse-row:hover:not(:disabled) .fuse-go {
  color: #fff; border-color: rgba(215, 190, 255, .78);
  background: linear-gradient(180deg, rgba(170, 140, 255, .46), rgba(90, 70, 160, .42));
}
/* quantas dá pra fazer — só aparece quando é mais de uma, senão é ruído */
.fuse-qtd { font-size: 10.5px; color: #8f86ad; letter-spacing: .3px; }