/* PokeMonster Chrome Idle — 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; } }
#welcome-card { position: relative; max-width: 620px; width: 100%;
  border-radius: 14px; overflow: hidden; box-shadow: 0 12px 48px rgba(140, 60, 220, .5);
  border: 2px solid #7a3fd0; animation: wc-pop .3s cubic-bezier(.2,1.2,.4,1); }
@keyframes wc-pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#welcome-img { display: block; width: 100%; height: auto; }
#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; 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; }
.btn.tiny { padding: 1px 8px; font-size: 11px; }
.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) */
.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); }
.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; }

/* 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: #8fa8ff; }

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

#zone-label {
  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: 240px; 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 { 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); }
.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 */
#topbar {
  top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; padding: 5px 8px;
}
.tb {
  background: transparent; border: 1px solid transparent; border-radius: 7px;
  font-size: 17px; padding: 3px 8px; 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) */
.tb.ic { padding: 5px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; }
.tb.ic img {
  width: 26px; height: 26px; image-rendering: auto;
  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: 21px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.upd-dot {
  position: absolute; top: 3px; right: 3px; width: 9px; height: 9px;
  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 */
/* cabeçalho + atalhos FIXOS, lista de funções com rolagem própria, rodapé fixo */
#auto-panel {
  top: 12px; right: 12px; width: 258px; padding: 8px 9px 7px; font-size: 12px;
  max-height: calc(100vh - 24px);
  display: flex; flex-direction: column;
}
.ap-title {
  flex: none; color: #ffd964; font-weight: bold; margin-bottom: 7px;
  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 { margin: 0; cursor: pointer; }

/* atalhos compactos no topo: Hunt Analyse · Centro Pokémon · Mercado (Mark) */
.ah-top { flex: none; display: flex; gap: 5px; margin: 0 0 4px; }
.ah-go {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 5px 2px 4px; font-size: 14px; line-height: 1; cursor: pointer;
  background: linear-gradient(180deg, #182636, #101a26);
  border: 1px solid #2a3d55; border-radius: 8px; color: #cfe6ff; transition: .12s;
}
.ah-go small { font-size: 9px; font-weight: 700; color: #9fb0c4; letter-spacing: .2px; }
.ah-go:hover { border-color: #c9a34e; color: #ffd964; }
.ah-go:hover small { color: #ffd964; }
.ah-go:active { transform: translateY(1px); }

/* card VIP (🤖 Auto-Hunt Inteligente, injetado pelo settings-extra):
   compacto e dourado, fixo logo acima da lista (flex order) */
#auto-panel #ah-smart { order: 1; flex: none; padding: 6px 8px !important; margin: 2px 0 4px !important; border-radius: 8px !important; }
#auto-panel #ah-smart .d { display: none; }

/* SÓ a lista de funções rola (cabeçalho/rodapé sempre visíveis) */
.ah-body { order: 2; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: 3px; margin-right: -3px; }
.ah-body::-webkit-scrollbar { width: 7px; }
.ah-body::-webkit-scrollbar-thumb { background: #c9a34e55; border-radius: 4px; }
.ah-bottom { order: 3; flex: none; border-top: 1px solid #273246; margin-top: 5px; padding-top: 5px; }
#ahp-back { order: 4; }

/* categorias (Batalha / Captura / Automação) */
.ah-cat {
  display: flex; align-items: center; gap: 6px; margin: 7px 2px 3px;
  color: #ffd964; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
.ah-cat:first-child { margin-top: 1px; }
.ah-cat::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #c9a34e55, transparent); }

/* 🪟 opacidade ajustável dos painéis (menus) */
.panel.hud { opacity: var(--menu-op, 1); }

/* cards: verde discreto LIGADO · cinza desligado */
.ah-row {
  background: #0d141d; border: 1px solid #273246; border-radius: 7px;
  padding: 5px 7px; margin: 4px 0; transition: border-color .15s, background .15s;
}
.ah-row:hover { border-color: #37475c; }
.ah-row.on {
  border-color: #3f8f4a66;
  background: linear-gradient(180deg, #0e1c13, #0c1610);
}
.ah-head { display: flex; align-items: center; gap: 4px; }
.ah-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; }
.ah-ic { flex: none; width: 20px; text-align: center; font-size: 14px; filter: grayscale(.6) opacity(.75); transition: filter .15s; }
.ah-row.on .ah-ic { filter: none; }
.ah-txt { flex: 1; min-width: 0; }
.ah-txt b {
  display: block; font-size: 11.5px; line-height: 1.25; color: #aeb9c6; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ah-row.on .ah-txt b { color: #cfeed4; }
.ah-desc {
  display: block; color: #75808f; font-size: 9px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ah-row.on .ah-desc { color: #8fae95; }

/* switch — o checkbox REAL fica invisível (mesmos ids/eventos de sempre) */
#auto-panel .ah-row input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ah-sw {
  flex: none; width: 30px; height: 17px; border-radius: 10px; position: relative;
  background: #222c39; border: 1px solid #37475c; transition: background .18s, border-color .18s;
}
.ah-sw::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px;
  border-radius: 50%; background: #77828f; transition: left .18s, background .18s;
}
#auto-panel .ah-row input[type=checkbox]:checked + .ah-sw { background: #1d4527; border-color: #3f8f4a; }
#auto-panel .ah-row input[type=checkbox]:checked + .ah-sw::after { left: 15px; background: #58c468; }
#auto-panel .ah-row input[type=checkbox]:focus-visible + .ah-sw { outline: 1px solid #c9a34e; outline-offset: 1px; }
.ah-sw.sm { width: 24px; height: 14px; }
.ah-sw.sm::after { width: 8px; height: 8px; }
#auto-panel .ah-row input[type=checkbox]:checked + .ah-sw.sm::after { left: 12px; }

/* ▾ expandir opções (potion/bola/isca) mesmo com a função desligada */
.ah-exp {
  flex: none; width: 16px; height: 16px; padding: 0; line-height: 1;
  background: none; border: 0; color: #5f6f83; font-size: 10px; cursor: pointer;
  transition: transform .15s, color .15s;
}
.ah-exp:hover { color: #ffd964; }
.ah-exp.none { visibility: hidden; }
.ah-row.exp .ah-exp { transform: rotate(180deg); color: #ffd964; }

/* sub-opções: aparecem com a função LIGADA ou expandida no ▾ */
.ah-sub { display: none; margin: 5px 0 1px 27px; flex-direction: column; gap: 3px; }
.ah-row.on .ah-sub, .ah-row.exp .ah-sub { display: flex; }
.ah-line { display: flex; align-items: center; gap: 5px; }
.ah-line span { flex: none; color: #93a0ae; font-size: 10px; }
.ah-line select {
  flex: 1; min-width: 0; background: #0d141d; color: #e8eef5;
  border: 1px solid #37475c; border-radius: 5px; padding: 2px 3px; font-size: 10.5px;
}
.ah-line .tag { flex: none; }
.ah-check { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #aeb9c6; }
.ah-warn { color: #ffd964; font-size: 9.5px; margin: 4px 0 1px 27px; }

/* rodapé fixo: opacidade + reset das posições */
.ah-oprow { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: #cfd8e3; margin-bottom: 3px; }
.ah-oprow b { color: #ffd964; }
.ah-oprow .ah-reset { margin-left: auto; }
.ah-bottom input[type=range] { width: 100%; accent-color: #c9a34e; cursor: pointer; height: 14px; }

/* modo premium (launcher do settings-extra): esconde a lista clássica inteira */
body.ah-premium #auto-panel .ah-body, body.ah-premium #auto-panel .ah-bottom { display: none !important; }

/* 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); width: min(258px, calc(100vw - 82px)); }
}

/* badges dos slots do time/box (✨ shiny · 🔒 travado) */
.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); }
.slot-b.sh { left: 3px; }
.slot-b.lk { right: 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; } }

/* 📊 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; }
}

/* 🔑 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 */
/* fundo cinzentado + borda azul discreta + detalhes dourados (tokens da Pokédex) */
#capture-panel {
  right: 12px; bottom: 12px; width: 265px; padding: 9px 10px;
  background: linear-gradient(180deg, rgba(23, 29, 39, .97), rgba(13, 18, 26, .97));
  border: 1px solid #2a3d55;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .35);
}
/* cabeçalho limpo: ícone+título à esquerda · gerenciador · contador à direita */
.cp-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 7px; padding-bottom: 6px; border-bottom: 1px solid #1e2a3c;
}
/* ⚾ 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; flex: none;
}
.cp-mgr:hover { border-color: #c9a34e; }
/* contador: neutro em "0 selvagens" · dourado discreto quando tem selvagem */
#cp-count {
  flex: none; font-size: 10.5px; border-radius: 11px; padding: 2px 9px;
  background: #101823; border: 1px solid #2a3d55; color: #8b97a5;
  transition: color .15s, border-color .15s;
}
#cp-count.has { color: #ffd964; border-color: #c9a34e88; font-weight: 700; }
/* 🧍 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 {
  padding: 2px 7px; cursor: pointer;
  background: transparent; border: 1px dashed #37475c; border-radius: 5px;
  color: #8b97a5; font-size: 9.5px; line-height: 1.3;
}
.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; }
.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 { display: flex; gap: 6px; }
.cc-type {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; background: radial-gradient(circle at 50% 35%, #1a2434, #0a0f18);
  border: 1px solid color-mix(in srgb, var(--cc) 55%, #37475c); border-radius: 50%;
  box-shadow: inset 0 0 6px rgba(0,0,0,.5);
}
.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 v2 — padrão da Pokédex (fundo #0e141e · superfície #171f2e ·
   bordas #2a3d55 · dourado #c9a34e · azul #3f8cff · verde #42d67b) */
.bst2 { display: flex; flex-direction: column; gap: 8px; }
.bst2-card {
  background: linear-gradient(180deg, #171f2e, #0e141e); border: 1px solid #2a3d55;
  border-radius: 12px; padding: 12px 14px;
}
.bst2-top { display: flex; gap: 14px; align-items: center; }
.bst2-sp {
  flex: none; background: #0a0e16; border: 1px solid #2a3d55; border-radius: 12px;
  padding: 8px; display: flex; align-items: center; justify-content: center;
}
.bst2-sp canvas { image-rendering: pixelated; display: block; }
.bst2-info { flex: 1; min-width: 0; }
.bst2-nm { font-size: 16px; font-weight: 800; color: #e8eef4; }
.bst2-plus { color: #ffd964; font-weight: 900; margin-left: 3px; }
.bst2-sub { font-size: 11.5px; color: #9fb0c4; margin-top: 3px; }
.bst2-badge {
  display: inline-block; margin-top: 5px; font-size: 9.5px; font-weight: 800;
  color: #7fd0ff; background: rgba(63, 140, 255, .12); border: 1px solid #3f8cff55;
  border-radius: 8px; padding: 1px 8px; letter-spacing: .2px;
}
.bst2-bar { position: relative; height: 15px; background: #0a0e16; border: 1px solid #22314a; border-radius: 8px; overflow: hidden; margin-top: 7px; }
.bst2-bar > div { height: 100%; background: linear-gradient(90deg, #c9a34e, #f8d462); transition: width .4s; }
.bst2-bar span { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 15px; color: #fff; text-shadow: 0 0 3px #000; font-weight: 700; }
.bst2-max { margin-top: 10px; text-align: center; font-weight: 800; color: #ffd964; padding: 8px; border: 1px solid #c9a34e55; border-radius: 9px; background: rgba(201, 163, 78, .08); }
/* quantidade: +1 / +5 / +10 / Máximo possível */
.bst2-qtds { display: flex; gap: 5px; }
.bst2-q {
  flex: 1; background: #171f2e; border: 1px solid #2a3d55; color: #9fb0c4;
  border-radius: 9px; padding: 7px 4px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .12s;
}
.bst2-q:hover { border-color: #c9a34e; }
.bst2-q.on { background: #c9a34e; border-color: #c9a34e; color: #1a1408; }
/* prévia antes → depois */
.bst2-body { display: flex; flex-direction: column; gap: 6px; }
.bst2-prev { background: #171f2e; border: 1px solid #22314a; border-radius: 10px; padding: 8px 12px; }
.bst2-r { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; color: #9fb0c4; }
.bst2-r span { flex: 1; }
.bst2-r b { color: #e8eef4; font-variant-numeric: tabular-nums; }
.bst2-r i { color: #5f6f83; font-style: normal; }
.bst2-r b.dep { color: #42d67b; }
.bst2-r b.dep em { font-style: normal; font-size: 10px; color: #7fd0ff; margin-left: 3px; }
/* recursos: verde quando tem, vermelho + quanto falta quando não */
.bst2-rec {
  display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
  background: #171f2e; border: 1px solid #2a3d55; border-radius: 9px; padding: 7px 11px; color: #9fb0c4;
}
.bst2-rec b { color: #e8eef4; font-variant-numeric: tabular-nums; }
.bst2-rec .si { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 800; }
.bst2-rec.ok { border-color: #42d67b55; }
.bst2-rec.ok .si.ok { color: #42d67b; }
.bst2-rec.no { border-color: #a3333366; }
.bst2-rec.no .si.no { color: #ff8f8f; }
/* botão principal */
.bst2-go {
  width: 100%; padding: 12px; border-radius: 11px; cursor: pointer;
  background: linear-gradient(180deg, #e0b95d, #b8893a); color: #161006;
  border: 1px solid #ffd964; font-size: 14px; font-weight: 800; transition: filter .15s;
}
.bst2-go:hover:not(:disabled) { filter: brightness(1.08); }
.bst2-go:disabled { opacity: .45; cursor: default; }
.bst2-go.feito { background: linear-gradient(180deg, #4ad67b, #2b9b52); border-color: #42d67b; color: #06130a; animation: bstPop .5s cubic-bezier(.2,.9,.3,1.4); }
@keyframes bstPop { from { transform: scale(.94); } 60% { transform: scale(1.03); } to { transform: none; } }
/* carrossel de escolha do pokémon */
.bst2-selwrap { display: flex; align-items: stretch; gap: 5px; }
.bst2-nav {
  flex: none; width: 24px; background: #171f2e; border: 1px solid #2a3d55; border-radius: 9px;
  color: #9fb0c4; font-size: 16px; cursor: pointer;
}
.bst2-nav:hover { border-color: #c9a34e; color: #ffd964; }
.bst2-sel { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding: 2px; }
.bst2-sel::-webkit-scrollbar { height: 7px; }
.bst2-sel::-webkit-scrollbar-thumb { background: #c9a34e44; border-radius: 4px; }
.bst2-poke {
  flex: none; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: #171f2e; border: 1px solid #2a3d55; border-radius: 10px; padding: 7px 4px 6px;
  cursor: pointer; transition: border-color .12s, transform .12s;
}
.bst2-poke:hover { border-color: #3f8cff; transform: translateY(-1px); }
.bst2-poke.sel { border-color: #c9a34e; box-shadow: 0 0 0 1px #c9a34e55 inset; background: linear-gradient(180deg, #1d1a10, #171f2e); }
.bst2-poke canvas { image-rendering: pixelated; }
.bst2-poke .n { max-width: 100%; font-size: 10px; font-weight: 700; color: #e8eef4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bst2-poke .l { font-size: 9.5px; color: #9fb0c4; }
.bst2-poke .l b { color: #ffd964; }
.slot-boost {
  position: absolute; top: 1px; left: 3px; font-size: 9px; font-weight: 900;
  color: #c58cff; text-shadow: 0 0 3px #000;
}

/* 🏆 MOLDURA DO BOOST +100 — aplicada em QUALQUER card/slot que mostre o
   badge .slot-boost com +100 ou mais (o marcador vem do settings-extra).
   É borda/glow: NÃO cobre o sprite, NÃO some com o shiny (✨ continua) e
   NÃO substitui a raridade — todos coexistem. Sem asset .png: escala em
   qualquer tamanho e anima sem pesar (só border/box-shadow/transform). */
.boost100 {
  border-color: #ffd700 !important;
  box-shadow: 0 0 0 1px rgba(255, 215, 0, .55) inset, 0 0 10px rgba(255, 215, 0, .45);
  animation: b100-glow 2.4s ease-in-out infinite;
}
@keyframes b100-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,215,0,.5) inset, 0 0 8px rgba(255,215,0,.4); }
  50%      { box-shadow: 0 0 0 1px rgba(255,215,0,.9) inset, 0 0 16px rgba(255,215,0,.75); }
}
/* brilho passando por cima (discreto) */
.boost100::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.30) 50%, transparent 58%);
  background-size: 260% 100%; animation: b100-shine 3.6s linear infinite; z-index: 3;
}
@keyframes b100-shine { 0% { background-position: 140% 0; } 100% { background-position: -60% 0; } }
/* coroa discreta no canto */
.boost100::after {
  content: '👑'; position: absolute; top: -8px; right: -4px; font-size: 11px;
  filter: drop-shadow(0 0 3px rgba(255,215,0,.9)); pointer-events: none; z-index: 4;
}
/* o badge "+100" vira dourado */
.boost100 .slot-boost { color: #ffd700; text-shadow: 0 0 4px rgba(255,215,0,.8), 0 0 3px #000; }

/* ⚙️ 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 {
  /* ⚔️ V2.3: painel EM PÉ na lateral direita. Antes ficava deitado no centro
     (bottom:84px) e tapava justamente a arena onde os pokémon lutam — e agora
     que eles avançam ~290px, essa faixa central precisa ficar 100% livre.
     A lateral direita, entre o Auto-Helper (topo) e a Captura (rodapé), é o
     único espaço vertical realmente vago. */
  position: fixed; right: 12px; top: 50%; left: auto; bottom: auto;
  transform: translateY(-50%);
  z-index: 120; width: 228px; max-height: 78vh; overflow-y: auto; padding: 10px 12px 12px;
  background: rgba(15,20,28,.94);
  border: 1px solid #a04848; box-shadow: 0 8px 30px rgba(160,40,40,.35);
}
/* arena EM PÉ: eu em cima, VS no meio, rival embaixo */
#duel-panel .dp-arena { flex-direction: column; gap: 6px; }
#duel-panel .dp-f { min-width: 0; width: 100%; }
#duel-panel .dp-hp { width: 100%; }
#duel-panel .dp-head { font-size: 11px; gap: 4px; }
#duel-panel .dp-left { margin-left: 0; }
#duel-panel .dp-mid { flex: none; padding: 2px 0; }
#duel-panel .dp-vs { font-size: 15px; }
#duel-panel .dp-count { font-size: 24px; }
#duel-panel .dp-bench { flex-wrap: wrap; gap: 4px; margin-top: 8px; }
#duel-panel .dp-slot { width: 34px; height: 34px; }
/* histórico compacto: nome + dano + efetividade na MESMA linha */
#duel-panel .dp-log { font-size: 10px; gap: 0; }
#duel-panel .dp-log > div { display: flex; align-items: baseline; gap: 4px;
  padding: 2px 0; border-bottom: 1px solid rgba(39,50,70,.5); }
#duel-panel .dp-log > div:last-child { border-bottom: 0; }
#duel-panel .dp-log span { min-width: 0; flex: 1; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
#duel-panel .dp-log b { margin: 0; }
/* telas baixas/estreitas: volta pro rodapé (lateral não caberia) */
@media (max-width: 900px), (max-height: 620px) {
  #duel-panel { right: 50%; top: auto; bottom: 8px; transform: translateX(50%);
    width: min(460px, 94vw); max-height: 44vh; }
  #duel-panel .dp-arena { flex-direction: row; }
  #duel-panel .dp-f { width: auto; min-width: 110px; }
  #duel-panel .dp-hp { width: 110px; }
}
.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 DE BOLAS v2 — padrão da Pokédex: fundo cinzentado, borda azul
   discreta, detalhes dourados, altura FIXA com paginação (3×5 = 15/página) */
.bm2 { display: flex; flex-direction: column; gap: 8px; }
.bm2-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bm2-count {
  flex: none; font-size: 11px; color: #8b97a5; background: #101823;
  border: 1px solid #2a3d55; border-radius: 11px; padding: 3px 10px;
}
.bm2-count b { color: #ffd964; }
.bm2-busca {
  flex: 1; min-width: 150px; background: rgba(10, 16, 26, .95); color: #e8eef5;
  border: 1px solid #2a3d55; border-radius: 9px; padding: 6px 11px; font-size: 12px; outline: none;
}
.bm2-busca:focus { border-color: #c9a34e; }
.bm2-fs { display: flex; gap: 4px; flex-wrap: wrap; }
.bm2-f {
  background: rgba(20, 30, 45, .6); border: 1px solid #2a3d55; color: #cfd8e3;
  border-radius: 13px; padding: 4px 10px; font-size: 11px; cursor: pointer; transition: all .12s;
}
.bm2-f:hover { border-color: #c9a34e; }
.bm2-f.on { background: #c9a34e; color: #1a1408; border-color: #c9a34e; font-weight: 700; }
/* grade fixa com setas laterais */
.bm2-mid { position: relative; padding: 0 26px; }
.bm2-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, 1fr);
  gap: 6px; height: min(55vh, 520px);
}
.bm2-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 22px; height: 56px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: #101823; border: 1px solid #2a3d55; border-radius: 8px;
  color: #cfd8e3; font-size: 16px; line-height: 1; transition: all .12s; padding: 0;
}
.bm2-prev { left: 0; }
.bm2-next { right: 0; }
.bm2-nav:hover:not(:disabled) { border-color: #c9a34e; color: #ffd964; }
.bm2-nav:disabled { opacity: .3; cursor: default; }
/* card: sprite centralizado + nome + bolas + chance (altura padronizada) */
.bm2-card {
  position: relative; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(180deg, rgba(23, 29, 39, .9), rgba(13, 20, 32, .9));
  border: 1px solid #2a3d55; border-radius: 9px; padding: 6px 8px;
  transition: border-color .12s, transform .12s;
}
.bm2-card:hover { border-color: #c9a34e; transform: translateY(-1px); }
.bm2-card canvas { image-rendering: pixelated; flex: none; }
.bm2-card.caught { border-color: #3f8f4a66; background: linear-gradient(180deg, #0e1c13, #0d141d); }
.bm2-card.sh { border-color: #ffd96455; }
.bm2-badge {
  position: absolute; top: 4px; left: 4px; font-size: 8.5px; font-weight: 700;
  color: #7fd47f; background: rgba(60, 157, 80, .16); border: 1px solid #3c9d5055;
  border-radius: 8px; padding: 1px 6px; letter-spacing: .2px;
}
.bm2-nm {
  max-width: 100%; font-weight: 700; font-size: 11.5px; color: #e8eef4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px;
}
.bm2-meta { font-size: 10px; color: #8b97a5; }
.bm2-meta b { color: #cfd8e3; }
.bm2-ch { color: #ffd964; font-weight: 700; }
.bm2-caret {
  position: absolute; top: 2px; right: 4px; background: none; border: none;
  color: #5f6f83; font-size: 11px; cursor: pointer; padding: 2px 4px;
  transition: transform .15s, color .15s;
}
.bm2-caret:hover { color: #ffd964; }
.bm2-card.open .bm2-caret { transform: rotate(180deg); color: #ffd964; }
/* ▾ bolas usadas: POPOVER dentro do card — a grade não muda de tamanho */
.bm2-pop {
  display: none; position: absolute; left: 4px; right: 4px; bottom: 4px; z-index: 6;
  background: rgba(10, 15, 22, .98); border: 1px solid #c9a34e66; border-radius: 8px;
  padding: 5px 6px; flex-wrap: wrap; gap: 4px; justify-content: center;
  max-height: calc(100% - 8px); overflow-y: auto; scrollbar-width: thin;
}
.bm2-card.open .bm2-pop { display: flex; }
.bm2-vazio { grid-column: 1 / -1; align-self: center; text-align: center; font-size: 12.5px; }
/* rodapé: Página X de Y + números compactos */
.bm2-foot { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 26px; flex-wrap: wrap; }
.bm2-pg { font-size: 11px; color: #8b97a5; }
.bm2-pg b { color: #ffd964; }
.bm2-pgs { display: flex; align-items: center; gap: 3px; }
.bm2-pgs i { color: #5f6f83; font-style: normal; font-size: 10px; padding: 0 1px; }
.bm2-pn {
  min-width: 22px; height: 20px; padding: 0 5px; background: #101823;
  border: 1px solid #2a3d55; border-radius: 6px; color: #cfd8e3;
  font-size: 10.5px; cursor: pointer; transition: all .12s;
}
.bm2-pn:hover { border-color: #c9a34e; }
.bm2-pn.on { background: #c9a34e; border-color: #c9a34e; color: #1a1408; font-weight: 700; }
/* telas menores: 2 colunas (ou 1 bem estreita), grade rola por dentro */
@media (max-width: 640px) {
  .bm2-mid { padding: 0 24px; }
  .bm2-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-rows: minmax(96px, auto); height: auto; max-height: 58vh; overflow-y: auto; }
}
@media (max-width: 380px) {
  .bm2-grid { grid-template-columns: 1fr; }
}
/* chips de bola (usados no popover do gerenciador) */
.bm-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px;
  background: #101823; border: 1px solid #37475c; border-radius: 11px;
  padding: 2px 8px; color: #e6edf5;
}
.bm-chip canvas { image-rendering: pixelated; }
.cp-title { flex: 1; min-width: 0; color: #ffd964; font-weight: bold; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* bolas em GRADE uniforme: célula igual pra todas (ícone em cima, quantidade
   embaixo — "38.6K" cabe inteiro). Grade re-flui sozinha em telas menores. */
.cp-balls {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 4px; margin-bottom: 8px; max-height: 96px; overflow-y: auto;
  scrollbar-width: thin; padding-right: 2px;
}
.cp-balls::-webkit-scrollbar { width: 6px; }
.cp-balls::-webkit-scrollbar-thumb { background: #c9a34e55; border-radius: 3px; }
.cp-ball {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 42px; padding: 4px 2px; border-radius: 8px; cursor: pointer;
  background: #101823; border: 1px solid #37475c; color: #aeb9c6;
  font-size: 10px; line-height: 1.1; text-align: center;
  transition: border-color .12s, background .12s, color .12s;
}
.cp-ball canvas { width: 18px; height: 18px; image-rendering: pixelated; flex: none; }
.cp-ball > span { font-size: 13px; line-height: 18px; } /* fallback: ícone emoji */
.cp-ball b { font-weight: 700; font-size: 10px; color: inherit; max-width: 100%; white-space: nowrap; }
/* cor DISCRETA por tipo de bola (só a borda — selecionada vira dourada) */
.cp-ball.cp-b-pokeball { border-color: #7c3f3b; }
.cp-ball.cp-b-great { border-color: #3d5f92; }
.cp-ball.cp-b-super { border-color: #4a5568; }
.cp-ball.cp-b-ultra { border-color: #8a7a2e; }
.cp-ball.cp-b-saffari { border-color: #4a7a4e; }
.cp-ball.cp-b-master { border-color: #6a4a8f; }
.cp-ball.cp-b-moon { border-color: #4a4a7a; }
.cp-ball.cp-b-tinker { border-color: #8f5a7a; }
.cp-ball.cp-b-sora { border-color: #4a7a9a; }
.cp-ball.cp-b-dusk { border-color: #3a5a45; }
.cp-ball.cp-b-yume { border-color: #7a4a7a; }
.cp-ball.cp-b-tale { border-color: #4a7a72; }
.cp-ball.cp-b-net { border-color: #3f7a8a; }
.cp-ball.cp-b-janguru { border-color: #4a7a3f; }
.cp-ball.cp-b-magu { border-color: #8a5a2e; }
.cp-ball.cp-b-fast { border-color: #8a6a2e; }
.cp-ball.cp-b-heavy { border-color: #5a6a7a; }
.cp-ball.cp-b-premier { border-color: #7a8a9a; }
.cp-ball.cp-b-especial { border-color: #8a7a3e; }
.cp-ball.cp-b-esferadepal { border-color: #6a5a8f; }
.cp-ball.cp-b-esferamega { border-color: #8f4a5a; }
.cp-ball.cp-b-esferagiga { border-color: #4a6a8f; }
.cp-ball.cp-b-esferatera { border-color: #4a8f7a; }
.cp-ball.cp-b-esferaultra { border-color: #8f7a3e; }
.cp-ball.cp-b-esferalendaria { border-color: #9a7a2e; }
.cp-ball.cp-b-divine { border-color: #9a8a3e; }
.cp-ball.cp-b-police { border-color: #3f5f9a; }
/* estados por ÚLTIMO (vencem a cor do tipo na mesma especificidade) */
.cp-ball:hover { border-color: #c9a34e; color: #e8eef5; }
.cp-ball.sel {
  border-color: #e0b95d; color: #ffd964;
  background: linear-gradient(180deg, #1d1a10, #141108);
  box-shadow: 0 0 0 1px #e0b95d44 inset;
}
.cp-list { display: flex; flex-direction: column; gap: 4px; max-height: 230px; overflow-y: auto; scrollbar-width: thin; }
.cp-list::-webkit-scrollbar { width: 6px; }
.cp-list::-webkit-scrollbar-thumb { background: #c9a34e55; border-radius: 3px; }
.cp-row {
  display: flex; align-items: center; gap: 8px;
  background: #101823; border: 1px solid #22314a; border-radius: 7px; 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; background: linear-gradient(180deg, #17150c, #101823); }

/* ------------------------------------------------ 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; }
#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; }
/* rodapé FIXO do chat: campo + Enviar sempre visíveis (o log rola sozinho) */
.chat-input { display: flex; gap: 6px; padding: 6px 8px; border-top: 1px solid #1e2a3c; flex: 0 0 auto; background: inherit; }
.chat-input input {
  flex: 1; min-width: 0; background: rgba(10, 16, 26, .95); color: #e8eef5;
  border: 1px solid #2a3d55; border-radius: 8px; padding: 5px 10px; outline: none; font-size: 12px;
}
.chat-input input:focus { border-color: #c9a34e; }

/* ⚔ World Boss: banner antigo REMOVIDO (30/07/2026) — virou modal central.
   As regras novas (#boss-modal / #boss-ind) estão no fim do arquivo. */

/* 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; }
#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;
}
.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; }

/* 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; }

.sh-sub { font-size: 11px; color: #7c8a99; font-weight: normal; letter-spacing: 0; }
/* 📢 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; }

/* 🎨 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; }
.rank-row { display: flex; gap: 10px; padding: 6px 4px; border-bottom: 1px solid #17202c; }
.rank-row .pos { width: 34px; color: #ffd964; }
.rank-row .nm { flex: 1; }

/* 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;
}
.eq-slot.sel { border-color: #c9a34e; }
.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 { border-color: #56c878; box-shadow: 0 0 0 2px rgba(86,200,120,.45) inset, 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; }
.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; }
/* ═══════════ 🏆 CARD DO POKÉMON — painel de coleção ═══════════
   Reformulado só em CSS + um marcador de raridade (settings-extra). Os botões
   do jogo (vender/box/evoluir/aura) continuam intactos — nada de JS ofuscado
   foi tocado. A moldura da raridade e a do Boost +100 COEXISTEM (uma é a borda
   interna do sprite, a outra é o anel externo). */
.eq-card {
  background: radial-gradient(circle at 50% 0%, rgba(40, 55, 82, .55), #0b111a 70%);
  border: 1px solid #273246; border-radius: 14px; padding: 16px 14px 14px;
  position: relative; overflow: hidden;
  animation: eqc-in .22s cubic-bezier(.2, 1.1, .3, 1);
}
@keyframes eqc-in { from { transform: scale(.97); opacity: .5 } to { transform: none; opacity: 1 } }
/* faixa da raridade no topo */
.eq-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--rar, #3b4759); opacity: .9;
}
/* sprite GRANDE, centralizado, com moldura da raridade + brilho + idle */
.eq-head { display: flex; gap: 14px; align-items: center; }
.eq-head > canvas, .eq-head > img {
  width: 148px !important; height: 148px !important; /* ~2x o 74 original */
  image-rendering: pixelated;
  padding: 8px; border-radius: 16px;
  border: 2px solid var(--rar, #3b4759);
  background: radial-gradient(circle at 50% 60%, rgba(255, 255, 255, .07), transparent 70%);
  box-shadow: 0 0 14px var(--rarGlow, rgba(59, 71, 89, .5)), 0 8px 18px rgba(0, 0, 0, .5);
  animation: eqc-idle 3.2s ease-in-out infinite;
}
@keyframes eqc-idle { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
/* cores por raridade — ancoradas no .eq-head porque BOTH a janela da Equipe
   e a do pokémon LINKADO no chat (🔗) usam .eq-head. Uma regra cobre as duas. */
.eq-head.rar-comum,         .eq-card.rar-comum         { --rar: #9aa4b2; --rarGlow: rgba(154,164,178,.45); }
.eq-head.rar-rara,          .eq-card.rar-rara          { --rar: #4ade80; --rarGlow: rgba(74,222,128,.45); }
.eq-head.rar-superrara,     .eq-card.rar-superrara     { --rar: #4d9dff; --rarGlow: rgba(77,157,255,.5); }
.eq-head.rar-epica,         .eq-card.rar-epica         { --rar: #b06cff; --rarGlow: rgba(176,108,255,.55); }
.eq-head.rar-lendaria,      .eq-card.rar-lendaria      { --rar: #ffd700; --rarGlow: rgba(255,215,0,.6); }
.eq-head.rar-superlendaria, .eq-card.rar-superlendaria { --rar: #ff8c1a; --rarGlow: rgba(255,140,26,.65); }
.eq-head.rar-mistica,       .eq-card.rar-mistica       { --rar: #ff3b6b; --rarGlow: rgba(255,59,107,.7); }
.eq-head.rar-transcendente, .eq-card.rar-transcendente { --rar: #00e5d0; --rarGlow: rgba(0,229,208,.75); }
/* compatibilidade: "boa" era o nome antigo do tier que hoje se chama RARA */
.eq-head.rar-boa,           .eq-card.rar-boa           { --rar: #4ade80; --rarGlow: rgba(74,222,128,.45); }
/* ✨ shiny: brilho atrás do sprite (sem tirar a moldura) */
.eq-head.is-shiny > canvas, .eq-head.is-shiny > img {
  background: radial-gradient(circle at 50% 55%, rgba(255, 245, 170, .3), transparent 68%);
  box-shadow: 0 0 22px var(--rarGlow, rgba(255,255,255,.5)), 0 0 40px rgba(255, 240, 150, .3), 0 8px 18px rgba(0,0,0,.5);
}
/* ⭐ Boost +100: ANEL EXTERNO dourado animado — coexiste com a moldura acima */
.eq-head.boost100 > canvas, .eq-head.boost100 > img {
  outline: 3px solid #ffd700; outline-offset: 4px;
  animation: eqc-idle 3.2s ease-in-out infinite, eqc-ring 2.2s ease-in-out infinite;
}
@keyframes eqc-ring {
  0%, 100% { outline-color: rgba(255, 215, 0, .55); }
  50%      { outline-color: rgba(255, 215, 0, 1); }
}
/* ══════ 🖼 MOLDURAS DINÂMICAS: tokens de raridade UNIVERSAIS ══════
   Qualquer elemento com .rar-<tier> ganha as cores --rar/--rarGlow — o MESMO
   componente em toda tela (card de detalhe, Market, ficha de venda, mini). */
.rar-comum         { --rar: #9aa4b2; --rarGlow: rgba(154,164,178,.45); }
.rar-rara, .rar-boa { --rar: #4ade80; --rarGlow: rgba(74,222,128,.5); }
.rar-superrara     { --rar: #4d9dff; --rarGlow: rgba(77,157,255,.55); }
.rar-epica         { --rar: #b06cff; --rarGlow: rgba(176,108,255,.6); }
.rar-lendaria      { --rar: #ffd700; --rarGlow: rgba(255,215,0,.65); }
.rar-superlendaria { --rar: #ff8c1a; --rarGlow: rgba(255,140,26,.7); }
.rar-mistica       { --rar: #ff3b6b; --rarGlow: rgba(255,59,107,.75); }
.rar-transcendente { --rar: #00e5d0; --rarGlow: rgba(0,229,208,.8); }
/* moldura do sprite do card de detalhe PULSA nas raridades altas */
.eq-head.rar-epica > canvas, .eq-head.rar-epica > img,
.eq-head.rar-lendaria > canvas, .eq-head.rar-lendaria > img,
.eq-head.rar-superlendaria > canvas, .eq-head.rar-superlendaria > img,
.eq-head.rar-mistica > canvas, .eq-head.rar-mistica > img,
.eq-head.rar-transcendente > canvas, .eq-head.rar-transcendente > img {
  animation: eqc-idle 3.2s ease-in-out infinite, rar-pulse 2.6s ease-in-out infinite;
}
/* os 3 tiers do topo pulsam mais rapido: da pra sentir de longe que e raro */
.eq-head.rar-mistica > canvas, .eq-head.rar-mistica > img {
  animation: eqc-idle 3.2s ease-in-out infinite, rar-pulse 1.8s ease-in-out infinite;
}
.eq-head.rar-transcendente > canvas, .eq-head.rar-transcendente > img {
  animation: eqc-idle 3.2s ease-in-out infinite, rar-pulse 1.3s ease-in-out infinite;
}
@keyframes rar-pulse {
  0%, 100% { box-shadow: 0 0 14px var(--rarGlow), 0 8px 18px rgba(0,0,0,.5); }
  50%      { box-shadow: 0 0 26px var(--rarGlow), 0 0 8px var(--rar), 0 8px 18px rgba(0,0,0,.5); }
}
/* 🏪 Market (card + mini de seleção): a MESMA moldura da raridade */
.mk2-card[class*="rar-"], .mk2-mini[class*="rar-"] {
  border-color: var(--rar) !important;
  box-shadow: inset 0 0 0 1px var(--rar), 0 3px 14px var(--rarGlow);
}
.mk2-card.rar-epica, .mk2-card.rar-lendaria { animation: rar-card 2.6s ease-in-out infinite; }
@keyframes rar-card {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--rar), 0 3px 14px var(--rarGlow); }
  50%      { box-shadow: inset 0 0 0 1px var(--rar), 0 3px 24px var(--rarGlow); }
}
/* 🐾 ficha de venda: moldura da raridade no herói e no sprite */
.mkf-hero.rar-comum, .mkf-hero.rar-boa, .mkf-hero.rar-rara, .mkf-hero.rar-epica, .mkf-hero.rar-lendaria {
  border-color: var(--rar); box-shadow: inset 0 0 0 1px var(--rar), 0 0 22px var(--rarGlow);
}
.mkf-hero[class*="rar-"] canvas { box-shadow: 0 0 16px var(--rarGlow); border-radius: 12px; }
/* barras dos atributos mais gordas e com cor por stat */
.eq-stats .bar { height: 10px !important; border-radius: 5px; overflow: hidden; background: #0a0f17; }
.eq-stats .bar > div { border-radius: 5px; transition: width .3s ease; }
.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; }
.badge.r-comum { background: #2a3240; color: #aeb9c6; }
.badge.r-boa { background: #1d3d26; color: #8fe89f; }
.badge.r-rara { background: #3d1d3d; color: #f09fe8; }
.badge.r-epica { background: #4d2e10; color: #ffb066; }
.badge.r-lendaria { background: #4d3d10; color: #ffe066; }
.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;
}

/* 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: flex; 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) */
  #topbar { left: auto; right: 8px; top: 6px; transform: none; }
  .tb { width: 44px; height: 44px; font-size: 20px; }
  .tb.ic img { width: 30px; height: 30px; }
  #zone-label { top: 56px; font-size: 10px; max-width: 60vw; left: 8px; transform: none; }
  #coords { bottom: 4px; font-size: 10px; padding: 2px 8px; }
  #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; }
  /* 📱 detalhe da Box (Equipe & Box) no celular: sprite menor, ações em 2 colunas,
     botões com alvo de toque confortável — cabem sem estourar o modal estreito. */
  .eq-card { padding: 12px 10px 12px; }
  .eq-head { gap: 10px; }
  .eq-head > canvas, .eq-head > img { width: 96px !important; height: 96px !important; padding: 5px; }
  .eq-actions { gap: 6px; }
  .eq-actions .btn { min-width: 0; flex: 1 1 46%; min-height: 42px; }
  .eq-card .btn.gold { min-height: 44px; }          /* botões de evolução: fáceis de tocar */
  .eq-stats { font-size: 12px; }
  .bxp-rodape { flex-direction: column; gap: 6px; }
  .bxp-nav .btn { min-width: 40px; min-height: 40px; }
}
/* telas bem estreitas: ações da Box em 1 coluna */
@media (max-width: 420px) {
  .eq-actions .btn { flex: 1 1 100%; }
}

/* ============================================ Rankings */
.rank-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.rank-tab { flex: 1; background: #101823; border: 1px solid #26344a; color: #aeb9c6;
  border-radius: 7px; padding: 8px; cursor: pointer; font-size: 12px; font-weight: bold; }
.rank-tab.sel { background: #2e2410; border-color: #a3852f; color: #ffd964; }
.rank-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.rh-chip { display: flex; gap: 8px; align-items: center; background: #0e1622;
  border: 1px solid #1e2c3e; border-radius: 8px; padding: 7px 10px; }
.rh-ic { font-size: 18px; }
.rh-t { font-size: 9px; color: #7c8a99; letter-spacing: .5px; }
.rh-v { font-size: 12px; color: #cfe0f2; font-weight: bold; }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
.pod-slot { display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: linear-gradient(#16233a, #0e1826); border: 1px solid #2c4a6e;
  border-radius: 10px; padding: 10px 12px; }
.pod-slot canvas { image-rendering: pixelated; }
.pod-1 { border-color: #c9a34e; box-shadow: 0 0 14px rgba(201,163,78,.35); padding-bottom: 18px; }
.pod-2 { margin-bottom: 6px; }
.pod-3 { margin-bottom: 6px; }
.pod-medal { font-size: 22px; }
.pod-nm { text-align: center; font-size: 12px; }
.pod-nm .dim { display: block; font-size: 10px; }
.rank-row canvas { image-rendering: pixelated; }

/* ============================================ 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; }
.dexmon-stats { display: grid; grid-template-columns: 40px 1fr 40px; gap: 6px 10px; align-items: center; }

/* í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 — bate o olho e vê o que tá sendo trocado */
.trade-cell.r-rara { border-color: #7a3f7a; }
.trade-cell.r-epica { border-color: #b06a2a; }
.trade-cell.r-lendaria { border-color: #c9a52c; box-shadow: 0 0 8px rgba(201,165,44,.35); }
.trade-cell.legend { border-color: #d94fd9; box-shadow: 0 0 9px rgba(217,79,217,.4); }
.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; }

/* ═══════════════════════════════════════════════════════════════════════════
   📱 CAMADA RESPONSIVA GLOBAL — Mobile First
   Fica no FIM do arquivo de propósito: é a última palavra, então corrige
   qualquer janela sem precisar caçar a regra original de cada uma.

   Cobre as janelas que o settings-extra desenha (Market, Loja de Diamantes,
   Wiki, Pokédex Global, Guild, Re-Roll, Bônus) E as do game.js ofuscado —
   essas últimas usam #modal/.panel, que estão aqui embaixo.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* entalhe / Dynamic Island / bordas arredondadas */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  /* altura real da janela: no celular, 100vh mente quando a barra do
     navegador aparece/some. dvh acompanha; o vh fica de reserva. */
  --tela-h: 100vh;
  --toque: 44px;   /* alvo mínimo de toque (vira 48 no celular) */
}
@supports (height: 100dvh) { :root { --tela-h: 100dvh; } }

/* ── NENHUMA JANELA PASSA DA TELA ─────────────────────────────────────────
   Vale pro modal genérico do game.js e pras janelas próprias.            */
#modal,
.mk2-win, .dp-win, .gx-det, .wk-win, .gd-win, .rr-box, .pkhb {
  max-width: calc(100vw - var(--safe-l) - var(--safe-r) - 16px) !important;
  max-height: calc(var(--tela-h) - var(--safe-t) - var(--safe-b) - 16px) !important;
  box-sizing: border-box;
}
#modal-bg, .mk2-ov, .dp-ov, .gx-ov, .wk-ov, .gd-ov, .pkhb-ov {
  padding: calc(var(--safe-t) + 8px) calc(var(--safe-r) + 8px)
           calc(var(--safe-b) + 8px) calc(var(--safe-l) + 8px);
  box-sizing: border-box;
}
/* conteúdo rolável nunca empurra a janela pra fora */
#modal-body, .mk2-body, .dp-body, .wk-body, .gx-corpo {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* tabela larga rola sozinha em vez de esticar a janela */
.adm-tbl, .gx-grade, .mk2-grid { max-width: 100%; }
.scroller, .gx-corpo, #modal-body { overscroll-behavior-x: contain; }

/* ── BREAKPOINTS ─────────────────────────────────────────────────────────
   Cada faixa tem layout próprio, não é só encolher.                      */

/* Notebook — 1024 a 1365 */
@media (max-width: 1365px) {
  #modal { width: min(720px, 94vw); }
}

/* Tablet — 768 a 1023: híbrido (layout de desktop, botão maior) */
@media (max-width: 1023px) {
  :root { --toque: 46px; }
  #modal { width: min(680px, 95vw); }
  .gx-grade { grid-template-columns: repeat(2, 1fr); }
  .adm-cards, .gx-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* Mobile grande — 430 a 767 */
@media (max-width: 767px) {
  :root { --toque: 48px; }
  #modal { width: calc(100vw - 16px); max-height: calc(var(--tela-h) - var(--safe-t) - var(--safe-b) - 12px) !important; }
  .modal-head { position: sticky; top: 0; z-index: 3; }
  .gx-grade { grid-template-columns: 1fr; }
  .gx-stats, .adm-cards { grid-template-columns: repeat(2, 1fr); }
  .gx-abas, .gx-filtros, .adm-subtabs, .gcap-tabs {
    overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .gx-abas::-webkit-scrollbar, .gx-filtros::-webkit-scrollbar { display: none; }
  .gx-aba, .gx-f, .adm-subtab { flex: 0 0 auto; }
  /* nunca deixar texto minúsculo no celular */
  .gx-stat span, .adm-card .l { font-size: 11px; }
}

/* Mobile pequeno — até 429 */
@media (max-width: 429px) {
  #modal { width: calc(100vw - 8px); border-radius: 12px; }
  .gx-stats, .adm-cards { grid-template-columns: 1fr 1fr; gap: 6px; }
  .gx-stat b, .adm-card .v { font-size: 17px; }
  .gx-det { padding: 15px; }
}

/* ── ALVO DE TOQUE (só em tela de toque; no mouse fica compacto) ───────── */
@media (pointer: coarse) {
  button, .btn, .tb, .gx-aba, .gx-f, .gx-ver, .adm-btn, .adm-subtab,
  .mk2-tab, .dp-tab, .wk-tab, select, .seg {
    min-height: var(--toque);
    min-width: var(--toque);
    padding-block: 8px;
  }
  /* botão de ícone quadrado: mantém proporção sem esticar o texto */
  .tb.ic { min-width: var(--toque); min-height: var(--toque); }
  input, textarea, select { font-size: 16px; } /* <16px faz o iOS dar zoom sozinho */
  a, .linklike { padding: 2px 0; }
}

/* ── CHAT: estados de altura no celular ──────────────────────────────────
   mini 35% · médio 60% · expandido 90% · cheio 100%. O settings-extra troca
   a classe em #chat conforme o arrasto/gesto.                            */
@media (max-width: 900px), (pointer: coarse) {
  #chat {
    left: var(--safe-l); right: var(--safe-r);
    width: auto !important;
    bottom: var(--safe-b);
    border-radius: 14px 14px 0 0;
    transition: height .22s cubic-bezier(.4, 0, .2, 1);
  }
  #chat.ch-mini  { height: 35% !important; }
  #chat.ch-med   { height: 60% !important; }
  #chat.ch-exp   { height: 90% !important; }
  #chat.ch-full  { height: calc(var(--tela-h) - var(--safe-t)) !important; border-radius: 0; }
  /* a barra de digitar NUNCA some, nem com o teclado aberto */
  #chat form, #chat .chat-input, #chat-form {
    position: sticky; bottom: 0; z-index: 5;
    padding-bottom: max(6px, var(--safe-b));
    background: inherit;
  }
  #chat-log { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  /* alça de arrastar no topo do chat (o settings-extra cria o elemento) */
  .ch-grip {
    height: 22px; display: flex; align-items: center; justify-content: center;
    cursor: grab; touch-action: none; flex: 0 0 auto;
  }
  .ch-grip::before {
    content: ''; width: 38px; height: 4px; border-radius: 99px;
    background: rgba(255, 255, 255, .25);
  }
  .ch-grip:active { cursor: grabbing; }
}
/* no computador o chat segue como era (arrasto pela alça de redimensionar) */
@media (min-width: 901px) and (pointer: fine) {
  .ch-grip { display: none; }
}

/* ── PAISAGEM no celular: chat na lateral, jogo continua visível ───────── */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 500px) {
  #chat {
    top: var(--safe-t); bottom: var(--safe-b);
    left: var(--safe-l); right: auto;
    width: min(46vw, 380px) !important;
    height: auto !important;
    border-radius: 0 14px 14px 0;
  }
  #chat.ch-mini { height: auto !important; }
  .ch-grip { display: none; }
}

/* ── TAMANHO DA FONTE DO CHAT (o jogador escolhe nas configurações) ────── */
#chat.fs-p  { font-size: 11.5px; }
#chat.fs-m  { font-size: 13px; }
#chat.fs-g  { font-size: 15px; }
#chat.fs-xg { font-size: 17px; }
#chat.fs-p  #chat-log, #chat.fs-m #chat-log,
#chat.fs-g  #chat-log, #chat.fs-xg #chat-log { font-size: inherit; }

/* ── acessibilidade ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #chat, #modal, .gx-card { transition: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   💬 CHAT V2 — o layout novo. Enquanto #chat tiver a classe cv2-on, o log e as
   abas ORIGINAIS ficam escondidos (não removidos): tirar a classe devolve o
   chat antigo na hora, sem reiniciar nada.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Esconde o chat ORIGINAL desde o primeiro pixel. Antes eu só escondia depois
   que o JS rodava (classe cv2-on), então num F5 o chat velho aparecia por um
   instante e "piscava" pro jogador.
   Rede de segurança: se o renderizador novo não montar em 6s, o JS põe
   .cv2-falhou e o chat original volta — ninguém fica sem chat. */
#chat > #chat-log,
#chat > .chat-tabs { display: none !important; }
#chat.cv2-falhou > #chat-log { display: block !important; }
#chat.cv2-falhou > .chat-tabs { display: flex !important; }
#chat.cv2-falhou > .cv2-log,
#chat.cv2-falhou > .cv2-tabs { display: none !important; }

/* fundo escuro UNIFORME (sem a faixa/gradiente que o blur criava por trás)
   + borda azul discreta e detalhes dourados — mesmos tokens da Pokédex */
#chat.cv2-on { background: rgba(10, 15, 22, .97); border-color: #2a3d55; }

/* abas: canais fixos │ conversas privadas — menores, alinhadas, com rolagem
   horizontal quando há muitas conversas (a barra nunca quebra o layout) */
.cv2-tabs {
  display: flex; gap: 3px; align-items: center; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none; padding: 4px 6px; flex: 0 0 auto;
  min-height: 30px; border-bottom: 1px solid #1e2a3c;
}
.cv2-tabs::-webkit-scrollbar { display: none; }
.cv2-ct {
  position: relative; flex: 0 0 auto; background: rgba(20, 30, 45, .45); border: 1px solid transparent;
  color: #8b97a5; border-radius: 7px; padding: 3px 8px; font-size: 11px; line-height: 1.5; cursor: pointer;
  transition: color .15s, background .15s, border-color .15s; white-space: nowrap;
}
.cv2-ct:hover { color: #dbe4ee; border-color: #2a3d55; }
/* aba ATIVA = chip dourado (mesmo padrão dos filtros da Pokédex) */
.cv2-ct.on { color: #1a1408; background: #c9a34e; border-color: #c9a34e; font-weight: 700; }
/* separador + tom próprio das conversas privadas (distingue dos canais) */
.cv2-sep { flex: 0 0 auto; width: 1px; height: 16px; background: #2a3d55; margin: 0 3px; }
.cv2-ct.cv2-pm { background: rgba(96, 60, 140, .16); border-color: #6a4a8f44; color: #c5a8e8; }
.cv2-ct.cv2-pm:hover { border-color: #8f6fe0; color: #e2d2ff; }
.cv2-ct.cv2-pm.on { background: #8f6fe0; border-color: #8f6fe0; color: #14101f; }
/* 🔔 não lidas */
.cv2-badge {
  position: absolute; top: -4px; right: -4px; min-width: 14px; height: 14px; padding: 0 3px;
  background: #e5484d; color: #fff; border-radius: 99px; font-size: 9px; font-style: normal;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
  border: 1px solid #0b1017;
}
.cv2-emo { margin-left: auto; flex: 0 0 auto; background: transparent; border: none; font-size: 15px; cursor: pointer; opacity: .7; padding: 1px 3px; }
.cv2-emo:hover { opacity: 1; }
/* ─ / ⛶ : minimizar e aumentar (compactos; no celular continua o arrasto) */
.cv2-szb {
  flex: 0 0 auto; width: 20px; height: 20px; padding: 0; line-height: 1;
  background: rgba(20, 30, 45, .45); border: 1px solid #2a3d55; border-radius: 5px;
  color: #8b97a5; font-size: 10px; cursor: pointer;
}
.cv2-szb:hover { border-color: #c9a34e; color: #ffd964; }
#chat.cv2-mini { height: auto !important; }
#chat.cv2-mini .cv2-log { display: none; }
#chat.cv2-big { height: min(62vh, 560px) !important; width: min(380px, calc(100vw - 24px)); }
@media (pointer: coarse) { .cv2-szb { display: none; } }

/* lista: rolagem PRÓPRIA (scrollbar dourada fininha, padrão Pokédex) */
.cv2-log {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px 8px 6px; display: flex; flex-direction: column; gap: 1px;
  -webkit-overflow-scrolling: touch;
}
.cv2-log::-webkit-scrollbar { width: 7px; }
.cv2-log::-webkit-scrollbar-thumb { background: #c9a34e44; border-radius: 4px; }
.cv2-mais { text-align: center; color: #55637a; font-size: 11px; padding: 6px 0 8px; }

/* mensagem COMPACTA: badge · nome · [lv] · texto · hora, tudo na mesma linha */
.cv2-msg {
  display: flex; gap: 6px; padding: 2px 6px; border-radius: 6px;
  animation: cv2In .18s ease;
}
@keyframes cv2In { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.cv2-msg:hover { background: rgba(255,255,255,.04); }
.cv2-av { flex: 0 0 auto; width: 28px; height: 28px; }
.cv2-av canvas { image-rendering: pixelated; display: block; }
.cv2-av-vazio { width: 0; }
.cv2-corpo { flex: 1 1 auto; min-width: 0; }
.cv2-cab { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
/* linha unica estilo Tibia: [GUILD] TAG Nome [184]: mensagem · 12:04 */
.cv2-linha { line-height: 1.45; font-size: 12.5px; word-break: break-word; }
.cv2-gld { color: #7fd4a8; font-weight: 700; font-size: 11px; }
.cv2-lv { color: #7c8899; margin-left: 3px; font-size: 11px; }
.cv2-dp { color: #7c8899; }
.cv2-linha .cv2-nome { vertical-align: baseline; }
.cv2-linha .cv2-txt { display: inline; margin: 0; }
/* horário: COLADO no fim da mensagem (era float solto no canto direito) */
.cv2-linha .cv2-h { float: none; margin-left: 6px; }
.cv2-linha .cv2-tag { margin-right: 3px; }
/* 🏷 pílula de cargo padronizada (VIP/Streamer/Admin/Moderador — a cor vem do cargo) */
.cv2-tag {
  font-size: 9.5px; border: 1px solid; border-radius: 5px; padding: 0 4px;
  line-height: 1.5; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
}
.cv2-nome {
  background: none; border: none; padding: 0; cursor: pointer;
  font-weight: 700; font-size: 12.5px; line-height: 1.35;
}
.cv2-nome:hover { text-decoration: underline; }
.cv2-h { color: #55637a; font-size: 9.5px; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.cv2-sub { color: #7c8899; font-size: 10.5px; margin-top: -1px; }
.cv2-sub b { color: #9aa8bd; font-weight: 600; }
.cv2-txt { color: #d7e0ea; font-size: 12.5px; line-height: 1.45; margin-top: 0; word-break: break-word; }
.cv2-link { color: #6cb6ff; text-decoration: none; }
.cv2-link:hover { text-decoration: underline; }
.cv2-men { color: #ffd964; }
.cv2-men-eu { background: rgba(255,217,100,.16); border-radius: 4px; padding: 0 3px; }
/* tamanho de fonte escolhido nas configurações vale também no chat novo */
#chat.fs-p .cv2-linha, #chat.fs-p .cv2-txt, #chat.fs-p .cv2-sys { font-size: 11px; }
#chat.fs-g .cv2-linha, #chat.fs-g .cv2-txt, #chat.fs-g .cv2-sys { font-size: 14.5px; }
#chat.fs-xg .cv2-linha, #chat.fs-xg .cv2-txt, #chat.fs-xg .cv2-sys { font-size: 16.5px; }

/* linhas de sistema: texto primeiro, hora junto do fim (ordem via flex) */
.cv2-sys { color: #8b97a5; font-size: 11.5px; padding: 2px 6px; display: flex; gap: 6px; align-items: baseline; }
.cv2-sys .cv2-txt { color: #8b97a5; font-size: 11.5px; margin: 0; order: 1; }
.cv2-sys .cv2-h { margin-left: 0; order: 2; }
.cv2-sys .cv2-x { order: 3; }
.cv2-t-rare .cv2-txt, .cv2-t-rare { color: #ffd964; }
.cv2-t-broadcast { background: rgba(201,163,78,.09); border-left: 2px solid #c9a34e; }
.cv2-t-trade .cv2-txt { color: #b9e6c9; }

/* card de pokémon linkado: compacto — sprite + infos alinhadas em 3 linhas */
.cv2-pk {
  margin: 3px 0 2px; background: rgba(13, 20, 32, .85); border: 1px solid #2a3d55;
  border-radius: 8px; padding: 5px 8px; display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%; cursor: pointer; transition: border-color .12s;
}
.cv2-pk:hover { border-color: #c9a34e; }
.cv2-pk canvas { width: 30px; height: 30px; image-rendering: pixelated; flex: none; }
.cv2-pk-i { min-width: 0; }
.cv2-pk-n { font-weight: 700; font-size: 11.5px; color: #e8eef4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv2-pk-n .cv2-pk-l { margin-left: 4px; }
.cv2-pk-l { font-size: 10px; color: #8b97a5; font-weight: 600; }
.cv2-pk-r { font-size: 10px; font-weight: 700; margin-top: 1px; }
.cv2-pk-s { font-size: 9.5px; color: #7c8899; margin-top: 1px; white-space: nowrap; }
.cv2-pk-sh { border-color: #ffd96455; }

/* menu do perfil */
.cv2-menu {
  position: fixed; z-index: 9500; min-width: 178px;
  background: linear-gradient(rgba(28,36,52,.99), rgba(13,18,28,.99));
  border: 1px solid #2a3d55; border-radius: 11px; padding: 5px;
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
}
.cv2-mh { font-size: 11px; color: #6b7c92; padding: 4px 8px 6px; border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: 4px; }
.cv2-menu button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: #cfd8e3; padding: 8px 9px; border-radius: 7px; font-size: 12.5px; cursor: pointer;
}
.cv2-menu button:hover { background: rgba(255,255,255,.07); color: #fff; }

/* emojis */
.chat-input { position: relative; }
.cv2-emos {
  position: absolute; bottom: calc(100% + 6px); right: 4px; z-index: 60;
  background: linear-gradient(rgba(28,36,52,.99), rgba(13,18,28,.99));
  border: 1px solid #2a3d55; border-radius: 11px; padding: 6px;
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
}
.cv2-emos button { background: none; border: none; font-size: 18px; cursor: pointer; padding: 4px; border-radius: 6px; }
.cv2-emos button:hover { background: rgba(255,255,255,.09); }

/* alguém me mencionou */
#chat.cv2-ping { animation: cv2Ping 1.4s ease; }
@keyframes cv2Ping {
  0%, 100% { box-shadow: none; }
  25%, 75% { box-shadow: 0 0 0 2px rgba(255,217,100,.55), 0 0 22px rgba(255,217,100,.25); }
}

/* celular: avatar menor, mensagem com mais ar */
@media (max-width: 767px), (pointer: coarse) {
  .cv2-av, .cv2-av canvas { width: 24px; height: 24px; }
  .cv2-msg { padding: 7px; gap: 7px; }
  .cv2-txt { font-size: 13.5px; line-height: 1.55; }
  .cv2-ct { padding: 8px 12px; font-size: 12.5px; }
  .cv2-emos { grid-template-columns: repeat(6, 1fr); }
  .cv2-emos button { font-size: 22px; padding: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .cv2-msg { animation: none; }
  #chat.cv2-ping { animation: none; }
}

/* no toque: um pouco mais de respiro (alvo de dedo), sem voltar aos vãos antigos */
@media (max-width: 767px), (pointer: coarse) {
  .cv2-log { gap: 3px; padding: 6px 9px 8px; }
  .cv2-msg { padding: 5px 7px; }
  .cv2-linha { line-height: 1.6; font-size: 13.5px; }
}
/* contador de mensagem repetida (auto-caça manda a mesma linha várias vezes) */
.cv2-x {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  background: rgba(255,255,255,.09); border-radius: 99px;
  font-size: 10.5px; color: #9aa8bd; font-weight: 700;
}

/* ── coordenadas do jogador (era estilo inline no index.html) ─────────── */
#coords {
  position: fixed; bottom: 8px; left: 50%; transform: translateX(-50%);
  background: rgba(10, 16, 24, .75); border: 1px solid #2a3d55; border-radius: 6px;
  padding: 3px 10px; font: 12px monospace; color: #9fd; z-index: 30;
  pointer-events: none; /* nunca rouba clique de nada */
}
/* com o chat aberto no celular ele cobriria o campo de mensagem → some */
body.show-chat #coords { display: none; }

/* ── conversa privada: aba por pessoa, com × pra fechar ─────────────── */
.cv2-ct.cv2-pm { padding-right: 24px; }
.cv2-fech {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: 14px; line-height: 1; color: #6b7c92;
  padding: 2px 3px; border-radius: 4px; cursor: pointer;
}
.cv2-fech:hover { color: #ff8f8f; background: rgba(255,90,90,.14); }
.cv2-t-pmEu .cv2-nome { opacity: .85; }
.cv2-t-pmEu { background: rgba(77,157,255,.05); }

/* ── card do pokémon: clicável + popup de detalhe ───────────────────── */
.cv2-pk-clic { cursor: pointer; transition: border-color .15s, transform .12s; }
.cv2-pk-clic:hover { border-color: #c9a34e; transform: translateY(-1px); }
.cv2-pkov {
  position: fixed; inset: 0; z-index: 9600; background: rgba(4,7,12,.82);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: cv2In .16s ease;
}
.cv2-pkdet {
  position: relative; width: min(330px, 92vw); text-align: center; padding: 20px;
  background: linear-gradient(rgba(28,36,52,.99), rgba(13,18,28,.99));
  border: 1px solid #c9a34e66; border-radius: 15px;
}
.cv2-pkdet.cv2-pk-sh { border-color: #ffd70088; box-shadow: 0 0 28px rgba(255,215,0,.18); }
.cv2-pkx { position: absolute; top: 8px; right: 11px; background: none; border: none; color: #8b97a5; font-size: 23px; cursor: pointer; line-height: 1; }
.cv2-pkx:hover { color: #fff; }
.cv2-pksp canvas { image-rendering: pixelated; }
.cv2-pkt { font-size: 18px; font-weight: 700; color: #e8eef4; margin-top: 4px; }
.cv2-pkr { font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.cv2-dls { margin-top: 13px; text-align: left; }
.cv2-dl { display: flex; justify-content: space-between; padding: 6px 2px; border-bottom: 1px solid rgba(255,255,255,.055); font-size: 12.5px; }
.cv2-dl:last-child { border-bottom: none; }
.cv2-dl span { color: #8b97a5; }
.cv2-dl b { color: #dbe4ee; font-variant-numeric: tabular-nums; }
/* privado: minha fala e a do outro bem separadas */
.cv2-t-pmEu { background: rgba(108,182,255,.06); border-left: 2px solid rgba(108,182,255,.4); }
.cv2-t-pm   { background: rgba(255,143,199,.05); border-left: 2px solid rgba(255,143,199,.35); }

/* ── ✨ Painel de Bônus (bn-*) ─────────────────────────────────────────── */
.bn-tot { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 7px; margin: 4px 0 8px; }
.bn-t {
  background: rgba(20,30,45,.6); border: 1px solid #2a3d55; border-radius: 10px;
  padding: 9px 6px; text-align: center; cursor: pointer; transition: all .15s;
  display: flex; flex-direction: column; gap: 1px;
}
.bn-t:hover { border-color: var(--c); transform: translateY(-1px); }
.bn-t.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.bn-ti { font-size: 15px; }
.bn-tv { font-size: 16px; font-weight: 700; color: var(--c); font-variant-numeric: tabular-nums; }
.bn-tn { font-size: 10px; color: #8b97a5; }

.bn-f { background: rgba(16,23,34,.6); border: 1px solid #24344a; border-radius: 10px; padding: 10px 11px; margin-bottom: 7px; }
.bn-f.bn-off { opacity: .55; }
.bn-fh { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.bn-fi { font-size: 15px; }
.bn-fh b { font-size: 13px; color: #e8eef4; }
.bn-st { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; padding: 2px 6px; border-radius: 5px; background: rgba(74,222,128,.16); color: #4ade80; }
.bn-st.off { background: rgba(255,176,32,.16); color: #ffb020; }
.bn-tm { margin-left: auto; font-size: 11px; color: #8b97a5; font-variant-numeric: tabular-nums; }
.bn-vs { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 6px; }
.bn-v { font-size: 12px; }
.bn-v b { font-variant-numeric: tabular-nums; }
.bn-nada { font-size: 11.5px; color: #6b7c92; margin-top: 4px; }
.bn-nota { font-size: 11px; color: #8b97a5; margin-top: 5px; line-height: 1.45; }
.bn-nota b { color: #cfd8e3; }
.bn-vazio { text-align: center; padding: 20px 10px; color: #6b7c92; font-size: 20px; }
.bn-vazio span { display: block; font-size: 12.5px; margin-top: 3px; }
.pkhb-hint { font-size: 11px; color: #6b7c92; margin: 2px 0 8px; line-height: 1.45; }

/* celular: um bônus por linha, cards maiores */
@media (max-width: 560px), (pointer: coarse) {
  .bn-tot { grid-template-columns: repeat(2, 1fr); }
  .bn-t { padding: 12px 8px; }
  .bn-vs { flex-direction: column; gap: 4px; }
  .bn-v { font-size: 12.5px; }
}
/* ▲ totais de bônus na HUD (só o que os bônus realmente alteram) */
.pkh-up {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px;
  background: rgba(74,222,128,.13); border: 1px solid rgba(74,222,128,.3);
  border-radius: 99px; font-size: 10.5px; color: #7fe0a0; white-space: nowrap;
}
.pkh-up b { font-variant-numeric: tabular-nums; }
.pkh-buffs { flex-wrap: wrap; gap: 4px; }
/* 🟢 status buffado: número em verde (boost / shiny / força do clã) */
.pkh-cell b.buffado, .pkh-coin b.buffado {
  color: #4ade80 !important;
  text-shadow: 0 0 7px rgba(74,222,128,.35);
}
.pkh-cell b.buffado::after { content: ' ▲'; font-size: .72em; opacity: .8; }

/* ⚔️ PvP V2.3 — histórico de golpes e tela de resultado.
   Estende o visual do #duel-panel (mesmas cores/bordas/raios do jogo). */
.dp-log { margin-top: 9px; padding-top: 8px; border-top: 1px solid #273246;
  display: flex; flex-direction: column; gap: 3px; font-size: 11px; }
.dp-log > div, .dp-log { line-height: 1.5; }
.dp-log span { display: inline-block; min-width: 132px; }
.dp-log span.eu { color: #9fe28f; }
.dp-log span.foe { color: #e59a9a; }
.dp-log b { color: #fff; margin: 0 6px; font-variant-numeric: tabular-nums; }
.dp-log .ef { font-style: normal; font-size: 9px; padding: 1px 5px; border-radius: 4px; vertical-align: middle; }
.dp-log .ef.sup { background: rgba(255,217,100,.16); color: #ffd964; }
.dp-log .ef.fra { background: rgba(143,179,224,.14); color: #8fb3e0; }
.dp-log .ef.imu { background: rgba(144,153,165,.16); color: #9099a5; }
/* barra de HP com transição mais curta: acompanha o polling sem parecer travada */
.dp-hp > div { transition: width .35s cubic-bezier(.25,.8,.3,1); }

#duel-result {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%);
  z-index: 400; width: min(400px, 92vw); padding: 18px 20px 16px; text-align: center;
  animation: drIn .28s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes drIn { from { opacity: 0; transform: translate(-50%,-46%) scale(.94); } }
#duel-result.win  { border: 1px solid #4e9e5f; box-shadow: 0 10px 44px rgba(60,180,90,.30); }
#duel-result.loss { border: 1px solid #a04848; box-shadow: 0 10px 44px rgba(180,60,60,.28); }
#duel-result.draw { border: 1px solid #7a7f8c; box-shadow: 0 10px 44px rgba(0,0,0,.45); }
.dr-head { font-size: 25px; font-weight: 900; letter-spacing: 1px; margin-bottom: 2px; }
#duel-result.win  .dr-head { color: #7fe0a0; text-shadow: 0 0 18px rgba(90,220,140,.45); }
#duel-result.loss .dr-head { color: #ff8f8f; }
#duel-result.draw .dr-head { color: #cfd8e3; }
.dr-sub { font-size: 11px; color: #8b97a5; margin-bottom: 13px; }
.dr-grid, .dr-money { display: flex; flex-direction: column; gap: 5px; text-align: left; }
.dr-money { margin-top: 11px; padding-top: 10px; border-top: 1px solid #273246; }
.dr-row { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: #b9c4d2; gap: 10px; }
.dr-row b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.dr-row i { color: #8b97a5; font-style: normal; font-size: 10px; }
.dr-row.pos b { color: #7fe0a0; }
.dr-row.neg b { color: #ff8f8f; }
.dr-close { margin-top: 15px; width: 100%; padding: 9px; border-radius: 8px; cursor: pointer;
  background: #182231; border: 1px solid #2f3d54; color: #cfd8e3; font-weight: 700; letter-spacing: .5px; }
.dr-close:hover { background: #22304a; border-color: #4a5f80; color: #fff; }

/* ═══ FASE 2 — paginação da Box ═══════════════════════════════════════════════
   A Box voltou ao layout ANTIGO (.eq-slots/.eq-card/.eq-actions, que já existiam).
   Só a paginação é nova, e vive no rodapé do modal — nada mais de bxp-*. */
.bxp-rodape{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid rgba(55,71,92,.5)}
.bxp-info{font-size:11.5px;color:#8b97a5}
.bxp-navwrap{display:flex}
.bxp-nav{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.bxp-nav .btn{min-width:30px;border-radius:6px}
.bxp-gap{opacity:.4;pointer-events:none;border:none;background:transparent}
@media (max-width:599px){
  .bxp-rodape{flex-direction:column;gap:6px;padding-bottom:env(safe-area-inset-bottom)}
  .bxp-info{width:100%;text-align:center}
  .bxp-nav .btn{min-width:40px;min-height:40px}   /* alvo de toque confortável */
}
@media (prefers-reduced-motion:reduce){ .bxp-nav .btn{transition:none!important} }

/* ═══════════════ 🎒📦 EQUIPE & BOX v2 (reforma 30/07/2026) ═══════════════
   Novo layout do showTeamPaged (game-source): equipe no topo, detalhe à
   esquerda, Box 6×5 à direita — empilha no celular. O v1 (showTeam, com a
   flag BOX_PAGE desligada) continua usando .eq-slots/.eq-card/.eq-actions,
   por isso NENHUMA regra antiga foi removida; este bloco só ADICIONA bx2-*. */
#modal.bxp-modal { width: min(1120px, 96vw); }
.bx2 {
  --box-bg: #0e141e; --box-surface: #171f2e; --box-border: #2a3d55;
  --box-gold: #c9a34e; --box-blue: #3f8cff; --box-green: #42d67b;
  --box-red: #ef5350; --box-text: #e8eef4; --box-muted: #9fb0c4;
}
/* ── equipe (topo) */
.bx2-team { background: var(--box-bg); border: 1px solid var(--box-border); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.bx2-teamhd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.bx2-teamhd b { color: var(--box-gold); letter-spacing: .5px; }
.bx2-dica { font-size: 10.5px; color: var(--box-muted); }
.bx2-teamwrap { display: flex; align-items: center; gap: 6px; }
.bx2-tarr { display: none; width: 30px; height: 58px; border-radius: 8px; background: var(--box-surface); border: 1px solid var(--box-border); color: var(--box-text); font-size: 18px; cursor: pointer; flex: 0 0 auto; }
.bx2 .bx2-tslots { display: flex; gap: 10px; margin-bottom: 0; flex: 1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 8px 2px 2px; }
.bx2 .bx2-tslots::-webkit-scrollbar { display: none; }
.bx2 .bx2-tslot { width: 76px; height: 76px; flex: 0 0 auto; border-radius: 10px; background: var(--box-surface); }
.bx2 .bx2-tslot[class*="rar-"] { border-color: var(--rar); box-shadow: inset 0 0 8px rgba(0, 0, 0, .35); }
.bx2 .bx2-tslot.sel { border-color: var(--box-gold); box-shadow: 0 0 0 2px rgba(201, 163, 78, .35), inset 0 0 8px rgba(0, 0, 0, .35); }
.bx2 .bx2-tslot.empty { border-style: dashed; border-color: var(--box-border); opacity: .6; }
.bx2-vazio { font-size: 9.5px; color: var(--box-muted); text-align: center; line-height: 1.5; }
.bx2 .bx2-tslot .lv { bottom: 7px; }
.bx2-ativo { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: 10px; background: #2e2410; border: 1px solid var(--box-gold); color: #ffd964; border-radius: 8px; padding: 0 5px; line-height: 1.5; pointer-events: none; z-index: 1; }
.bx2-xpmini { position: absolute; left: 5px; right: 5px; bottom: 2px; height: 3px; border-radius: 2px; background: #0a0f17; overflow: hidden; pointer-events: none; }
.bx2-xpmini > div { height: 100%; background: linear-gradient(90deg, #6fc3ff, #2f6d9d); }
/* ── duas colunas (desktop) / empilhado (celular) */
.bx2-main { display: grid; grid-template-columns: 380px 1fr; gap: 12px; align-items: start; }
.bx2-detcol { min-width: 0; }
.bx2-boxcol { min-width: 0; background: var(--box-bg); border: 1px solid var(--box-border); border-radius: 12px; padding: 10px 12px; }
.bx2-semsel { border: 1px dashed var(--box-border); border-radius: 12px; padding: 28px 16px; text-align: center; color: var(--box-muted); font-size: 12.5px; }
/* ── detalhe (sprite um pouco menor que o card antigo pra caber na coluna) */
.bx2 .bx2-det { padding: 14px 12px 12px; }
.bx2 .bx2-det .eq-head > canvas, .bx2 .bx2-det .eq-head > img { width: 116px !important; height: 116px !important; }
.bx2-status { margin-top: 10px; font-size: 11.5px; color: var(--box-muted); background: rgba(63, 140, 255, .08); border: 1px solid rgba(63, 140, 255, .28); border-radius: 8px; padding: 6px 10px; line-height: 1.45; }
.bx2-status b { color: var(--box-text); }
.bx2-extras { margin-top: 8px; font-size: 11.5px; color: var(--box-muted); }
.bx2-extras b { color: #ffd964; }
.bx2-stats { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bx2-stat { background: rgba(10, 16, 26, .65); border: 1px solid var(--box-border); border-radius: 8px; padding: 6px 8px 7px; min-width: 0; }
.bx2-stat span { display: block; font-size: 9px; color: var(--box-muted); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx2-stat b { display: block; font-size: 14px; color: var(--box-text); margin: 1px 0 4px; }
.bx2-stbar { height: 4px; border-radius: 2px; background: #0a0f17; overflow: hidden; }
.bx2-stbar > div { height: 100%; border-radius: 2px; }
.bx2-mvbtn { width: 100%; margin-top: 10px; }
.bx2-moves { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.bx2-move { font-size: 10.5px; background: #274156; color: #9fd0ff; border-radius: 8px; padding: 2px 8px; }
.bx2-grptit { margin-top: 12px; font-size: 9.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--box-muted); }
.bx2 .bx2-grp { margin-top: 6px; }
.bx2-porque { margin-top: 8px; font-size: 11px; line-height: 1.45; color: #ffd0a8; background: rgba(255, 140, 26, .08); border: 1px solid rgba(255, 140, 26, .3); border-radius: 8px; padding: 6px 10px; }
/* botão PERIGOSO (vender) — vermelho, sempre com confirmação no JS */
.btn.bx2-danger { background: #3a1216; border-color: #8a2f3f; color: #ff9aa5; font-weight: bold; }
.btn.bx2-danger:hover:not(:disabled) { background: #55161d; border-color: var(--box-red); color: #ffc2c9; }
.btn.bx2-danger:disabled { opacity: .5; }
/* badges de raridade que faltavam (escala de 8 níveis) */
.badge.r-superrara { background: #12304d; color: #8ec4ff; }
.badge.r-superlendaria { background: #4d2c10; color: #ffc078; }
.badge.r-mistica { background: #4d1020; color: #ff8fa8; }
.badge.r-transcendente { background: #0e3d3a; color: #7df0e4; }
.badge.bx2-bmega { background: #33204d; color: #cfa8ff; }
/* ── box: cabeçalho + barra de busca/filtros */
.bx2-boxhd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.bx2-boxhd b { color: var(--box-gold); letter-spacing: .5px; }
.bx2-boxn { font-size: 11px; color: var(--box-muted); }
.bx2-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.bx2-busca { flex: 1 1 150px; min-width: 130px; background: rgba(10, 16, 26, .95); border: 1px solid var(--box-border); border-radius: 8px; color: var(--box-text); padding: 6px 10px; font-size: 12px; }
.bx2-busca:focus { outline: none; border-color: var(--box-gold); }
.bx2-sel { background: rgba(10, 16, 26, .95); color: var(--box-text); border: 1px solid var(--box-border); border-radius: 8px; padding: 5px 6px; font-size: 11.5px; }
.bx2-chip { background: rgba(10, 16, 26, .95); border: 1px solid var(--box-border); color: var(--box-muted); border-radius: 14px; padding: 4px 11px; font-size: 11px; cursor: pointer; }
.bx2-chip.on { border-color: var(--box-gold); color: #ffd964; background: rgba(201, 163, 78, .12); }
.bx2-vazia { padding: 28px 10px; text-align: center; }
.bx2-selprot { display: block; font-size: 10px; color: var(--box-muted); margin-top: 2px; }
/* ── grade 6×5 */
.bx2-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.bx2-cell { position: relative; aspect-ratio: 1; border-radius: 10px; cursor: pointer; background: var(--box-surface); border: 2px solid #273246; display: flex; align-items: center; justify-content: center; min-width: 0; }
.bx2-cell[class*="rar-"] { border-color: var(--rar); }
.bx2-cell.sel { box-shadow: 0 0 0 2px var(--box-gold); }
.bx2-cell .lv { position: absolute; bottom: 2px; right: 4px; font-size: 9px; color: #ffd964; }
.bx2-cell.picked { border-color: #56c878 !important; box-shadow: 0 0 0 2px rgba(86, 200, 120, .45) inset, 0 0 10px rgba(86, 200, 120, .35); }
.bx2-cell.picked::after { content: '✔'; position: absolute; top: 1px; left: 3px; font-size: 12px; font-weight: 900; color: #7fffa0; text-shadow: 0 0 3px #000; }
.bx2-cell.dimlock { opacity: .4; cursor: not-allowed; }
.bx2-mega { position: absolute; bottom: 2px; left: 3px; font-size: 8.5px; font-weight: 900; background: #33204d; color: #cfa8ff; border-radius: 5px; padding: 0 3px; pointer-events: none; }
/* ── responsivo: empilha as colunas, setas da equipe, grade 4 col no celular */
@media (max-width: 980px) {
  .bx2-main { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .bx2-tarr { display: block; }
  .bx2-grid { grid-template-columns: repeat(4, 1fr); }
  .bx2 .bx2-det .eq-head > canvas, .bx2 .bx2-det .eq-head > img { width: 96px !important; height: 96px !important; }
  .bx2-busca { flex: 1 1 100%; }
}

/* ═══════════════ 🧳 TOOLTIP DA MOCHILA (30/07/2026) ═══════════════
   Um único nó #inv-tip no <body> (portal) — position:fixed com coordenadas do
   viewport, então nunca é cortado pelo modal e fica acima de tudo. pointer-events
   desligado: o tooltip jamais rouba o mouse. */
#inv-tip {
  position: fixed; left: 0; top: 0; z-index: 9700;
  width: max-content; min-width: 200px; max-width: 280px;
  background: rgba(10, 16, 26, .97);
  border: 1px solid rgba(201, 163, 78, .55);
  border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .55);
  pointer-events: none;
  opacity: 0; transform: translateY(4px); visibility: hidden;
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
  font-size: 11.5px; line-height: 1.45; color: #c9d3dd;
}
#inv-tip.on { opacity: 1; transform: none; visibility: visible; }
#inv-tip .itt-hd { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
#inv-tip .itt-hd canvas, #inv-tip .itt-hd img { image-rendering: pixelated; flex: 0 0 auto; }
#inv-tip .itt-emoji { font-size: 26px; flex: 0 0 auto; }
#inv-tip .itt-nome { display: block; color: #ffd964; font-size: 13px; letter-spacing: .3px; }
#inv-tip .itt-cat { display: block; font-size: 10px; color: #8b97a5; text-transform: uppercase; letter-spacing: .6px; }
#inv-tip .itt-linha { display: flex; justify-content: space-between; gap: 14px; padding: 1px 0; }
#inv-tip .itt-linha span { color: #8b97a5; }
#inv-tip .itt-linha b { color: #e8eef4; }
#inv-tip .itt-desc { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(201, 163, 78, .18); color: #9fb0c4; }
#inv-tip .itt-nodesc { font-style: italic; opacity: .8; }
#inv-tip .itt-toque { margin-top: 6px; font-size: 10.5px; color: #ffd964; text-align: center; }
/* slots com tooltip: destaque suave no hover/foco + ícone levemente maior
   (transform não desloca a grade) + cursor de ajuda. Quantidades intactas. */
.inv-slot[data-tip] { cursor: help; transition: border-color .15s, background .15s, box-shadow .15s; }
.inv-slot[data-tip]:hover, .inv-slot[data-tip]:focus-visible {
  border-color: #c9a34e; background: #121b28;
  box-shadow: 0 0 8px rgba(201, 163, 78, .25);
  outline: none;
}
.inv-slot[data-tip] > canvas, .inv-slot[data-tip] > img, .inv-slot[data-tip] > span:first-child { transition: transform .15s; }
.inv-slot[data-tip]:hover > canvas, .inv-slot[data-tip]:hover > img { transform: scale(1.12); }
.inv-slot[data-tip] .qt { z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  #inv-tip, .inv-slot[data-tip], .inv-slot[data-tip] > canvas { transition: none !important; }
}

/* ═══════════════ 🧳 MOCHILA v2 (reforma visual 30/07/2026 — compacta) ═══════════════
   Resumo no topo (ícones = sprites REAIS do jogo) + um card escuro por categoria,
   slots uniformes e rodapé do loot. As classes antigas (.inv-grid/.inv-slot/.qt)
   seguem nos slots — é nelas que o tooltip e as ações se penduram. */
.bag2 { --bag-bg: #0e141e; --bag-surface: #171f2e; --bag-border: #2a3d55; --bag-gold: #c9a34e; }
.bag2-resumo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 8px; }
.bag2-tile {
  background: var(--bag-bg); border: 1px solid var(--bag-border); border-radius: 9px;
  padding: 5px 4px 4px; text-align: center; min-width: 0; min-height: 50px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.bag2-tile .ic { line-height: 0; }
.bag2-tile .ic canvas, .bag2-tile .ic img { image-rendering: pixelated; }
.bag2-tile b { display: block; color: #ffd964; font-size: 12.5px; line-height: 1.2; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bag2-tile .rot { display: block; font-size: 8.5px; color: #8b97a5; text-transform: uppercase; letter-spacing: .4px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bag2-card { background: var(--bag-bg); border: 1px solid var(--bag-border); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.bag2-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 7px; flex-wrap: wrap; }
.bag2-hd b { color: var(--bag-gold); font-size: 12px; letter-spacing: .4px; }
.bag2-hd span { font-size: 10px; color: #8b97a5; }
.bag2 .inv-grid { grid-template-columns: repeat(auto-fill, 46px); gap: 6px; }
.bag2 .inv-slot { width: 46px; height: 46px; border-radius: 8px; background: var(--bag-surface); border-color: #273246; }
.bag2 .inv-slot .qt { bottom: 1px; right: 3px; font-size: 9px; }
.bag2 .inv-slot.poke { border-color: var(--bag-gold); }
.bag2-ativo { display: flex; gap: 10px; align-items: center; }
.bag2-ativo .inv-slot { width: 52px; height: 52px; flex: 0 0 auto; }
.bag2-atinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bag2-atinfo b { color: #e8eef4; font-size: 13px; }
.bag2-atinfo .dim { font-size: 10.5px; }
.bag2-atinfo .bar { max-width: 230px; height: 7px; }
.bag2-dica { font-size: 9.5px; color: #66788c; }
.bag2-total {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 9px; flex-wrap: wrap;
  background: rgba(201, 163, 78, .08); border: 1px solid rgba(201, 163, 78, .3);
  border-radius: 9px; padding: 6px 10px;
}
.bag2-total > span:first-child { color: #c9d3dd; font-size: 11.5px; }
.bag2-total b { color: #ffd964; font-size: 14px; }
@media (max-width: 600px) {
  .bag2-resumo { grid-template-columns: repeat(3, 1fr); }
  .bag2 .inv-grid { grid-template-columns: repeat(auto-fill, 44px); gap: 5px; }
  .bag2 .inv-slot { width: 44px; height: 44px; }
}

/* ═══════════════ ⚔ ALERTA DE BOSS v2 (30/07/2026) ═══════════════
   Modal central renderizado direto no <body> (position:fixed, acima de HUD,
   chat e janelas) + indicador discreto #boss-ind quando o jogador fecha. */
#boss-modal {
  position: fixed; inset: 0; z-index: 9640; display: none;
  align-items: center; justify-content: center;
  background: rgba(4, 8, 14, .62); backdrop-filter: blur(2px);
  padding: 12px;
  padding-top: max(12px, env(safe-area-inset-top));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
#boss-modal.on { display: flex; }
#boss-modal .bm-box {
  width: min(400px, calc(100vw - 24px));
  max-height: calc(100vh - 24px); overflow-y: auto;
  background: linear-gradient(165deg, #131b28, #0b111a 65%);
  border: 1px solid #8a2f2f; border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(201, 163, 78, .22), 0 24px 70px rgba(0, 0, 0, .75);
  padding: 14px 18px 16px; text-align: center;
  animation: bm-in .18s cubic-bezier(.2, 1.1, .3, 1);
}
@keyframes bm-in { from { transform: scale(.94) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
#boss-modal .bm-hd { display: flex; justify-content: space-between; align-items: center; color: #ff9d9d; font-weight: bold; letter-spacing: 1.2px; font-size: 12.5px; margin-bottom: 6px; }
#boss-modal .bm-x { background: none; border: none; color: #8b97a5; font-size: 15px; cursor: pointer; padding: 2px 5px; }
#boss-modal .bm-x:hover { color: #fff; }
#boss-modal .bm-sprite { display: flex; justify-content: center; margin: 2px 0 6px; min-height: 96px; }
#boss-modal .bm-sprite canvas { image-rendering: pixelated; filter: drop-shadow(0 6px 14px rgba(224, 82, 82, .35)); }
#boss-modal .bm-nome { color: #ffd964; font-size: 19px; font-weight: bold; letter-spacing: .5px; }
#boss-modal .bm-txt { color: #c9d3dd; font-size: 12px; margin: 2px 0 10px; }
#boss-modal .bm-selo {
  display: inline-block; background: rgba(10, 16, 26, .9);
  border: 1px solid #2a3d55; border-radius: 20px; padding: 4px 14px;
  font-size: 12px; color: #c9d3dd; margin-bottom: 10px;
}
#boss-modal .bm-selo b { color: #ffd964; font-variant-numeric: tabular-nums; }
#boss-modal .bm-hptxt { font-size: 12px; color: #c9d3dd; margin-bottom: 5px; }
#boss-modal .bm-hptxt b { color: #ff9d9d; }
#boss-modal .bm-bar { height: 12px; border-radius: 6px; }
#boss-modal .bm-bar > div { background: linear-gradient(#e05252, #8a2f2f); box-shadow: 0 0 8px rgba(224, 82, 82, .45); transition: width .3s; }
#boss-modal .bm-sub { font-size: 10.5px; margin-top: 6px; min-height: 13px; }
#boss-modal .bm-acoes { display: flex; gap: 10px; margin-top: 12px; }
#boss-modal .bm-fechar { flex: 1; background: #141c28; }
#boss-modal .bm-entrar { flex: 1.6; font-weight: bold; min-height: 40px; }
#boss-modal .bm-entrar:disabled { opacity: .6; }
/* indicador discreto no topo depois de fechar — clique reabre */
#boss-ind {
  position: fixed; top: calc(58px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
  z-index: 56; display: none;
  background: rgba(10, 16, 26, .92); border: 1px solid #8a2f2f;
  color: #ff9d9d; font-weight: bold; font-size: 12px; letter-spacing: .4px;
  border-radius: 20px; padding: 5px 14px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5); font-variant-numeric: tabular-nums;
  max-width: 88vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#boss-ind.on { display: block; }
#boss-ind:hover { border-color: #e05252; color: #ffc2c2; }
@media (max-width: 480px) {
  #boss-modal .bm-acoes { flex-direction: column-reverse; }
  #boss-modal .bm-entrar { min-height: 46px; }
  #boss-modal .bm-fechar { min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  #boss-modal .bm-box { animation: none; }
}

/* 🏆 placar de dano do Boss (visível enquanto você está NA luta) + ranking no modal */
#boss-rank {
  position: fixed; top: calc(58px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
  z-index: 56; display: none; min-width: 230px; max-width: min(320px, 90vw);
  background: rgba(10, 16, 26, .93); border: 1px solid #8a2f2f; border-radius: 12px;
  padding: 8px 12px 7px; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
  font-variant-numeric: tabular-nums;
}
#boss-rank.on { display: block; }
#boss-rank:hover { border-color: #e05252; }
#boss-rank .br-hd { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 5px; }
#boss-rank .br-hd span { color: #ff9d9d; font-weight: bold; font-size: 12px; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#boss-rank .br-hd b { color: #ffd964; font-size: 12px; }
#boss-rank .br-bar { height: 5px; border-radius: 3px; background: #0a0f17; overflow: hidden; margin-bottom: 6px; }
#boss-rank .br-bar > div { height: 100%; background: linear-gradient(90deg, #e05252, #8a2f2f); transition: width .3s; }
#boss-rank .br-linha { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: #c9d3dd; padding: 1px 0; }
#boss-rank .br-linha span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#boss-rank .br-linha b { color: #e8eef4; }
#boss-rank .br-linha.eu span, #boss-rank .br-linha.eu b { color: #ffd964; }
#boss-rank .br-n { margin-top: 4px; font-size: 9.5px; color: #66788c; text-align: center; }
/* ranking dentro do modal do boss */
#boss-modal .bm-rank { margin-top: 8px; text-align: left; max-height: 168px; overflow-y: auto; }
#boss-modal .bm-rank:empty { display: none; }
#boss-modal .bm-rank .br-linha { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; color: #c9d3dd; padding: 2px 4px; border-radius: 5px; }
#boss-modal .bm-rank .br-linha:nth-child(odd) { background: rgba(255, 255, 255, .03); }
#boss-modal .bm-rank .br-linha b { color: #e8eef4; }
#boss-modal .bm-rank .br-linha.eu { background: rgba(201, 163, 78, .1); }
#boss-modal .bm-rank .br-linha.eu span, #boss-modal .bm-rank .br-linha.eu b { color: #ffd964; }

/* 🌙 standby do Modo Ausente (modal vivo: tempo + rendimento) */
.afkst-selo {
  display: inline-block; background: rgba(10, 16, 26, .9); border: 1px solid #2a3d55;
  border-radius: 20px; padding: 4px 14px; font-size: 12px; color: #c9d3dd; margin-bottom: 10px;
}
.afkst-selo b { color: #ffd964; font-variant-numeric: tabular-nums; }
.afkst-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.afkst-tile {
  background: #0e141e; border: 1px solid #2a3d55; border-radius: 10px;
  padding: 8px 4px 7px; text-align: center; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.afkst-tile .ic { font-size: 15px; }
.afkst-tile b { color: #ffd964; font-size: 14px; font-variant-numeric: tabular-nums; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.afkst-tile .rot { font-size: 9px; color: #8b97a5; text-transform: uppercase; letter-spacing: .4px; }
@media (max-width: 480px) { .afkst-grid { grid-template-columns: repeat(2, 1fr); } }

/* 🕹️ joystick virtual do celular (31/07/2026): base nasce onde o dedo pousa */
#joy {
  position: fixed; z-index: 54; width: 124px; height: 124px;
  margin: -62px 0 0 -62px; border-radius: 50%;
  background: radial-gradient(circle, rgba(23, 31, 46, .42), rgba(10, 16, 26, .6));
  border: 2px solid rgba(201, 163, 78, .45);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35), inset 0 0 18px rgba(0, 0, 0, .35);
  display: none; pointer-events: none; touch-action: none;
}
#joy.on { display: block; animation: joy-in .1s ease; }
@keyframes joy-in { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
#joy-thumb {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px;
  margin: -27px 0 0 -27px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2f4260, #131c2a 75%);
  border: 2px solid #c9a34e;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .55), inset 0 1px 3px rgba(255, 255, 255, .12);
}

/* ═══════════════ 🏆 TORNEIO PvP (Fase 1, 31/07/2026) ═══════════════
   UI dormente: nada disto aparece sem ESTADO.tournament (flag no servidor). */
.tn-tb.tn-aberto { box-shadow: 0 0 0 1px #c9a34e, 0 0 10px rgba(255, 205, 72, .55); animation: tnPulse 1.6s ease-in-out infinite; }
@keyframes tnPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
.tn-head { text-align: center; margin-bottom: 8px; }
.tn-status { font-size: 14px; }
.tn-relogio { margin-top: 4px; font-size: 13px; color: #ffd964; }
.tn-acoes { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 8px 0 12px; }
.tn-tag { font-size: 11px; color: #c9a34e; border: 1px solid #4a4436; border-radius: 8px; padding: 3px 8px; }
.tn-campeao { text-align: center; padding: 12px; margin: 6px auto 10px; max-width: 340px; border: 1px solid #c9a34e; border-radius: 12px; background: linear-gradient(180deg, rgba(255, 205, 72, .12), rgba(0, 0, 0, .15)); }
.tn-campeao img { image-rendering: pixelated; }
.tn-campeao-t { font-size: 15px; font-weight: 800; color: #ffd964; letter-spacing: 1px; }
.tn-campeao-n { font-size: 18px; font-weight: 800; }
/* ── chaveamento (desktop: colunas dos dois lados + final no centro) ── */
/* flex-start + margens auto: centraliza quando cabe e ROLA quando não cabe
   (justify-content:center + overflow CORTAVA as colunas das pontas — era o
   "sumiu as oitavas" do bracket de 16) */
.tn-bracket { position: relative; display: flex; gap: 12px; align-items: center; justify-content: flex-start; overflow-x: auto; padding: 10px 4px 14px; scrollbar-width: thin; }
.tn-bracket .tn-col:first-child { margin-left: auto; }
.tn-bracket .tn-col:last-child { margin-right: auto; }
/* chave LOTADA (16+ jogadores = 7 colunas): cards compactos */
.tn-bracket.tn-lotado { gap: 8px; }
.tn-bracket.tn-lotado .tn-col { min-width: 118px; gap: 8px; }
.tn-bracket.tn-lotado .tn-match { min-width: 118px; padding: 4px; }
.tn-bracket.tn-lotado .tn-card .tn-nm { font-size: 10.5px; }
.tn-bracket.tn-lotado .tn-card .tn-av { width: 20px; height: 20px; }
.tn-bracket.tn-lotado .tn-card .tn-lv { display: none; }
.tn-bracket.tn-lotado .tn-match-st { font-size: 9px; }
.tn-svg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.tn-col { display: flex; flex-direction: column; gap: 14px; justify-content: center; z-index: 1; min-width: 148px; }
.tn-col-t { text-align: center; font-size: 11px; font-weight: 700; color: #c9a34e; text-transform: uppercase; letter-spacing: .5px; }
.tn-col-final .tn-col-t { font-size: 13px; color: #ffd964; }
.tn-trofeu { display: block; margin: 0 auto 4px; image-rendering: pixelated; }
.tn-match { background: rgba(20, 22, 30, .92); border: 1px solid #3a3f52; border-radius: 10px; padding: 6px; min-width: 148px; }
.tn-match-st { font-size: 10px; text-align: center; color: #9aa3b5; margin-bottom: 4px; }
.tn-vs { text-align: center; font-size: 10px; font-weight: 800; color: #6c7488; margin: 2px 0; }
.tn-card { display: flex; align-items: center; gap: 6px; padding: 3px 5px; border-radius: 7px; }
.tn-card .tn-av { width: 26px; height: 26px; flex: none; }
.tn-card .tn-nm { flex: 1; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-card .tn-lv { font-size: 10px; color: #9aa3b5; }
.tn-card.tn-venceu { background: rgba(126, 217, 87, .12); box-shadow: inset 0 0 0 1px rgba(126, 217, 87, .35); }
.tn-card.tn-elim { opacity: .45; }
.tn-card.tn-vazio { justify-content: center; font-size: 11px; }
/* ── celular: uma rodada por vez ── */
.tn-abas { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.tn-rodada-solo { display: flex; flex-direction: column; gap: 10px; }
.tn-hist { margin-top: 12px; border-top: 1px solid #2c3040; padding-top: 8px; }
.tn-hist-row { font-size: 12px; padding: 2px 0; }
@media (max-width: 700px) {
  .tn-match { min-width: 0; }
  .tn-col { min-width: 120px; }
}

/* ── 🏆 painel ADM do torneio (redesign 31/07) ── */
.tnadm-fluxo { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 6px 0 12px; }
.tnadm-passo { font-size: 11px; padding: 4px 10px; border-radius: 14px; border: 1px solid #3a3f52; color: #8a93a8; background: rgba(20, 22, 30, .6); }
.tnadm-passo.on { border-color: #c9a34e; color: #ffd964; background: rgba(255, 205, 72, .12); font-weight: 700; }
.tnadm-passo.feito { color: #7ed957; border-color: #3d5c3a; }
.tnadm-seta { color: #4a5065; font-size: 12px; }
.tnadm-principal { display: block; width: 100%; margin: 4px 0 10px; padding: 12px; font-size: 14px; font-weight: 800; border-radius: 10px; cursor: pointer; border: 1px solid #c9a34e; color: #1a1206; background: linear-gradient(180deg, #ffd964, #d9a83e); }
.tnadm-principal:hover { filter: brightness(1.08); }
.tnadm-mesa { border: 1px solid #3a3f52; border-radius: 10px; padding: 10px; font-size: 13px; line-height: 2; background: rgba(20, 22, 30, .7); margin-bottom: 8px; }
.tnadm-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.tnadm-perigo { border-color: #7a3a3a !important; color: #ff9d9d !important; }
.tnadm-cfg { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; margin-bottom: 6px; }
.tnadm-cfg label { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: #9aa3b5; }
.tnadm-cfg input[type="number"], .tnadm-cfg input:not([type]) { width: 92px; background: #0d141d; color: #fff; border: 1px solid #37475c; border-radius: 6px; padding: 6px 8px; font-size: 12px; }
.tnadm-cfg input[type="checkbox"] { width: 18px; height: 18px; margin: 6px 0; }

/* 🙈 olhinho do código de recuperação / e-mail (nascem escondidos) */
.prof-olho {
  background: none; border: 1px solid #2a3d55; border-radius: 6px;
  color: #aeb9c6; cursor: pointer; font-size: 12px; line-height: 1;
  padding: 2px 5px; vertical-align: middle; margin-left: 4px;
}
.prof-olho:hover { background: rgba(255, 255, 255, .06); border-color: #3f5875; }
.prof-seg { user-select: all; }

/* ⚾ bola que não pontua contra o alvo atual (0 ponto, gasta à toa) */
.cp-ball.cp-b-nao { opacity: .35; filter: grayscale(1); }
.cp-ball.cp-b-nao:hover { opacity: .6; }
/* ⚾ bola de tipo que CASA com o alvo — a melhor escolha */
.cp-ball.cp-b-otima { box-shadow: 0 0 0 1px #e0be4a, 0 0 8px rgba(224,190,74,.55); }

/* 🛡️ o bônus do clã só vale no tipo do clã — a tela dizia que era sempre */
.cc-cond { font-size: 10px; color: #8b97a6; margin-top: 2px; letter-spacing: .2px; }

/* 🛡️ botão com algo grátis esperando o jogador (ex.: 1º clã) */
.btn.btn-destaque {
  border-color: #e0be4a; color: #ffd964;
  box-shadow: 0 0 0 1px rgba(224,190,74,.35), 0 0 10px rgba(224,190,74,.25);
}

/* 🧬 selos de NATUREZA no card de detalhe */
.badge.nat{background:linear-gradient(180deg,#2b1f4a,#1d1533);border:1px solid #6b4fd1;color:#cbb6ff}
.badge.nat-neutra{background:linear-gradient(180deg,#2a2f3a,#1b1f28);border-color:#5b6474;color:#aeb7c6}
.badge.nat-vazia{background:linear-gradient(180deg,#3a2a12,#241a0b);border:1px dashed #b98330;color:#ffcd80}

/* 🧬 NATUREZA no painel de atributos: sobe um, desce outro.
   Roxo (e não o verde do .buffado) de propósito — buff global e natureza são
   coisas diferentes e o jogador precisa distinguir de relance. */
.pkh-cell b.nat-up { color: #c9a7ff; }
.pkh-cell b.nat-up::after { content: ' \25B2'; font-size: .72em; opacity: .85; }
.pkh-cell b.nat-down { color: #ff8b8b; }
.pkh-cell b.nat-down::after { content: ' \25BC'; font-size: .72em; opacity: .85; }
/* natureza vence o verde do buff global no MESMO atributo (a seta dupla
   confundiria; o tooltip continua listando os dois motivos) */
.pkh-cell b.buffado.nat-down::after { content: ' \25BC'; }

/* 🧬 selo de natureza na célula da troca (a tela anti-golpe) */
.tc-badge.nat { background: #2b1f4a; border: 1px solid #6b4fd1; color: #cbb6ff; }
/* linha da natureza no card do chat linkado */
.cv2-dl { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 12.5px; }
.cv2-dl span { color: #8b97a5; }