/* Acabamento da HUD (carregado depois de styles.css e theme.css): ícones em pixel art do pacote (icons.js), topo que cabe em
   qualquer largura (rótulos viram só ícone e, no celular, o topo quebra em linhas), dock da cidade sem nomes cortados,
   painéis flutuantes que não se tapam e janelas que cabem na tela. Breakpoints: 2100 · 1720 · 1600 · 1440 · 1240 · 980 · 760 · 480. */

/* ---------- ícones ---------- */
.ui-ico { width: 18px; height: 18px; object-fit: contain; image-rendering: pixelated; vertical-align: -4px; flex: none; }
.ui-ico.medal { width: 22px; height: 22px; vertical-align: middle; }
.btn .ui-ico { margin-right: 6px; }
/* ícone de linha (ico()): acompanha o texto — logs, botões, títulos (substitui os emojis) */
.ui-ico.in, .btn .ui-ico.in { width: 1.25em; height: 1.25em; vertical-align: -.28em; margin: 0 .12em 0 0; }
html, body { max-width: 100%; overflow-x: hidden; }

/* ---------- topo ---------- */
.topbar { min-width: 0; }
.topbar-actions { min-width: 0; }
.tb-btns { flex: none; align-items: center; }
.tb-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; white-space: nowrap; position: relative; height: 36px; }
.tb-btn .ui-ico { width: 20px; height: 20px; margin: 0; }
.tb-btn .bag-ico { width: 22px; height: 22px; margin: 0; }
/* Votar (vote-ui.js): bolinha de aviso quando o personagem já pode votar de novo — igual à da live no botão Streamers */
#btn-vote.ready::after { content: ''; position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--rar-mitico); box-shadow: 0 0 6px var(--rar-mitico); }
/* sprites do pacote (tools/pack-ui-icons.mjs): quadro 24×24, mostrado em escala inteira (nítido, sem pixel esticado) */
.tb-btn .pk-ico, .tb-icon .pk-ico { width: 24px; height: 24px; margin: -2px 0; }
.tb-count { margin-left: 0 !important; font-size: var(--fs-min); }
.tb-sound.is-off .ui-ico { opacity: .35; filter: grayscale(1); }
.tb-sound.is-off::after { content: ''; position: absolute; left: 9px; right: 9px; top: 50%; height: 2px; background: var(--danger, var(--rar-mitico)); transform: rotate(-35deg); border-radius: 2px; }
.tb-icon .ui-ico { width: 20px; height: 20px; margin: 0; }
.wallet { white-space: nowrap; }
.trainer-avatar span { line-height: 1; }

/* rótulos dos menus secundários somem primeiro (fica o ícone; o nome aparece no title) */
@media (max-width: 2100px) {
  .tb-sec { width: 36px; padding: 0; justify-content: center; }
  .tb-sec .tb-lbl { display: none; }
  .tb-sec .tb-count { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: var(--fs-min); font-weight: 700; line-height: 16px; text-align: center; }
  .tb-sec .tb-count:empty, .tb-sec .tb-count.zero { display: none; }
}
/* nomes em todos os menus quando cabem (app.js → fitTopbar liga .tb-fit-all; senão valem as regras de largura acima/abaixo) */
.tb-btns.tb-fit-all .tb-btn:not(.tb-sound) { width: auto; padding: 7px 11px; justify-content: flex-start; }
.tb-btns.tb-fit-all .tb-btn .tb-lbl { display: inline; }
/* apertado: botões mais justos e sem o contador da Pokédex (fica no title) */
.tb-btns.tb-fit-all.tb-fit-tight { gap: 4px; }
.tb-btns.tb-fit-all.tb-fit-tight .tb-btn:not(.tb-sound) { padding: 7px 8px; gap: 5px; font-size: 12px; }
.tb-btns.tb-fit-all.tb-fit-tight #dex-count { display: none; }
/* não cabem todos: nomes só nos menus principais (sem .tb-sec: Mochila, Pokédex, Loja, Ranking); os outros ficam no ícone */
.tb-btns.tb-fit-main .tb-btn:not(.tb-sec):not(.tb-sound) { width: auto; padding: 7px 8px; gap: 5px; font-size: 12px; justify-content: flex-start; }
.tb-btns.tb-fit-main .tb-btn:not(.tb-sec) .tb-lbl { display: inline; }
.tb-btns.tb-fit-main #dex-count { display: none; }
@media (max-width: 1720px) {
  .tb-btn { width: 36px; padding: 0; justify-content: center; }
  .tb-btn .tb-lbl { display: none; }
  #dex-count { display: none; }
}
@media (max-width: 1440px) {
  .brand-text { display: none; }
  .topbar { gap: 10px; padding: 0 12px; }
  .topbar-actions { gap: 6px; }
  .tb-btns { gap: 4px; }
  .trainer-info { width: 96px; }
}
@media (max-width: 1240px) {
  .mode-btn { padding: 6px 10px; }
  .wallet { font-size: 13px; padding: 2px 8px; }
}
@media (max-width: 1100px) {
  .trainer-info { display: none; }
  .wallet img { width: 18px; height: 18px; }
  .diamond-wallet.pill i.gem { width: 18px; height: 18px; background-image: url(../../assets/ui/icons/diamond-18.png); background-size: 18px 18px; }
}
/* tablet e celular: o topo quebra em linhas — 1ª: logo + modos + treinador + tema · 2ª: carteira + menus */
@media (max-width: 980px) {
  .topbar { height: auto; flex-wrap: wrap; padding: 6px 10px; row-gap: 6px; }
  .topbar-actions { flex: 1 1 0; flex-wrap: wrap; row-gap: 6px; overflow: visible; width: auto; padding: 0; }
  .topbar-actions > * { flex: 0 0 auto; }
  .tb-spacer { display: none; }
  .mode-seg { order: 1; margin-left: 0; }
  .theme-wrap { order: 3; }
  .wallet { order: 4; }
  .tb-btns { order: 5; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; }
  .trainer-info { display: flex; width: 92px; }
  .topbar-actions .btn.tb-btn { padding: 0; }
}
@media (max-width: 760px) {
  .brand-gem { width: 14px; height: 14px; }
  .tb-btns { flex-basis: 100%; justify-content: space-between; }
  .tb-btns { gap: 3px; }
  .tb-btn { width: auto; flex: 1 1 0; min-width: 0; max-width: 48px; height: 34px; }
  .mode-seg { padding: 3px; }
  .mode-btn { padding: 5px 9px; font-size: 12px; }
}
@media (max-width: 480px) {
  .mode-long { display: none; }
  .trainer-info { display: none; }
  .wallet { flex: 1 1 0 !important; justify-content: center; }
  .topbar { padding: 6px 8px; }
}

/* ---------- cidade ---------- */
/* dock: os blocos encolhem juntos e quebram o nome em até 2 linhas em vez de cortar */
.dock { left: 16px; right: 16px; transform: none; justify-content: center; pointer-events: none; max-width: none; }
.dock-tile { pointer-events: auto; }
.dock-tile { flex: 0 1 112px; min-width: 0; width: auto; }
.dock-tile b { white-space: normal; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; }
.dock-tile small { white-space: normal; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dock { align-items: stretch; }
.dock-tile { height: auto !important; min-height: 60px; }
@media (min-width: 1501px) { .dock-tile { min-height: 84px; } }
.dock-tile { grid-template-rows: auto auto 1fr; overflow: hidden; }
@media (max-width: 1500px) { .dock-tile { flex-basis: 92px; width: auto; } }
@media (max-width: 1240px) { .dock-tile { flex-basis: 64px; width: auto; } }
/* nome do Pokémon do time sem corte: o nível vai para baixo do nome */
.tt-name { flex-wrap: wrap; row-gap: 0; }
.tt-name b { flex: 1 1 auto; min-width: 0; }
/* painel do NPC e guia: o guia flutua à esquerda do painel (antes tapava o depósito) */
body[data-view="town"] .guide-card:not(.in-flow) { right: 392px; bottom: 128px; }
@media (max-width: 1500px) { body[data-view="town"] .guide-card:not(.in-flow) { right: 352px; } }
.guide-card.in-flow { position: static; width: auto; box-shadow: none; z-index: auto; margin: 0; flex: none; }
.guide-card.in-flow.min { align-self: flex-start; }
.guide-card.in-flow .guide-pill { box-shadow: none; }
.guide-head b, .guide-rw { display: inline-flex; align-items: center; gap: 6px; }
.guide-pill { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- caçada ---------- */
.arena-tools .btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.arena-tools .btn .ui-ico, .btn-giveup .ui-ico { margin: 0; }
.btn-giveup { display: inline-flex; align-items: center; gap: 6px; }
.btn-giveup .ui-ico { width: 18px; height: 18px; }
.arena-controls { min-width: 0; }
.arena-controls .check.switch { white-space: nowrap; }
.arena-tools { min-width: 0; flex-wrap: nowrap; }
/* barra de ações: rótulos das ferramentas viram ícones quando aperta */
@media (max-width: 1700px) { .hunt-layout .arena-tools .at-lbl { display: none; } .arena-tools .btn { padding: 8px 9px; } }
@media (max-width: 1240px) { .hunt-layout .arena-tools .at-lbl { display: inline; } }
@media (max-width: 900px) { .hunt-layout .arena-tools .at-lbl { display: none; } }
@media (max-width: 760px) {
  .arena-controls { height: auto; flex-wrap: wrap; padding: 6px; row-gap: 6px; }
  .btn-run { width: auto; min-width: 0; flex: 1 1 140px; }
  .arena-tools { width: 100%; justify-content: space-between; }
  .arena-tools .btn { flex: 1 1 0; justify-content: center; }
  .tb-spacer { display: none; }
}
/* nomes dos golpes inteiros (quebram em 2 linhas se precisar) */
.move-list .mv-row b { white-space: normal; overflow: visible; text-overflow: clip; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; line-height: 1.2; min-width: 0; }
.move-list .mv-row .type { flex: none; }

/* ---------- janelas ---------- */
.modal-backdrop .modal { max-width: min(100%, var(--modal-max, 100%)); }
@media (max-width: 760px) {
  .modal-backdrop { padding: 6px; align-items: flex-start; }
  .modal-backdrop .modal { width: 100%; max-height: calc(100dvh - 12px); overflow-y: auto; }
}

/* ranking / raid / away com ícones */
.rk-pos { display: grid; place-items: center; }
.svc-tab .ui-ico { margin-right: 4px; }
@media (max-width: 1240px) {
  .dock-tile { padding: 6px; }
  .dock-tile small { display: none; }
  .dock-tile b { display: -webkit-box; font-size: var(--fs-min); }
  body[data-view="town"] .guide-card:not(.in-flow):not(.min) { width: 260px; }
}

/* ---------- cidade no tablet / celular: tudo empilhado (mapa → serviços → painel do NPC → chat), nada flutuando por cima ---------- */
@media (max-width: 980px) {
  .brand { align-self: flex-start; margin-top: 8px; }
  .town-stage { height: auto; overflow: visible; display: flex; flex-direction: column; gap: 8px; padding: 8px; }
  .town-wrap { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 15 / 11; max-height: 62vh; border-radius: 14px; overflow: hidden; border: 1px solid var(--edge-3, var(--edge-t)); flex: none; }
  .town-plate { top: 20px; font-size: 12px; padding: 4px 12px; }
  .dock { position: static; order: 2; transform: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; pointer-events: auto; left: auto; right: auto; bottom: auto; }
  .dock-tile { min-height: 58px; }
  .dock-tile:hover { transform: none; }
  .town-side { position: static; order: 3; width: auto; max-height: none; inset: auto; overflow: visible; }
      body[data-view="town"] .guide-card:not(.in-flow) { right: 12px; left: auto; bottom: 12px; width: min(300px, calc(100% - 24px)); }
}
@media (max-width: 480px) {
  .dock { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .town-wrap { aspect-ratio: 1 / 1; }
}
@media (max-width: 980px) { .town-stage > .guide-card.in-flow { order: 3; } .town-side { order: 4; }  }
.boss-entry { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.boss-tokens { display: inline-flex; gap: 10px; margin-right: 6px; vertical-align: middle; }
.boss-tokens > span { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: var(--text-t); }
.boss-reward-ico .ui-ico { width: 22px; height: 22px; }
.rk-prize { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; white-space: nowrap; }
.rd-name { display: flex; align-items: center; gap: 6px; }
.dex-ms-btn { display: inline-flex; align-items: center; }
/* Pokédex: tabela de golpes rola dentro do painel no celular */
.dex-detail { min-width: 0; }
.dex-moves { display: block; max-width: 100%; overflow-x: auto; }

/* ---------- camadas: guia abaixo do topo e das janelas; janelas acima do topo fixo ---------- */
.guide-card { z-index: 20; }
.modal-backdrop { z-index: 45; }

/* ---------- mapa global no celular: continentes em 2 colunas, ferramentas numa linha ---------- */
@media (max-width: 760px) {
  .wm-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .wm-tab { min-width: 0; padding: 6px 8px; border-radius: 14px; }
  .wm-tab > img { width: 26px; height: 26px; }
  .wm-tab b { font-size: 13px; }
  .wm-tab small { white-space: normal; line-height: 1.2; font-size: var(--fs-min); }
  .wm-trainer { grid-column: 1 / -1; }
  .wm-tools { flex-wrap: wrap; gap: 6px; }
  .wm-tools input[type="search"], .wm-tools input:not([type]) { flex: 1 1 100%; }
  .wm-types { gap: 4px; }
  .wm-type { padding: 3px 7px; font-size: var(--fs-min); }
}
.wm-tab small .ui-ico { width: 12px; height: 12px; border: 0; border-radius: 0; vertical-align: -1px; }

/* ---------- caçada em telas médias/pequenas: o mapa cabe na tela com a barra de ações visível logo abaixo ---------- */
@media (max-width: 1240px) { .hunt-center .arena-wrap { aspect-ratio: auto; height: min(calc(100vw - 32px), calc(100vh - 150px)); min-height: 300px; } }
@media (max-width: 980px) { .hunt-center .arena-wrap { height: min(calc(100vw - 32px), calc(100vh - 210px)); } }
@media (max-width: 760px) { .hunt-center .arena-wrap { height: min(calc(100vw - 16px), calc(100svh - 250px)); min-height: 260px; } }
.nv-k { display: inline-flex; align-items: center; gap: 5px; }
.nv-k .ui-ico { width: 16px; height: 16px; }
.nv-head > b { display: inline-flex; align-items: center; gap: 6px; }
/* as 3 medalhas do pacote são parecidas: brilho dourado / prateado / bronze para diferenciar */
.ui-ico.medal.m1 { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--type-ground) 95%, transparent)); }
.ui-ico.medal.m2 { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--x-c7cee0) 95%, transparent)); }
.ui-ico.medal.m3 { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--x-c98b52) 95%, transparent)); }

/* ---------- Hunt Analyser no Mapa global (worldmap-ui.js → analyserHtml) ---------- */
.wm-an { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 8px; }
.wm-an-col { background: var(--card-t); border: 1px solid var(--edge-t); border-radius: 12px; padding: 10px 12px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wm-an h5 { margin: 4px 0 0; font-size: var(--fs-min); letter-spacing: 1px; text-transform: uppercase; color: var(--muted-t); border-top: 1px solid var(--edge-t); padding-top: 8px; }
.wm-an-col > h5:first-child, .wm-an-head + h5 { border-top: 0; padding-top: 0; }
.wm-an-head { display: flex; gap: 10px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--edge-t); }
.wm-an-head canvas { width: 56px; height: 56px; image-rendering: pixelated; border-radius: 50%; background: var(--inset); border: 2px solid var(--edge-2); flex: none; }
.wm-an-head > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wm-an-head b { font-family: var(--display); font-size: 16px; font-weight: normal; }
.wm-an-rows { display: flex; flex-direction: column; gap: 4px; }
.wm-an-rows > div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.wm-an-rows span { color: var(--text-2); }
.wm-an-rows b { font-variant-numeric: tabular-nums; color: var(--text-t); }
.wm-an-rows b.gold { color: var(--gold-text, var(--type-ground)); }
.wm-an-rows b.neg { color: var(--danger, var(--rar-mitico)); }
.wm-an-rows p { margin: 2px 0 0; line-height: 1.35; }
.wm-an-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.wm-an-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--inset); border: 1px solid var(--edge-t); border-radius: 8px; padding: 2px 6px 2px 2px; }
.wm-an-chip .type { margin: 0; font-size: var(--fs-min); }
.wm-an-chip b { font-size: var(--fs-min); font-variant-numeric: tabular-nums; }
.wm-an-chip b.up { color: var(--x-6fdc7c); } .wm-an-chip b.down { color: var(--x-ff8a80); }
.wm-an-drops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.wm-an-drops li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; background: var(--inset); border-radius: 8px; padding: 3px 8px 3px 4px; font-size: 12px; }
.wm-an-drops li > i { width: 22px; height: 22px; }
.wm-an-drops li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-an-drops li b { color: var(--gold-text, var(--type-ground)); font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .wm-an { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .wm-an-col:first-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .wm-an { grid-template-columns: minmax(0, 1fr); } }
.wm-an-rows.dim > div { opacity: .5; }

/* ---------- Despertar (awaken-ui.js, aba da Forja) ---------- */
.aw { display: flex; flex-direction: column; gap: 10px; }
.aw-card { display: flex; gap: 16px; align-items: center; background: var(--card-t); border: 1px solid var(--edge-2); border-radius: 14px; padding: 12px 14px; flex-wrap: wrap; }
.aw-card .svc-big { width: 96px; height: 96px; image-rendering: pixelated; background: var(--inset); border-radius: 12px; }
.aw-main { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.aw-name { font-family: var(--display); font-weight: normal; font-size: 17px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aw-badge { font-family: var(--font); font-size: var(--fs-min); padding: 2px 8px; border-radius: 999px; background: linear-gradient(90deg, var(--x-8a5cf6), var(--type-ground)); color: var(--c-panel); font-weight: 700; }
.aw-track { position: relative; height: 16px; border-radius: 999px; background: var(--inset); overflow: hidden; }
.aw-track i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--x-8a5cf6), var(--type-ground)); }
.aw-track b { position: relative; display: block; text-align: center; font-size: var(--fs-min); line-height: 16px; color: var(--c-ink-light); text-shadow: 0 1px 2px var(--x-000000); }
.aw-cost { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.aw-cost > span { display: flex; flex-direction: column; }
.aw-cost small { font-size: var(--fs-min); }
.aw-arrow { font-size: 18px; color: var(--muted-t); }
.aw-main .btn { align-self: flex-start; }

/* ---------- Calculadora Pokémon (src/ui/calculator-ui.js): abas Calcular / Comparar na janela de Serviços ---------- */
.pc-tabs { margin-bottom: 10px; }
.pc-grid { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 12px; align-items: start; }
.pc-grid > * { min-width: 0; }
.pc-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; background: var(--card-t); border-color: var(--edge-t); }
.pc-f { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-min); color: var(--muted-t); min-width: 0; }
.pc-f > span { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.pc-f input, .pc-f select { width: 100%; min-width: 0; font: 12px var(--font); padding: 5px 8px; }
.pc-f-wide, .pc-note, .pc-send { grid-column: 1 / -1; }
.pc-note { margin: 0; }
.pc-send { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--edge-t); padding-top: 8px; }
.pc-check { display: flex; align-items: center; gap: 6px; min-height: 29px; }
.pc-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.pc-seg { padding: 2px; } .pc-seg .seg-btn { padding: 2px 8px; font-size: var(--fs-min); }
.pc-seg .seg-btn.active { background: var(--accent); color: var(--on-accent); }
.pc-iv-avg { display: flex; align-items: center; gap: 6px; }
.pc-iv-avg input[type=range] { flex: 1; accent-color: var(--accent); }
.pc-iv-avg .pc-pct { width: 64px; }
.pc-iv-each { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.pc-iv-each label { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-min); text-align: center; }
.pc-iv-each input { padding: 4px 2px; text-align: center; }
.pc-search { position: relative; }
.pc-results { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; }
.pc-results:empty { display: none; }
.pc-hit { display: grid; grid-template-columns: 32px 44px 1fr auto; gap: 6px; align-items: center; text-align: left; background: var(--pill-t); border: 1px solid var(--edge-t);
  border-radius: 8px; padding: 2px 8px 2px 4px; color: var(--text-t); font: 12px var(--font); cursor: pointer; }
.pc-hit:hover, .pc-hit:focus-visible { border-color: var(--accent); }
.pc-hit canvas { width: 32px; height: 32px; }
.pc-hit-types .type { margin: 0 0 0 3px; font-size: var(--fs-min); padding: 1px 5px; }
/* cartão */
.pc-card { background: var(--card-t); border-color: var(--edge-t); display: flex; flex-direction: column; gap: 8px; }
.pc-card-top { display: flex; align-items: center; gap: 12px; position: relative; }
.pc-sprite { width: 96px; height: 96px; flex: none; background: var(--inset); border-radius: 12px; image-rendering: pixelated; }
.pc-unknown { width: 96px; height: 96px; flex: none; display: grid; place-items: center; background: var(--inset); border-radius: 12px; font: 48px var(--display); color: var(--faint); }
.pc-card.empty { min-height: 128px; justify-content: center; }
.pc-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.pc-name { font-size: 17px; font-family: var(--display); font-weight: 400; letter-spacing: .3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-types .type { margin-right: 4px; }
.pc-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pc-chips:empty { display: none; }
.pc-held { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-min); font-weight: 600; }
.pc-awaken { background: var(--gold-soft-a); color: var(--gold-text); }
.pc-power { flex: none; text-align: center; background: var(--inset); border: 1px solid var(--edge-t); border-radius: 10px; padding: 6px 12px; align-self: flex-start; }
.pc-power small { display: block; font-size: var(--fs-min); letter-spacing: 1px; color: var(--muted-t); font-weight: 700; }
.pc-power b { font: 20px var(--display); color: var(--gold-text); }
.pc-side-tag { position: absolute; top: -4px; left: -4px; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font: 12px var(--display); background: var(--accent); color: var(--on-accent); z-index: 1; }
.pc-card.side-b .pc-side-tag { background: var(--blue-text); color: var(--c-ink-light); }
.pc-stats { display: grid; gap: 3px; }
.pc-stat { display: grid; grid-template-columns: 34px 54px 1fr 44px; gap: 8px; align-items: center; font-size: 12px; }
.pc-stat > span { color: var(--muted-t); font-weight: 600; }
.pc-stat b { text-align: right; }
.pc-stat small { text-align: right; font-size: var(--fs-min); }
.pc-statbar { display: block; height: 7px; background: var(--inset); border-radius: 4px; overflow: hidden; }
.pc-statbar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--cta-b), var(--cta-a)); border-radius: 4px; }
.pc-card.side-b .pc-statbar > i { background: linear-gradient(90deg, var(--c-xp-bar), var(--blue-text)); }
.pc-moveset { display: flex; flex-wrap: wrap; gap: 4px; }
.pc-mv { --t: var(--type-dark); display: inline-block; border-radius: 6px; padding: 2px 8px; font-size: var(--fs-min); font-weight: 600; background: color-mix(in srgb, var(--t) 22%, var(--inset)); color: var(--text-t); border: 1px solid color-mix(in srgb, var(--t) 60%, transparent); }
/* golpes */
.pc-moves { background: var(--card-t); border-color: var(--edge-t); display: flex; flex-direction: column; gap: 8px; }
.pc-table-wrap { max-height: 320px; overflow: auto; border: 1px solid var(--edge-t); border-radius: 8px; }
.pc-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pc-table th { text-align: left; font-size: var(--fs-min); letter-spacing: .5px; color: var(--muted-t); background: var(--pill-t); padding: 5px 8px; position: sticky; top: 0; }
.pc-table td { padding: 4px 8px; border-top: 1px solid var(--edge-t); vertical-align: middle; }
.pc-table tr.in-use td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pc-use { font-size: var(--fs-min); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--gold-text); margin-left: 4px; }
/* comparar */
.pc-vs-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.pc-spacer { flex: 1; }
.pc-vs { display: grid; grid-template-columns: 1fr 56px 1fr; gap: 10px; align-items: start; }
.pc-vs > * { min-width: 0; }
.pc-side { display: flex; flex-direction: column; gap: 10px; }
.pc-vs-mid { display: grid; place-items: center; height: 128px; }
.pc-vs-badge { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font: 16px var(--display); background: linear-gradient(135deg, var(--pause-a), var(--pause-b)); color: var(--c-gold-soft); box-shadow: 0 6px 16px color-mix(in srgb, var(--x-000000) 30%, transparent); }
.pc-sim { margin-top: 12px; background: var(--card-t); border-color: var(--edge-t); display: flex; flex-direction: column; gap: 8px; }
.pc-sim-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.pc-side-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-side-name.a { color: var(--gold-text); } .pc-side-name.b { color: var(--blue-text); text-align: right; }
.pc-verdict { text-align: center; font-size: 14px; }
.pc-win-a { color: var(--gold-text); } .pc-win-b { color: var(--blue-text); }
.pc-bar { display: flex; height: 26px; border-radius: 999px; overflow: hidden; background: var(--inset); border: 1px solid var(--edge-t); }
.pc-bar > i { display: flex; align-items: center; font-style: normal; font-weight: 700; font-size: 12px; transition: width .25s ease; min-width: 0; overflow: hidden; }
.pc-bar > i.a { background: linear-gradient(90deg, var(--pause-b), var(--pause-a)); color: var(--c-gold-soft); justify-content: flex-start; padding-left: 10px; }
.pc-bar > i.b { background: linear-gradient(90deg, var(--blue-text), var(--c-xp-bar)); color: var(--c-ink-light); justify-content: flex-end; padding-right: 10px; }
.pc-bar > i.d { background: var(--edge-2); }
.pc-best2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pc-best { display: flex; flex-direction: column; gap: 3px; background: var(--inset); border: 1px solid var(--edge-t); border-radius: 10px; padding: 8px 10px; font-size: 12px; }
.pc-best small { color: var(--muted-t); font-size: var(--fs-min); }
.pc-best .pc-mv { align-self: flex-start; font-size: 12px; }
.pc-cmp { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.pc-cmp td, .pc-cmp th { padding: 3px 8px; border-top: 1px solid var(--edge-t); }
.pc-cmp th { text-align: center; color: var(--muted-t); font-weight: 600; width: 110px; }
.pc-cmp td:first-child { text-align: right; } .pc-cmp td:last-child { text-align: left; }
.pc-cmp td.hi { color: var(--green-text); font-weight: 700; }
.pc-sim .center { text-align: center; }
@media (max-width: 900px) {
  .pc-grid { grid-template-columns: 1fr; }
  .pc-vs { grid-template-columns: 1fr; }
  .pc-vs-mid { height: 56px; }
  .pc-best2 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .pc-controls { grid-template-columns: 1fr; }
  .pc-iv-each { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pc-stat { grid-template-columns: 30px 48px 1fr 40px; }
}

/* ---------- TMs na Move Tutor ---------- */
.tutor-tms { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.tutor-tm { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: var(--card-t); border: 1px solid color-mix(in srgb, var(--type) 55%, var(--edge-t)); }
.tutor-tm .tutor-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.tutor-tm .tutor-desc { flex-basis: 100%; }

/* ---------- Helper (automations-ui.js): "quais" capturar e regras da autovenda ---------- */
.auto-tgts { display: flex; gap: 4px; flex-basis: 100%; margin-top: 2px; }
.auto-tgt { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--edge-2); background: var(--inset); color: var(--text-2); font: inherit; font-size: var(--fs-min); cursor: pointer; }
.auto-tgt:hover { color: var(--text-t); }
.auto-tgt.selected { border-color: var(--accent, var(--type-ground)); color: var(--accent, var(--type-ground)); background: color-mix(in srgb, var(--accent, var(--type-ground)) 12%, transparent); font-weight: 600; }
.auto-as { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding-left: 42px; }
.auto-as.off { opacity: .55; }
.auto-as-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
.auto-as-line .as-num { display: inline-flex; align-items: center; gap: 3px; }
.auto-as-line input[type="number"] { width: 52px; padding: 3px 4px; border-radius: 6px; border: 1px solid var(--edge-2); background: var(--inset); color: var(--text-t); text-align: center; font: inherit; }
.auto-as-line select { padding: 3px 6px; border-radius: 6px; border: 1px solid var(--edge-2); background: var(--inset); color: var(--text-t); font: inherit; font-size: 12px; }

/* ---------- Pokédex: ficha da espécie em painéis (2026-10-14) ---------- */
.dex-section.dx-panel { border-radius: var(--r-md); border: 1px solid var(--edge-t); background: var(--card-t); padding: 10px 12px; margin-bottom: 10px; }
.dx-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px !important; font: 13px var(--display) !important; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-t) !important; }
.dx-h > i { font-style: normal; color: var(--tier-text); font-size: 13px; width: 16px; text-align: center; }
.dx-h > i .ui-ico { width: 16px; height: 16px; margin: 0; vertical-align: middle; }
.dx-h .muted { text-transform: none; font: 12px var(--font); letter-spacing: 0; }
.dx-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.dx-row > .dx-panel { margin-bottom: 10px; }
/* evolução */
.dx-chain { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.dx-stage { display: flex; flex-direction: column; gap: 8px; }
.dx-arrow { color: var(--gold-text); font: 18px var(--display); letter-spacing: -2px; }
.dx-evo { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 104px; padding: 8px 10px; border-radius: var(--r-md);
  border: 1px solid var(--edge-2); background: var(--panel-t); color: var(--text-t); font: 12px var(--font); cursor: pointer; }
.dx-evo b { font-weight: 600; }
.dx-evo .muted { font-size: var(--fs-min); }
.dx-evo small { color: var(--muted-t); font-size: var(--fs-min); text-align: center; max-width: 120px; }
.dx-evo.current { border-color: var(--tier-text); box-shadow: 0 0 0 1px var(--tier-text) inset; }
.dx-evo:disabled { cursor: default; opacity: .7; }
.dx-evo canvas { width: 56px; height: 56px; image-rendering: pixelated; }
.dx-evo-q { width: 56px; height: 56px; display: grid; place-items: center; font: 22px var(--display); color: var(--faint); }
.dx-mega { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.dx-mega-tag { color: var(--tier-text); font-weight: 600; font-size: 12px; }
.dx-evo.mega { cursor: default; border-color: var(--tier-text); background: var(--tier-soft); }
.dx-more { margin-top: 8px; }
.dx-more > summary { cursor: pointer; color: var(--text-2); font-size: 12px; }
/* stats */
.dx-stats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dx-radar { width: 170px; height: 170px; flex: none; }
.dx-radar .ring { fill: none; stroke: var(--edge-2); stroke-width: 1; }
.dx-radar .axis { stroke: var(--edge-t); stroke-width: 1; }
.dx-radar .shape { fill: color-mix(in srgb, var(--tier-text) 30%, transparent); stroke: var(--tier-text); stroke-width: 2; }
.dx-radar text { fill: var(--muted-t); font: 600 12px var(--font); }
.dx-stat-table { flex: 1; min-width: 150px; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums;
  background: var(--panel-t); border: 1px solid var(--edge-t); border-radius: 8px; }
.dx-stat-table th { text-align: left; color: var(--text-2); font-weight: 600; padding: 3px 8px; }
.dx-stat-table td { padding: 3px 8px; text-align: right; }
.dx-stat-table td:last-child { width: 45%; }
/* tipos em batalha */
.dx-tsec { margin-bottom: 8px; }
.dx-tsec > span { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.dx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dx-tchip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 2px; border-radius: 6px; background: var(--panel-t); border: 1px solid var(--edge-t); font-size: var(--fs-min); }
.dx-tchip .type { font-size: var(--fs-min); text-transform: uppercase; }
.dx-tchip b.up { color: var(--green-text); } .dx-tchip b.down { color: var(--danger); } .dx-tchip b.res { color: var(--blue-text); }
/* tabelas (golpes, captura) */
.dex-moves.dx-table { display: table; font-size: 12px; border-radius: 8px; overflow: hidden; background: var(--panel-t); }
.dx-table th { background: var(--pill-t); color: var(--text-2); font-weight: 600; text-transform: uppercase; font-size: var(--fs-min); letter-spacing: .04em; text-align: center !important; padding: 6px 4px !important; }
.dx-table td { text-align: center !important; padding: 5px 4px !important; border-bottom: 1px solid var(--edge-t) !important; }
.dx-table td:first-child { text-align: left !important; }
.dx-table .dx-pct { color: var(--tier-text); font-weight: 600; }
.dx-table .dx-price { color: var(--gold-text); font-weight: 600; }
.dx-ball { display: inline-flex; align-items: center; gap: 6px; }
.dx-shiny { border-color: var(--gold-text) !important; }
@media (max-width: 640px) { .dex-moves.dx-table { display: block; overflow-x: auto; } .dx-radar { width: 140px; height: 140px; } }
/* Pokédex maior: a ficha ganha a maior parte da largura (painéis lado a lado), a grade fica numa coluna mais estreita */
.dex { width: min(1280px, 100%); height: min(900px, calc(100vh - 32px)); }
.dex-body { grid-template-columns: minmax(220px, 34%) minmax(0, 1fr); }
@media (max-width: 760px) { .dex-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: 35% 65%; } }

/* ---------- Barra de habilidades no mapa (2026-10-14; substitui o painel MOVESET da lateral) ---------- */
.skill-bar { position: absolute; right: 10px; top: 10px; max-height: calc(100% - 120px); display: flex; flex-direction: column; flex-wrap: wrap-reverse;
  align-content: flex-start; gap: 5px; z-index: 2; pointer-events: auto; }
.skill-bar:empty { display: none; }
.skill { position: relative; width: 34px; height: 34px; border-radius: 50%; filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--x-000000) 55%, transparent)); cursor: help; }
.skill .type-emblem { display: block; width: 34px; height: 34px; }
/* relógio: a parte escura é a recarga que falta, abrindo no sentido horário a partir do topo */
.skill::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent calc((1 - var(--cd, 0)) * 360deg), color-mix(in srgb, var(--c-inset) 68%, transparent) 0); }
.skill.cooling .type-emblem { filter: saturate(.55); }
.skill .sk-t { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; font: 700 12px var(--font); color: var(--c-ink-light);
  text-shadow: 0 1px 2px var(--x-000000), 0 0 3px var(--x-000000); font-variant-numeric: tabular-nums; pointer-events: none; }
.skill:not(.cooling) { box-shadow: 0 0 0 2px color-mix(in srgb, var(--type-c) 55%, transparent); }
.skill.fired { animation: skill-fire .45s ease-out; }
@keyframes skill-fire { 0% { transform: scale(1.25); box-shadow: 0 0 0 4px var(--type-c), 0 0 14px var(--type-c); } 100% { transform: scale(1); } }
.arena-wrap.numbers-on .skill-bar { display: none; }
@media (max-width: 760px) { .skill-bar { right: 6px; top: 6px; gap: 4px; } .skill, .skill .type-emblem { width: 28px; height: 28px; } .skill .sk-t { font-size: var(--fs-min); } }
@media (prefers-reduced-motion: reduce) { .skill.fired { animation: none; } }

/* ---------- Coluna direita mais limpa (2026-10-14): Time com quem está em campo, Mochila enxuta, "Desta caçada" na Captura ---------- */
.field-mon { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 10px; border-radius: 10px; background: var(--card-t); border: 1px solid var(--edge-t); }
.field-mon:empty { display: none; }
.field-mon canvas { width: 44px; height: 44px; image-rendering: pixelated; flex: none; }
.fm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fm-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.fm-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field-mon .bar { position: relative; margin: 0; }
.fm-hp { height: 14px; }
.fm-hp span { position: absolute; inset: 0; display: grid; place-items: center; font: 600 12px var(--font); color: var(--c-ink-light); text-shadow: 0 1px 2px var(--x-000000); font-variant-numeric: tabular-nums; }
.fm-xp { height: 4px; }
.bag-h { display: block; margin: 2px 0 6px; font: 600 12px var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.bag-h .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
#bag .bag-balls { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
.bag-note { margin: 8px 0 0; }
.cap-session { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--edge-t); }
.cap-session .sess-stats { margin-bottom: 8px; }
.cap-brokes b { color: var(--text-t); }
/* depósito do Centro Pokémon: abas Pokémon / Helds / Itens */
.depot-tabs { display: flex; margin: 4px 0 10px; }
.depot-tabs .seg-btn { flex: 1; }
.depot-h { display: block; margin: 8px 0 6px; font: 600 12px var(--font); color: var(--text-2); }
.depot-store { display: flex; flex-wrap: wrap; gap: 6px; }
.store-cell { position: relative; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 9px; background: var(--card-t); border: 1px solid var(--edge-t); }
.store-cell i { position: absolute; right: 4px; bottom: 2px; font: 700 12px var(--font); font-style: normal; color: var(--text-t); font-variant-numeric: tabular-nums; }
/* Pokédex: seus brokes na espécie */
.dx-mine { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; padding: 6px 10px; border-radius: 8px; background: var(--panel-t); border: 1px solid var(--edge-t); font-size: 12px; color: var(--text-2); }
.dx-mine b { color: var(--text-t); }
p.dx-mine { display: block; }
.cap-session .mini-grid > .muted { flex-basis: 100%; }

/* Modo economia ("Só números"): o canvas do mapa sai da tela (o navegador nem compõe a cena) */
.arena-wrap.numbers-on #arena { display: none; }
.cl-top .cl-clear { margin-left: auto; }
/* Modo Pocket sem janela à parte (celular, pop-up bloqueado): janelinha flutuante no canto */
.pocket-float { position: fixed; right: 12px; bottom: 12px; width: 280px; height: 380px; z-index: 60; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--edge-2); box-shadow: var(--shadow-panel); background: var(--c-bg); }
.pocket-float iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 760px) { .pocket-float { right: 8px; bottom: 8px; width: min(260px, calc(100vw - 16px)); height: 350px; } }

/* golpe sem efeito no alvo atual (imunidade de tipo): apagado com um × — o combate não usa */
.skill.no-effect .type-emblem { filter: grayscale(1) brightness(.55); }
.skill.no-effect::before { content: '×'; position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; font: 800 22px var(--font);
  color: var(--rar-mitico); text-shadow: 0 1px 2px var(--x-000000), 0 0 4px var(--x-000000); pointer-events: none; }
.skill.no-effect .sk-t { display: none; }
.skill.no-effect:not(.cooling) { box-shadow: none; }
.cap-brokes { display: block; } .cap-brokes.shiny { color: var(--gold-text); } .cap-brokes.shiny b { color: var(--gold-text); }
.cap-shiny-ico { vertical-align: -2px; margin-right: 1px; }

/* ---------- esqueleto único: a cidade usa as mesmas colunas, espaços e lugares da caçada ----------
   esquerda = painel do serviço (na caçada: o Pokémon em campo) · centro = mapa, barra de serviços e chat (na caçada: arena,
   controles e chat) · direita = guia + cartão de Time/Mochila/Captura (o mesmo elemento nas duas telas: app.js → placeShared) */
.town-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr) 360px; grid-template-areas: "left center right";
  gap: 16px; padding: 16px; height: calc(100vh - 60px); box-sizing: border-box; max-width: none; margin: 0; align-items: stretch; }
.town-left { grid-area: left; } .town-center { grid-area: center; } .town-right { grid-area: right; }
.town-left, .town-center, .town-right { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.town-left, .town-right { overflow-y: auto; scrollbar-width: thin; }
.town-right > .panel { margin: 0; flex: none; }
.town-center .town-stage { flex: 1 1 0; min-height: 0; height: auto; position: relative; overflow: hidden; padding: 0;
  border-radius: var(--r-xl); border: 1px solid var(--edge-3); }
.town-left .town-side { position: static; inset: auto; width: auto; max-height: none; flex: none; margin: 0; overflow: visible;
  background: var(--panel-t); backdrop-filter: none; box-shadow: none; }
/* barra de serviços embaixo do mapa (como os controles embaixo da arena), não mais por cima dele */
.town-center .dock { position: static; transform: none; inset: auto; flex: none; display: flex; gap: 6px; margin: 0;
  justify-content: stretch; pointer-events: auto; z-index: auto; max-width: none; }
.town-center .dock-tile { flex: 1 1 0; width: auto; min-width: 0; height: 64px !important; min-height: 0; padding: 6px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; background: var(--panel-t); }
.town-center .dock-tile:hover { transform: none; }
.town-center .dock-tile small { display: none; }
.town-center .dock-tile b { margin: 0; width: 100%; font-size: var(--fs-min); text-align: center; -webkit-line-clamp: 1; line-clamp: 1; }
.town-center .dock-tile kbd { position: absolute; top: 3px; right: 3px; padding: 0 4px; font-size: var(--fs-min); }
.town-center .dock-ico { width: 30px; height: 30px; }
.town-center .dock-ico canvas { width: 28px; height: 28px; }
.town-center .console-panel { flex: 0 0 var(--console-h, 22vh); min-height: 120px; margin: 0; }
@media (min-width: 1500px) { .town-center .console-resize { display: block; } }
@media (max-width: 1240px) {
  .town-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "center center" "left right"; height: auto; }
  .town-left, .town-right { overflow: visible; }
  .town-center .town-stage { flex: none; aspect-ratio: 15 / 11; max-height: 70vh; }
  .town-center .console-panel { flex: none; }
  .town-center .dock-tile b { display: none; }
}
@media (max-width: 980px) { .town-center .town-stage { padding: 0; aspect-ratio: auto; max-height: none; } .town-center .town-wrap { border: 0; border-radius: 0; }
  .town-center .dock { display: grid; } .town-center .dock-tile { height: 58px !important; } .town-center .console-panel { order: 3; } }
@media (max-width: 760px) {
  .town-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "center" "left" "right"; padding: 8px; gap: 8px; }
}
/* Pokédex: emblema dourado de Shiny no lugar do ✦ */
.dx-shiny-ico { vertical-align: -3px; }
.dex-shiny img { display: block; }
.cl-shiny-ico { vertical-align: -2px; }

/* Modo Pocket aberto: a tela da caçada desliga (só o aviso); a batalha está na janelinha */
.pocket-cover { display: none; }
body.pocket-on #hunt-view > :not(.pocket-cover) { display: none !important; }
body.pocket-on #hunt-view .pocket-cover { display: flex; grid-column: 1 / -1; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 60vh; text-align: center; color: var(--text-2); }
body.pocket-on #hunt-view .pocket-cover b { font: 20px var(--display); color: var(--text-t); }
/* "Só números": os números ocupam a tela — sem as colunas do Pokémon e do time/mochila */
.pocket-float { height: 500px !important; width: 320px !important; }
@media (max-width: 760px) { .pocket-float { width: min(300px, calc(100vw - 16px)) !important; height: 470px !important; } }

/* ================= Cores do anime da 1ª geração (2026-10-15): amarelo vivo, laranja damasco, azul celeste/turquesa =================
   Temas escuros (Preto, Cinza): fundo escuro como antes; destaques em amarelo vivo, botões principais em laranja damasco,
   informação/links/XP/diamante em turquesa. Tema "Anime" (claro): fundo azul celeste, painéis creme, os mesmos destaques. */
:root[data-theme="preto"] {
  --accent: var(--type-electric); --on-accent: var(--c-gold-soft); --gold-text: var(--type-electric);
  --cta-a: var(--x-ffb27a); --cta-b: var(--type-fire);
  --blue-text: var(--c-info); --diamond: var(--c-info); --xp-c: var(--c-info);
  --edge-2: color-mix(in srgb, var(--c-info) 18%, var(--c-edge));
}
/* botão principal (laranja damasco): texto marrom-escuro para ler bem */
.btn-green { color: var(--c-gold-soft-2); }
/* tema Anime é claro: as mesmas exceções de cor que o Ciano usa */
  
/* ================= Direção de arte · etapa 1: leitura nos temas claros (2026-10-15) =================
   Cores fixas do CSS antigo (pensadas para fundo escuro) que ficavam ilegíveis no Anime/Ciano. Nos temas escuros nada muda. */
/* textos/fundos que funcionam nos dois tipos de tema: usam os tokens */
.dex-name { color: var(--text-t); }
.shop-price { color: var(--gold-text); }
.rar-chip { color: var(--text-t); background: var(--pill-t); border-color: var(--edge-t); }
.rar-chip b { color: var(--text-2); }
.rar-chip.active { color: var(--text-t); background: color-mix(in srgb, var(--rc) 18%, var(--pill-t)); }
.dex-state { border-color: transparent; border-radius: 6px; padding: 2px 8px; }
.dex-state.k1 { background: color-mix(in srgb, var(--blue-text) 18%, var(--card-t)); color: var(--blue-text); }
.dex-state.k2 { background: color-mix(in srgb, var(--gold-text) 18%, var(--card-t)); color: var(--gold-text); }
.dex-state.k3 { background: var(--green-soft); color: var(--green-text); }
/* só nos temas claros */

/* ================= Tela de entrada e marca — direção de arte "Fogo × gelo" (2026-10-16) =================
   Logo em SVG (login-ui.js: FIRE_TITLE) com brilho laranja à esquerda e azul à direita; a tela de entrada é sempre escura,
   em qualquer tema (os tokens do Preto valem dentro de #login-view); cartão de vidro escuro com a faixa fogo → gelo no topo;
   a barra do topo some enquanto a entrada está aberta. A mira (assets/ui/mark.png) é a marca da barra do topo e o ícone da aba. */
.ph-logo { margin: 5vh 0 0; text-align: center; line-height: 0; user-select: none; }
.ph-logo svg { width: min(560px, 92vw); height: auto; overflow: visible;
  filter: drop-shadow(-10px 0 18px color-mix(in srgb, var(--type-fire) 60%, transparent)) drop-shadow(10px 0 20px color-mix(in srgb, var(--type-water) 60%, transparent)); }
.ph-logo text { font-family: var(--display); }
.ph-logo .ph-logo-tag { font-family: var(--font, 'Rubik'), sans-serif; font-weight: 600; }
body:has(#login-view:not(.hidden)) .topbar { display: none; }
#login-view {
  --bg-page: var(--c-void); --bg-app: var(--c-inset); --inset: color-mix(in srgb, var(--x-000000) 55%, transparent);
  --panel-t: var(--c-panel); --card-t: color-mix(in srgb, var(--c-ink-light) 5%, transparent); --pill-t: color-mix(in srgb, var(--c-ink-light) 7%, transparent); --edge-t: color-mix(in srgb, var(--c-ink-light) 12%, transparent); --edge-2: color-mix(in srgb, var(--c-ink-light) 20%, transparent); --edge-3: color-mix(in srgb, var(--c-ink-light) 16%, transparent);
  --text-t: var(--rar-comum); --text-2: var(--type-steel); --muted-t: var(--x-9aa0a6); --faint: var(--x-7a7a7a); --overlay: color-mix(in srgb, var(--c-inset) 90%, transparent);
  --accent: var(--type-electric); --on-accent: var(--c-gold-soft); --gold-text: var(--type-electric); --gold-soft-a: var(--c-edge); --gold-soft-b: var(--c-gold-soft);
  --green-text: var(--x-7ee88f); --green-soft: var(--x-153a1e); --blue-text: var(--c-info); --cta-a: var(--x-ffb27a); --cta-b: var(--type-fire);
  --text: var(--text-t); --muted: var(--muted-t); --gold: var(--accent);
  color: var(--text-t); background: transparent; min-height: 100vh; box-sizing: border-box; position: relative; z-index: 1;
}
#login-view .login-card { color: var(--text-t); border: 1px solid color-mix(in srgb, var(--c-ink-light) 12%, transparent);
  background: linear-gradient(90deg, var(--type-electric), var(--type-fire) 44%, var(--c-ink-light) 50%, var(--c-info) 56%, var(--type-water)) top / 100% 3px no-repeat, color-mix(in srgb, var(--c-bg) 80%, transparent);
  backdrop-filter: blur(10px); box-shadow: 0 18px 50px color-mix(in srgb, var(--x-000000) 60%, transparent), inset 0 1px 0 color-mix(in srgb, var(--c-ink-light) 6%, transparent); }
#login-view .login-form input, #login-view .login-name input, #login-view .char-delete input { background: color-mix(in srgb, var(--x-000000) 45%, transparent); color: var(--rar-comum); border-color: color-mix(in srgb, var(--c-ink-light) 20%, transparent); }
#login-view .login-form input:focus, #login-view .login-name input:focus { outline: 2px solid var(--c-info); outline-offset: 1px; border-color: transparent; }
#login-view input::placeholder { color: var(--c-text-3); }
/* marca: a mira no lugar do losango amarelo */
.brand-gem { width: 24px; height: 24px; background: url(../../assets/ui/mark.png) center / contain no-repeat; transform: none; border-radius: 50%; box-shadow: none; margin: 0; }

/* ================= Barra do topo e painéis laterais — direção de arte (2026-10-16) =================
   Chip de tipo do guia (type-chip.js): ícone do tipo + nome em português; rótulo azul-escuro nos tipos claros.
   Títulos de seção dos painéis no mesmo estilo de rótulo (11px, caixa-alta, espaçado, cor secundária); dicas sem caixa dentro de
   caixa; divisória entre os botões principais do topo (Mochila, Pokédex, Loja) e os demais. */
.type { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; line-height: 1.35; }
.type.type-lt { color: var(--x-13294b); }
.type .type-ico { width: 12px; height: 12px; object-fit: contain; image-rendering: pixelated; flex: none; margin-left: -2px; }
.town-h, .bonus-head { font-size: var(--fs-min); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-t); }
.mon-card:has(> p.muted.small:only-child) { background: transparent; border: 0; box-shadow: none; padding: 4px 2px; }
.depot-grid > p.muted:only-child { grid-column: 1 / -1; text-align: center; padding: 10px 0; }
.tb-btn:not(.tb-sec) + .tb-sec { margin-left: 9px; position: relative; overflow: visible; }
.tb-btn:not(.tb-sec) + .tb-sec::before { content: ''; position: absolute; left: -7px; top: 7px; bottom: 7px; width: 1px; background: var(--edge-t); pointer-events: none; }
.seg-btn.active .muted, .svc-tab.active .muted { color: inherit; opacity: .7; }

/* ================= Janelas de serviço — direção de arte (2026-10-16) =================
   Campos e seletores com as cores do tema (o CSS antigo fixava #151515, ilegível no tema claro); janelas antigas (.modal: Mochila,
   resultado da caçada) com o mesmo título e botão de fechar das janelas de serviço; PokéMart em linhas compactas com a barra de
   compra presa no rodapé da janela. */
.dex-toolbar input, .dex-toolbar select, .capture-panel select, .shop select, .forge-fields select, .depot-tools input, .depot-tools select,
.mon-actions select, .route-controls select, .pokemon-bag-tools input, .pokemon-bag-tools select, .market-search input {
  background: var(--inset); color: var(--text-t); border: 1px solid var(--edge-2); border-radius: 8px; box-shadow: none; }
.modal { padding: 12px 16px 14px; }
.modal-title { display: flex; align-items: center; gap: 10px; margin: -12px -16px 12px; padding: 12px 16px; font: 400 20px/1.2 var(--display); color: var(--text-t); }
.modal-title > .btn:last-child { margin-left: auto; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; font: 600 15px/1 var(--font);
  border-radius: 10px; background: var(--pill-t); border: 1px solid var(--edge-2); color: var(--text-t); }
.modal-title > .btn:last-child:hover { border-color: var(--accent); }
/* PokéMart: ícone | nome + descrição + estoque | preço */
.shop-balls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.shop-ball { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 1px; align-items: center; text-align: left; padding: 8px 12px; }
.shop-ball > img, .shop-ball > canvas { grid-row: 1 / 4; width: 60px; height: 60px; margin: -4px; }
.shop-ball > :nth-child(2) { grid-column: 2; font-size: 13px; }
.shop-ball > :nth-child(3) { grid-column: 2; color: var(--text-2); }
.shop-ball > :nth-child(5) { grid-column: 2; }
.shop-ball > .shop-price { grid-column: 3; grid-row: 1 / 4; font-size: 14px; white-space: nowrap; }
.shop-buybar { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -6px 16px color-mix(in srgb, var(--x-13294b) 12%, transparent); border: 1px solid var(--edge-strong, var(--edge-2)); }
.svc-wallet img { width: 28px; height: 28px; vertical-align: middle; margin: -6px -5px -6px -6px; } /* sprites de item têm margem vazia */
.svc-wallet .coin-img { width: 18px; height: 18px; margin: 0; vertical-align: -4px; }
@media (max-width: 560px) { .shop-balls { grid-template-columns: minmax(0, 1fr); } }
/* Bosses: texto das recompensas nos temas claros — as cores pastel do tema escuro sumiam no fundo claro (contraste ≥ 4,5:1) */
/* contraste nos temas claros (medido em todas as janelas de serviço): dourado mais fundo, aba e chip ativos, alertas e raridade */
.chip.rarity-incomum { color: var(--x-13294b); text-shadow: none; }
 /* hora no registro */

/* ================= Barra de caçada e golpes — direção de arte (2026-10-16) =================
   Raridade em texto (registro, Mercado, Só números) por classe: as cores da raridade são do tema escuro (Comum quase branco);
   nos temas claros, versões escuras da mesma família (≥ 4,5:1). "Desistir" legível no tema claro; recarga do golpe mais clara. */
.ess-txt { color: var(--ess-c, inherit); }
.ess-comum { --ess-c: var(--rar-comum); } .ess-incomum { --ess-c: var(--rar-incomum); } .ess-raro { --ess-c: var(--rar-raro); }
.ess-ultra { --ess-c: var(--rar-ultra); } .ess-lendario { --ess-c: var(--type-ground); } .ess-mitico { --ess-c: var(--rar-mitico); }
.console-badge { background: var(--type-fighting); }
.skill::after { background: conic-gradient(from 0deg, transparent calc((1 - var(--cd, 0)) * 360deg), color-mix(in srgb, var(--c-inset) 52%, transparent) 0); }
.skill .sk-t { text-shadow: 0 0 3px var(--x-000000), 0 1px 0 var(--x-000000); }
.bar > span { text-shadow: 0 0 2px color-mix(in srgb, var(--x-000000) 90%, transparent), 0 1px 1px var(--x-000000); } /* número sobre a barra de vida: contorno escuro para ler no verde */
/* Hunt Analyzer e Log de Capturas nos temas claros: os valores usavam azul/verde/amarelo claros do tema escuro */

/* ================= Chat e registro — direção de arte (2026-10-16) =================
   Telas estreitas: as abas rolam de lado sem a barra de rolagem grossa; o "● N online" fixo à direita usa o fundo do painel
   (era preto) com um esfumado sobre as abas que passam por baixo. */
.console-tabs { scrollbar-width: none; }
.console-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 760px) {
  .console-online { background: var(--panel-t); box-shadow: -12px 0 10px -4px var(--panel-t); }
}
li > .t, .chat-msg .t { color: var(--muted-t); } /* hora do registro e do chat, todos os temas */
li.log-ball > img.ui-ico.in { width: 22px; height: 22px; margin: -4px 0 -4px -5px; vertical-align: middle; } /* bola no registro: o sprite tem margem vazia */

/* ================= Cidade e NPCs — direção de arte (2026-10-16) =================
   Tier de held em texto (Held Machine, Move Tutor, drop no registro) por classe; nos temas claros, versões escuras (≥ 4,5:1).
   Forja e Mapa global (Brock) com as cores do tema claro: símbolos da forja, título da caçada escolhida, chips de vantagem. */
.held-txt { color: var(--ht, inherit); }
.held-t1 { --ht: var(--x-9aa0a6); } .held-t2 { --ht: var(--type-grass); } .held-t3 { --ht: var(--type-water); } .held-t4 { --ht: var(--c-boss); }
.held-t5 { --ht: var(--c-shiny); } .held-t6 { --ht: var(--type-fire); } .held-t7 { --ht: var(--rar-mitico); }
.wm-name { font-family: var(--display); font-weight: 400; }
/* Forja no tema claro: altar e encaixes claros (eram cinza-escuro translúcido, encardido sobre o creme) */
.wm-count { background: color-mix(in srgb, var(--x-000000) 72%, transparent); color: var(--c-ink-light); }
/* Mapa-múndi: botões de região, filtros de tipo e moldura no padrão do guia (eram marrom-escuro com Georgia, do tema antigo) */
.wm-tab { background: var(--card-t); border: 2px solid var(--edge-2); color: var(--text-t); }
.wm-tab b { font-family: var(--display); font-weight: 400; }
.wm-tab small { color: var(--muted-t); }
.wm-tab img { border-color: var(--edge-2); background: var(--inset); }
.wm-tab:hover { border-color: var(--accent); }
.wm-tab.active { background: var(--x-13294b); border-color: var(--type-electric); color: var(--c-ink-light); box-shadow: 0 0 0 2px color-mix(in srgb, var(--type-electric) 35%, transparent); }
.wm-tab.active small { color: var(--x-c7cee0); }
.wm-type { opacity: 1; color: var(--text-t); background: color-mix(in srgb, var(--tc) 16%, var(--card-t)); border: 1px solid color-mix(in srgb, var(--tc) 55%, transparent); }
.wm-type.on { color: var(--c-ink-light); text-shadow: 0 1px 2px color-mix(in srgb, var(--x-000000) 70%, transparent); }
.wm-view { border: 2px solid var(--edge-2); background: var(--c-tier-soft); }
.wm-pool canvas { background: var(--inset); border: 1px solid var(--edge-2); }

/* ================= Store e Passe de Batalha — direção de arte (2026-10-16) =================
   Contadores das abas legíveis; etiqueta do boost (×1,5, +25%) com texto escuro sobre o tom do item; contagem do Passe e estrelas
   da barra de progresso com contraste no tema claro. */
.dshop-tab small { color: var(--muted-t); }
.dshop-ico-tag { background: var(--x-13294b); color: var(--c-ink-light); border: 1px solid var(--tone-b); text-shadow: none; }
.bp-progress > b { color: var(--muted-t); }
/* botão "Só números" ligado (fundo amarelo): texto escuro — antes a cor dourada do tema vencia e o texto sumia */
:root:not([data-theme]) #btn-numbers.numbers-btn-on { color: var(--x-13294b); }

/* ---------- Mapa global: lista de caçadas (2026-10-17) — lista à esquerda, cartão da caçada à direita ---------- */
.wm-mode { display: inline-flex; gap: 4px; margin-left: auto; }
.wm-mode .btn.on { background: var(--gold-text); color: var(--c-panel); border-color: var(--gold-text); }
.wm-sort { display: inline-flex; align-items: center; gap: 4px; color: var(--muted-t); font-size: 12px; }
.wm-sort select { font: inherit; padding: 3px 6px; border-radius: 8px; background: var(--inset); color: inherit; border: 1px solid var(--edge-t); }
.wm-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 10px; height: min(64vh, 680px); }
.wm-listbox { position: relative; display: flex; flex-direction: column; min-height: 0; border: 2px solid var(--edge-2); border-radius: 12px; background: var(--card-t); overflow: hidden; }
.wm-list-head, .wm-row { display: grid; grid-template-columns: 38px minmax(0, 1.6fr) 124px minmax(0, 1fr) 128px 66px; gap: 8px; align-items: center; } /* nível: 124px desde 2026-10-29 (cabe "Nv. 75.000–75.004" numa linha) */
.wm-row-lv { white-space: nowrap; }
.wm-list-head { padding: 6px 10px; font-size: var(--fs-min); letter-spacing: 1px; text-transform: uppercase; color: var(--muted-t); border-bottom: 1px solid var(--edge-t); background: var(--inset); }
.wm-list { overflow-y: auto; flex: 1; min-height: 0; padding-bottom: 26px; }
.wm-row { padding: 4px 10px; border-bottom: 1px solid var(--edge-t); cursor: pointer; outline: none; }
.wm-row:hover, .wm-row:focus-visible { background: color-mix(in srgb, var(--gold-text) 10%, transparent); }
.wm-row.sel { background: color-mix(in srgb, var(--gold-text) 20%, transparent); box-shadow: inset 3px 0 0 var(--gold-text); }
.wm-row.locked { opacity: .55; }
.wm-row.wm-fit .wm-row-lv b { color: var(--green-text); }
.wm-row canvas { width: 34px; height: 34px; image-rendering: pixelated; border-radius: 50%; background: var(--inset); border: 1px solid var(--edge-t); }
.wm-row-name { display: flex; flex-direction: column; min-width: 0; }
.wm-row-name b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-row-name small { font-size: var(--fs-min); color: var(--muted-t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-row-name .ui-ico { width: 14px; height: 14px; vertical-align: -2px; }
.wm-row-lv { font-size: 12px; color: var(--muted-t); } .wm-row-lv b { color: inherit; font-size: 13px; }
.wm-row-types { display: flex; flex-wrap: wrap; gap: 3px; }
.wm-st { font-size: var(--fs-min); font-weight: 600; white-space: nowrap; }
.wm-st.open { color: var(--green-text); } .wm-st.won { color: var(--gold-text); } .wm-st.cur { color: var(--c-info); } .wm-st.lock { color: var(--muted-t); }
.wm-st .ui-ico { width: 12px; height: 12px; vertical-align: -1px; border: 0; }
.wm-count-list { left: 10px; bottom: 6px; }
.wm-empty { padding: 16px; }
.wm-side { margin-top: 0; overflow-y: auto; min-height: 0; padding-right: 2px; }
.wm-side .wm-card { grid-template-columns: 1fr; }
.wm-side .wm-pool { flex-wrap: wrap; }
.wm-side .wm-an { grid-template-columns: 1fr; }
@media (max-width: 900px) {
  .wm-split { grid-template-columns: 1fr; height: auto; }
  .wm-listbox { height: 56vh; }
  .wm-list-head { display: none; }
  .wm-row { grid-template-columns: 38px minmax(0, 1fr) auto; grid-template-areas: "s n go" "s l st" "s t t"; row-gap: 2px; }
  .wm-row canvas { grid-area: s; } .wm-row-name { grid-area: n; } .wm-row-lv { grid-area: l; } .wm-row-types { grid-area: t; } .wm-st { grid-area: st; justify-self: end; } .wm-row .btn { grid-area: go; }
}
.wm-zoom[hidden] { display: none; }

/* ---------- Ficha completa do Pokémon (src/ui/mon-sheet.js, 2026-10-17) ---------- */
.ms-back { position: fixed; inset: 0; z-index: 900; background: color-mix(in srgb, var(--c-bg) 55%, transparent); display: grid; place-items: center; padding: 16px; }
.ms-box { width: min(880px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  background: var(--panel-t, var(--c-ink-light)); color: var(--text-t, var(--c-panel-3)); border: 2px solid var(--edge-2); box-shadow: 0 18px 50px color-mix(in srgb, var(--x-000000) 35%, transparent);
  --st-hp: var(--c-ok); --st-attack: var(--c-danger); --st-defense: var(--type-ground); --st-spAttack: var(--type-flying); --st-spDefense: var(--c-info); --st-speed: var(--c-warn); }
.ms-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--edge-t); background: var(--inset); }
.ms-head h3 { margin: 0; font-family: var(--display); font-weight: normal; font-size: 18px; letter-spacing: .5px; text-transform: uppercase; }
.ms-head-btns { display: flex; gap: 4px; }
.ms-body { overflow-y: auto; padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ms-top { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 12px; }
.ms-name b { font-family: var(--display); font-weight: normal; font-size: 22px; } .ms-name small { margin-left: 6px; color: var(--muted-t); }
.ms-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 8px; }
.ms-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ms-tile { position: relative; padding: 7px 9px 7px 12px; border-radius: 10px; background: var(--card-t); border: 1px solid var(--edge-t); display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ms-tile::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; border-radius: 4px; background: var(--c, var(--edge-2)); }
.ms-tile small { font-size: var(--fs-min); letter-spacing: .8px; text-transform: uppercase; color: var(--muted-t); }
.ms-tile b { font-size: 18px; line-height: 1.15; } .ms-tile b i { font-style: normal; font-size: 12px; color: var(--muted-t); }
.ms-tile span { font-size: var(--fs-min); color: var(--muted-t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-tile.big { --c: var(--gold-text); } .ms-tile.big b { color: var(--gold-text); font-size: 20px; }
.ms-stage { border-radius: 14px; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--gold-text) 22%, transparent), transparent 70%), var(--inset);
  border: 1px solid var(--edge-t); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 10px; }
.ms-stage canvas { width: 128px; height: 128px; image-rendering: pixelated; }
.ms-power-meter { width: 80%; height: 8px; border-radius: 99px; background: var(--card-t); border: 1px solid var(--edge-t); overflow: hidden; }
.ms-power-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--c-text-3), var(--c-ok), var(--c-info), var(--type-flying), var(--type-ground)); }
.ms-card { padding: 10px 12px; border-radius: 12px; background: var(--card-t); border: 1px solid var(--edge-t); }
.ms-card h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted-t); font-weight: 700; }
.ms-card h4 small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ms-stats { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; align-items: center; }
.ms-radar-wrap { display: flex; flex-direction: column; align-items: center; }
.ms-radar { width: 190px; height: 190px; overflow: visible; }
.ms-radar text { font-size: var(--fs-min); fill: var(--muted-t); text-anchor: middle; font-weight: 700; }
.ms-ring { fill: none; stroke: var(--edge-t); stroke-width: 1; } .ms-axis { stroke: var(--edge-t); stroke-width: 1; }
.ms-cur { fill: color-mix(in srgb, var(--c-info) 35%, transparent); stroke: var(--x-2f8fd0); stroke-width: 2; }
.ms-iv { fill: color-mix(in srgb, var(--c-warn) 25%, transparent); stroke: var(--type-fire); stroke-width: 1.5; stroke-dasharray: 3 2; }
.ms-legend { display: flex; gap: 10px; font-size: var(--fs-min); } .ms-legend .cur { color: var(--x-2f8fd0); } .ms-legend .iv { color: var(--type-fire); }
.ms-bars { display: flex; flex-direction: column; gap: 5px; }
.ms-bar { display: grid; grid-template-columns: 34px minmax(0, 1fr) 62px 46px; gap: 8px; align-items: center; font-size: 12px; }
.ms-bars.base .ms-bar { grid-template-columns: 34px minmax(0, 1fr) 40px; }
/* atributo-base da espécie ao lado do atual (2026-10-20, pedido do dono do jogo): "base 83" cinza entre o valor e o IV */
.ms-bars:not(.base) .ms-bar { grid-template-columns: 34px minmax(0, 1fr) 54px 58px 46px; }
.ms-bar small.ms-basev { font-size: var(--fs-min); font-weight: 700; color: var(--muted-t); text-align: right; white-space: nowrap; opacity: .85; }
.ms-bar span { font-weight: 700; color: var(--muted-t); } .ms-bar b { text-align: right; font-variant-numeric: tabular-nums; }
.ms-track { height: 10px; border-radius: 99px; background: var(--inset); overflow: hidden; border: 1px solid var(--edge-t); }
.ms-track i { display: block; height: 100%; border-radius: 99px; background: var(--c-ok); }
.ms-bar em { font-style: normal; font-size: var(--fs-min); font-weight: 700; text-align: right; }
.ms-bar em.iv-hi { color: var(--x-2a9d4a); } .ms-bar em.iv-mid { color: var(--rar-lendario); } .ms-bar em.iv-lo { color: var(--c-hp-bar); }
.ms-note { margin: 8px 0 0; font-size: var(--fs-min); color: var(--muted-t); line-height: 1.4; }
.ms-moves { width: 100%; border-collapse: collapse; font-size: 12px; }
.ms-moves th { text-align: left; font-size: var(--fs-min); letter-spacing: .8px; text-transform: uppercase; color: var(--muted-t); padding: 4px 6px; border-bottom: 1px solid var(--edge-t); }
.ms-moves td { padding: 4px 6px; border-bottom: 1px solid color-mix(in srgb, var(--edge-t) 60%, transparent); }
.ms-moves td:nth-child(4), .ms-moves td:nth-child(5), .ms-moves th:nth-child(4), .ms-moves th:nth-child(5) { text-align: right; font-variant-numeric: tabular-nums; }
.ms-type { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: var(--fs-min); font-weight: 700; color: var(--c-ink-light); background: var(--tc); text-shadow: 0 1px 1px color-mix(in srgb, var(--x-000000) 40%, transparent); }
.ms-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ms-xpbar { position: relative; height: 18px; border-radius: 99px; background: var(--inset); border: 1px solid var(--edge-t); overflow: hidden; margin-bottom: 8px; }
.ms-xpbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--c-info), var(--x-8a5cf6)); }
.ms-xpbar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-min); font-weight: 700; }
.ms-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ms-kv > div { padding: 6px 8px; border-radius: 8px; background: var(--inset); display: flex; flex-direction: column; min-width: 0; }
.ms-kv small { font-size: var(--fs-min); text-transform: uppercase; letter-spacing: .8px; color: var(--muted-t); }
.ms-kv b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-dex { margin-top: 8px; }
.ms-rar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.ms-rar-i { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; border-radius: 10px; background: var(--inset); border: 1px solid var(--edge-t); font-size: var(--fs-min); text-align: center; }
.ms-rar-i i { width: 26px; height: 26px; border-radius: 7px; background: var(--c); border: 2px solid color-mix(in srgb, var(--c) 60%, var(--x-000000)); }
.ms-rar-i small { color: var(--muted-t); } .ms-rar-i.me { border: 2px solid var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); }
.ms-rar-i em { position: absolute; top: -8px; font-style: normal; font-size: var(--fs-min); font-weight: 700; padding: 1px 6px; border-radius: 99px; background: var(--c); color: var(--c-panel); }
.am-sheet { margin-left: auto; }
@media (max-width: 760px) {
  .ms-top, .ms-stats, .ms-two { grid-template-columns: 1fr; } .ms-stage { order: -1; } .ms-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms-rar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Registro na cena da caçada (src/ui/scene-log.js, 2026-10-17) ---------- */
.hunt-center .arena-wrap { position: relative; }
.scene-log { position: absolute; left: 10px; bottom: 78px; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  max-width: min(55%, 440px); pointer-events: none; }
.sl-line { padding: 1px 7px; border-radius: 5px; font-size: var(--fs-min); line-height: 1.3; color: var(--rar-comum); background: color-mix(in srgb, var(--c-bg) 55%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  border-left: 3px solid var(--x-8aa0b8); text-shadow: 0 1px 1px var(--x-000000); animation: sl-in .25s ease-out; transition: opacity .6s, transform .6s; }
.sl-line b { color: var(--c-ink-light); } .sl-line i { font-style: normal; color: var(--c-shiny); }
.sl-line.out { opacity: 0; transform: translateX(-8px); }
.sl-kill { border-left-color: var(--type-ground); } .sl-capture { border-left-color: var(--type-grass); } .sl-capture b { color: var(--x-8dffa0); }
.sl-broke { border-left-color: var(--rar-mitico); color: var(--c-text); } .sl-potion { border-left-color: var(--c-info); }
@keyframes sl-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.arena-wrap.numbers-on .scene-log { display: none; }
/* celular (2026-10-19, pedido do dono do jogo e dos jogadores: "tem que sumir a informação de catch, xp e tal da tela, muito ruim usar no celular"):
   o registro na cena (derrotas, XP, capturas, poções) some na tela estreita e a batalha fica livre; no computador continua igual */
@media (max-width: 760px) { .scene-log { display: none; } }

/* ---------- Mochila em bolsos (src/ui/bag-pockets.js, 2026-10-17) ---------- */
.bp-back { position: fixed; inset: 0; z-index: 880; background: color-mix(in srgb, var(--c-bg) 50%, transparent); display: grid; place-items: center; padding: 16px; }
.bp-back.hidden { display: none; }
.bp-box { width: min(760px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  background: var(--panel-t); color: var(--text-t); border: 2px solid var(--edge-2); box-shadow: 0 18px 50px color-mix(in srgb, var(--x-000000) 35%, transparent); }
.bp-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--inset); border-bottom: 1px solid var(--edge-t); }
.bp-head h3 { margin: 0; flex: 1; font-family: var(--display); font-weight: normal; font-size: 18px; letter-spacing: .5px; text-transform: uppercase; }
.bp-head .bag-ico { width: 26px; height: 26px; image-rendering: pixelated; }
.bp-sub { margin: 10px 14px 0; font-size: 12px; color: var(--text-2); }
.bp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px 14px 16px; overflow-y: auto; }
.bp-pocket { display: flex; gap: 10px; align-items: center; text-align: left; padding: 10px; border-radius: 12px; cursor: pointer; font: inherit; color: inherit;
  background: var(--card-t); border: 1px solid var(--edge-t); transition: transform .12s, border-color .12s, box-shadow .12s; }
.bp-pocket:hover, .bp-pocket:focus-visible { transform: translateY(-2px); border-color: var(--gold-text); box-shadow: 0 6px 16px color-mix(in srgb, var(--x-000000) 12%, transparent); outline: none; }
.bp-ico { flex: none; width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: var(--inset); border: 1px solid var(--edge-t); }
.bp-ico img, .bp-ico .ui-ico { width: 40px; height: 40px; image-rendering: pixelated; border: 0; }
.bp-ico img.pk-ico { width: 48px; height: 48px; }
.bp-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bp-txt b { font-size: 14px; } .bp-txt small { font-size: var(--fs-min); color: var(--muted-t); line-height: 1.3; }
.bp-txt em { align-self: flex-start; margin-top: 3px; font-style: normal; font-size: var(--fs-min); font-weight: 700; padding: 1px 8px; border-radius: 99px; background: var(--gold-text); color: var(--c-panel); }
.bp-txt em.zero { background: var(--edge-t); color: var(--muted-t); }
.bp-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; padding: 12px 14px 16px; overflow-y: auto; }
.bp-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px 8px; border-radius: 10px; text-align: center;
  background: var(--card-t); border: 1px solid var(--edge-t); min-width: 0; }
.bp-item-ico { height: 36px; display: grid; place-items: center; } .bp-item-ico img, .bp-item-ico .ui-ico { width: 32px; height: 32px; image-rendering: pixelated; border: 0; }
.bp-n { position: absolute; top: 4px; right: 6px; font-size: var(--fs-min); color: var(--gold-text); }
.bp-name { font-size: 12px; font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-item small { font-size: var(--fs-min); color: var(--muted-t); }
.bp-noimg { width: var(--s); height: var(--s); border-radius: 8px; background: var(--inset); display: inline-block; }
.bp-empty { grid-column: 1 / -1; padding: 12px 0; }
.bp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--edge-t); background: var(--inset); }
@media (max-width: 760px) { .bp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .bp-grid { grid-template-columns: 1fr; } }

/* ---------- Mercado: filtros, ordenação e favoritos (src/ui/market-ui.js, 2026-10-17) ---------- */
.mk-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: var(--card-t); border: 1px solid var(--edge-t); }
.mk-filters select, .mk-range input { font: inherit; font-size: 12px; padding: 3px 6px; border-radius: 8px; background: var(--panel-t); color: inherit; border: 1px solid var(--edge-t); }
.mk-range { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted-t); }
.mk-range input { width: 58px; }
.mk-tog.active { background: var(--gold-text); color: var(--c-panel); border-color: var(--gold-text); }
.mk-count { margin-left: auto; }
.mk-star { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--edge-t); background: var(--panel-t); color: var(--muted-t); font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.mk-star.on { color: var(--c-warn); border-color: var(--c-warn); background: color-mix(in srgb, var(--c-warn) 15%, var(--panel-t)); }
.mk-star:hover { color: var(--c-warn); }
@media (max-width: 760px) { .mk-count { margin-left: 0; width: 100%; } }
.mk-row:has(> .mk-star) { grid-template-columns: 26px 44px minmax(0, 1fr) auto auto auto; }
.mk-row:has(> .mk-star) > .mk-item { grid-column: 2 / 4; }
@media (max-width: 760px) { .mk-row:has(> .mk-star) { grid-template-columns: 26px 44px minmax(0, 1fr) auto; } }

/* ---------- Store: economia dos pacotes (2026-10-17) ---------- */
.dshop-save { display: block; margin: 2px 0 4px; padding: 4px 8px; border-radius: 8px; font-size: var(--fs-min); font-weight: 600; line-height: 1.35;
  color: var(--green-text); background: color-mix(in srgb, var(--green-text) 12%, transparent); border: 1px dashed color-mix(in srgb, var(--green-text) 50%, transparent); }
.dshop-save .ui-ico, .dshop-save img { width: 12px; height: 12px; vertical-align: -1px; }

/* ---------- Mercado: filtros numa coluna lateral (2026-10-17) ---------- */
.mk-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 12px; align-items: start; }
.mk-side { position: sticky; top: 0; max-height: min(64vh, 640px); overflow-y: auto; display: flex; flex-direction: column; gap: 3px;
  padding: 8px; border-radius: 12px; background: var(--card-t); border: 1px solid var(--edge-t); }
.mk-side h5 { margin: 8px 4px 2px; font-size: var(--fs-min); letter-spacing: 1px; text-transform: uppercase; color: var(--muted-t); }
.mk-side h5:first-child { margin-top: 0; }
.mk-side-i { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; padding: 5px 8px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
.mk-side-i:hover { background: var(--inset); }
.mk-side-i.active { background: color-mix(in srgb, var(--gold-text) 22%, transparent); border-color: var(--gold-text); font-weight: 700; }
.mk-side-i i { margin-left: auto; font-style: normal; font-size: var(--fs-min); padding: 0 6px; border-radius: 99px; background: var(--inset); color: var(--muted-t); }
.mk-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--c); border: 1px solid color-mix(in srgb, var(--c) 60%, var(--x-000000)); flex: none; }
.mk-types { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.mk-types .mk-side-i { padding: 4px 6px; font-size: var(--fs-min); }
.mk-side .mk-range { display: flex; align-items: center; gap: 4px; padding: 2px 4px; font-size: var(--fs-min); color: var(--muted-t); }
.mk-side .mk-range input { width: 52px; font: inherit; font-size: 12px; padding: 3px 5px; border-radius: 8px; background: var(--panel-t); color: inherit; border: 1px solid var(--edge-t); }
.mk-clear { margin-top: 8px; }
.mk-main .mk-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mk-main .mk-tools input { flex: 1; }
.mk-main .mk-count { margin-left: 0; white-space: nowrap; }
@media (max-width: 760px) { .mk-layout { grid-template-columns: 1fr; } .mk-side { position: static; max-height: 260px; } }

/* ---------- Time e Depósito numa janela (town-ui.js → openTeamManager, 2026-10-18) ---------- */
.tm-back { position: fixed; inset: 0; z-index: 870; background: color-mix(in srgb, var(--c-bg) 50%, transparent); display: grid; place-items: center; padding: 16px; }
.tm-back.hidden { display: none; }
.tm-box { width: min(720px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  background: var(--panel-t); color: var(--text-t); border: 2px solid var(--edge-2); box-shadow: 0 18px 50px color-mix(in srgb, var(--x-000000) 35%, transparent); }
.tm-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--inset); border-bottom: 1px solid var(--edge-t); }
.tm-head h3 { margin: 0; font-family: var(--display); font-weight: normal; font-size: 18px; letter-spacing: .5px; text-transform: uppercase; }
.tm-root { overflow-y: auto; padding: 10px 14px 16px; }
.tm-root .depot-grid { max-height: 320px; }

/* ---------- dock de serviços da cidade (2026-10-18): medalhão na cor do serviço com o Pokémon dele, faixa de cor no topo,
   brilho na cor ao passar o mouse e o serviço aberto aceso. Os Pokémon continuam os do pacote (drawPortrait). ---------- */
.town-center .dock { gap: 8px; }
.town-center .dock-tile { height: 90px !important; padding: 8px 5px 6px; gap: 4px; justify-content: flex-start; border-radius: 14px; isolation: isolate;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 18%, var(--panel-t)) 0%, var(--panel-t) 72%);
  border: 1px solid color-mix(in srgb, var(--c) 30%, var(--edge-t));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-ink-light) 6%, transparent), 0 2px 6px color-mix(in srgb, var(--x-000000) 22%, transparent); transition: transform .15s, box-shadow .15s, border-color .15s; }
.town-center .dock-tile::before { content: ''; position: absolute; left: 14%; right: 14%; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--c); opacity: .7; }
.town-center .dock-tile:hover { transform: translateY(-2px); border-color: var(--c); box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 32%, transparent); }
.town-center .dock-tile.active { border-color: var(--c);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 45%, var(--panel-t)) 0%, color-mix(in srgb, var(--c) 12%, var(--panel-t)) 100%);
  box-shadow: 0 0 0 1px var(--c), 0 0 18px color-mix(in srgb, var(--c) 45%, transparent); }
.town-center .dock-tile.active::before { left: 0; right: 0; opacity: 1; border-radius: 14px 14px 0 0; }
.town-center .dock-ico { position: relative; width: 46px; height: 46px; border-radius: 50%; opacity: 1 !important;
  background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--c) 30%, var(--c-ink-light)) 0%, var(--c) 48%, color-mix(in srgb, var(--c) 55%, var(--x-000000)) 100%);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--x-000000) 25%, transparent), inset 0 2px 0 color-mix(in srgb, var(--c-ink-light) 35%, transparent), 0 0 0 2px color-mix(in srgb, var(--c) 40%, transparent), 0 3px 6px color-mix(in srgb, var(--x-000000) 35%, transparent); }
.town-center .dock-ico canvas { width: 40px; height: 40px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 color-mix(in srgb, var(--x-000000) 40%, transparent)); transition: transform .15s; }
.town-center .dock-tile:hover .dock-ico canvas, .town-center .dock-tile.active .dock-ico canvas { transform: scale(1.12) translateY(-2px); }
.town-center .dock-tile b { font: 600 12px/1.15 var(--font); letter-spacing: .1px; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; } /* nome em até 2 linhas, sem "…" */
.town-center .dock-tile kbd { top: 4px; right: 5px; min-width: 15px; padding: 0 4px; border-radius: 5px; font-size: var(--fs-min); line-height: 15px; text-align: center;
  color: var(--c-ink-light); background: color-mix(in srgb, var(--x-000000) 40%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
@media (max-width: 1240px) { .town-center .dock-tile { height: 64px !important; } .town-center .dock-ico { width: 40px; height: 40px; } .town-center .dock-ico canvas { width: 36px; height: 36px; } }
@media (max-width: 980px) { .town-center .dock-tile { height: 60px !important; } }
.town-center .dock-tile.has-reward::after { right: auto; left: 6px; } /* selo de prêmio do Oak: do lado oposto ao atalho */
/* blocos estreitos (telas médias): nome menor para caber inteiro em 2 linhas */
.town-center .dock-tile { container-type: inline-size; }
@container (max-width: 76px) { .town-center .dock-tile b { font-size: var(--fs-min); letter-spacing: 0; } }

/* ---------- Aviso flutuante no topo (src/ui/toast.js, 2026-10-18) ---------- */
.toasts { position: fixed; top: 56px; left: 50%; transform: translateX(-50%); z-index: 950; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; width: min(560px, calc(100vw - 32px)); }
.toast { pointer-events: auto; cursor: pointer; padding: 10px 16px; border-radius: 12px; font-size: 13px; font-weight: 600; line-height: 1.4; text-align: center;
  color: var(--text-t); background: var(--panel-t); border: 2px solid var(--edge-2); border-left: 6px solid var(--c-info); box-shadow: 0 10px 28px color-mix(in srgb, var(--x-000000) 25%, transparent);
  animation: toast-in .25s ease-out; transition: opacity .4s, transform .4s; }
.toast-warn { border-left-color: var(--c-warn); } .toast-ok { border-left-color: var(--c-ok); }
.toast .ui-ico { width: 16px; height: 16px; vertical-align: -3px; border: 0; }
.toast.out { opacity: 0; transform: translateY(-8px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ---------- celular (≤ 480 px), braço de melhorias 2026-10-20 ---------- */
/* M1: 16 ícones de 22 px viravam uma linha impossível de tocar. Ficam Mochila, Pokédex, Loja e Store (44 px) e o botão "Mais";
   "Mais" abre os outros em lista de 2 colunas com o nome, 48 px de altura cada. */
.tb-more { display: none; }
@media (max-width: 480px) {
  .tb-btns { gap: 6px; }
  .tb-btns .tb-btn { display: none; }
  .tb-btns #btn-pokemon-bag, .tb-btns #btn-dex, .tb-btns #btn-shop, .tb-btns #btn-store, .tb-btns .tb-more { display: inline-flex; width: auto; flex: 1 1 0; max-width: none; height: 44px; justify-content: center; }
  .tb-btns .tb-more { font-size: 18px; }
  .tb-btns.more-open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .tb-btns.more-open .tb-btn { display: inline-flex; width: auto; max-width: none; height: 48px; padding: 0 10px; justify-content: flex-start; gap: 8px; font-size: 13px; }
  .tb-btns.more-open .tb-btn .tb-lbl { display: inline; }
  .tb-btns.more-open .tb-btn.hidden { display: none; }
  .tb-btns.more-open .tb-sec .tb-count { position: static; margin-left: auto; }
  .tb-btns.more-open .tb-more { grid-column: 1 / -1; justify-content: center; }
  .tb-btns.more-open .tb-sound::after { content: 'Som'; font-size: 13px; }
  /* M2: os serviços da cidade apareciam como bolinhas numeradas (1–8, C, T) sem nome: 3 por linha, com o nome embaixo */
  .dock { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .dock-tile { min-height: 92px; padding: 8px 4px 6px; grid-template-rows: auto auto; }
  .dock-tile b { display: -webkit-box; font-size: var(--fs-min); line-height: 1.2; }
  .dock-tile kbd { display: none; }
}
/* M6: as ferramentas da caçada eram 6 ícones sem nome no celular: nome de 10 px embaixo de cada ícone */
@media (max-width: 760px) {
  .hunt-layout .arena-tools .at-lbl { display: block; font-size: var(--fs-min); line-height: 1; }
  .hunt-layout .arena-tools .btn { flex-direction: column; gap: 3px; padding: 5px 2px; min-height: 44px; }
}

/* ---------- Marcas de Caça (src/core/marks.js, src/ui/mark-badge.js, 2026-10-20) ---------- */
.mark-seal { position: relative; display: inline-flex; align-items: center; vertical-align: -3px; line-height: 0; }
.mark-seal img { image-rendering: auto; filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--x-000000) 35%, transparent)); }
.mark-seal b { position: absolute; right: -6px; bottom: -4px; font: 700 12px/1 var(--font); color: var(--c-ink-light); background: var(--x-0f3f66); border-radius: 5px; padding: 1px 2px; border: 1px solid var(--rar-comum); }
.mark-line { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.mark-line .mark-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mark-bar { flex: 0 0 56px; height: 6px; border-radius: 3px; background: var(--inset, var(--c-panel)); border: 1px solid color-mix(in srgb, var(--c-ink-light) 14%, transparent); overflow: hidden; display: inline-block; box-sizing: border-box; }
.mark-bar > i { display: block; height: 100%; background: var(--x-c97a3a); }
.mark-bar.mark-none > i { background: var(--c-text-3); } .mark-bar.mark-prata > i { background: var(--type-steel); } .mark-bar.mark-ouro > i { background: var(--type-ground); } .mark-bar.mark-diamante > i { background: var(--type-ice); }
/* linha da caçada, embaixo do XP/h do Treinador (index.html → #hunt-mark) */
.pc-mark { grid-column: 1 / -1; margin-top: -2px; font-size: var(--fs-min); font-weight: 600; color: var(--text-2, var(--c-text)); display: flex; justify-content: center; }
.pc-mark[hidden] { display: none; }
.pc-mark .mark-line b { color: var(--gold-text, var(--c-shiny)); }
/* painel "Bônus ativos": a Marca da hunt atual (ícone = selo, texto dos bônus na direita) */
.bonus-ico .mark-seal { vertical-align: 0; }
/* registro da cena ao subir de grau */
.sl-mark { border-left-color: var(--type-ice); } .sl-mark b { color: var(--x-bff0ff); }
/* chat: anúncio de Marca Ouro/Diamante */
.chat-mark b { color: var(--type-ice); } .chat-mark .mark-seal { margin-right: 4px; }
/* Pokédex: coluna "Marca" na ficha e aba Marcas */
.dex-counters .dx-mark { white-space: nowrap; } .dex-counters .dx-mark .mark-seal { margin-right: 3px; }
.dex-marks-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 8px; }
.dex-marks-totals { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 8px; font-size: 12px; }
.dex-marks-totals span { display: inline-flex; align-items: center; gap: 4px; }
.dex-mark-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--edge-t, var(--c-edge)); cursor: pointer; }
.dex-mark-row:hover { background: color-mix(in srgb, var(--accent, var(--type-ground)) 10%, transparent); }
.dex-mark-row canvas { width: 34px; height: 34px; image-rendering: pixelated; }
.dex-mark-row .dm-name { display: flex; flex-direction: column; min-width: 0; }
.dex-mark-row .dm-name b { display: flex; align-items: center; gap: 5px; }
.dex-mark-row .dm-name small { color: var(--muted-t); }
.dex-mark-row .dm-num { text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; }
.dex-mark-row .dm-num b { display: block; }
.dex-mark-row .mark-bar { flex-basis: 80px; width: 80px; margin-top: 3px; }
/* Mapa global: selo na linha e no cartão */
.wm-row-name .mark-seal { margin-left: 4px; vertical-align: -4px; }
.wm-mark { display: inline-flex; align-items: center; gap: 6px; }
.dex-head.dx-one { grid-template-columns: 1fr; } /* cabeçalho sem sprite (aba Marcas): texto na largura toda */

/* ---------- tela enxuta (2026-11-03, pedido do dono do jogo): menos coisa repetida na caçada ---------- */
/* Mais ▾ também no computador: os menus de uso eventual (.tb-x) ficam numa janelinha embaixo do botão (app.js → mountMoreMenu) */
.tb-btns { position: relative; }
.tb-more { display: inline-flex; position: relative; }
.tb-more-pop { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 300; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 6px; padding: 8px;
  border-radius: var(--r-md); background: var(--c-panel); border: 1px solid var(--c-edge); box-shadow: 0 8px 24px color-mix(in srgb, var(--c-void) 70%, transparent); }
.tb-btns.more-open .tb-more-pop { display: grid; }
.topbar .tb-btns .tb-more-pop .tb-btn { display: inline-flex; flex-direction: row; width: auto; min-width: 0; max-width: none; height: 40px; padding: 0 10px; justify-content: flex-start; align-items: center; gap: 8px; margin: 0; background: var(--c-panel-2); }
.tb-more-pop .tb-btn::before { display: none; }
.topbar .tb-btns .tb-more-pop .tb-btn .tb-lbl { display: inline; font-size: 13px; }
.tb-more-pop .tb-btn.hidden { display: none; }
.tb-more-pop .tb-news-ico { width: 20px; text-align: center; font-weight: 800; color: var(--accent); }
.tb-more-dot { display: none; position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--rar-mitico); box-shadow: 0 0 6px var(--rar-mitico); }
.tb-more.alert .tb-more-dot { display: block; }
@media (max-width: 480px) { .tb-btns.more-open .tb-more-pop { display: contents; } }
/* Stamina Offline: só o ícone e o tempo; Trocar personagem foi para as Configurações */
.pc-stamina .pc-st-lbl, .pc-stamina .pc-st-bar { display: none; }
#btn-logout.pc-switch { display: none; }
/* Marca da hunt em Bônus ativos, com a barrinha até a próxima */
.bonus-mark-prog { display: flex; align-items: center; gap: 6px; font-size: var(--fs-min); color: var(--muted-t); }
.bonus-mark-prog .mark-bar { flex: 1; }
/* Missões: fechado vira um selo pequeno no canto do mapa */
.arena-wrap .qg-panel.qg-closed { width: auto !important; padding: 3px 8px; }
.qg-toggle { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: 700; cursor: pointer; text-align: left; width: 100%; display: flex; gap: 6px; align-items: center; color: var(--type-electric); }
.qg-toggle .qg-arrow { margin-left: auto; opacity: .7; }
.qg-panel.qg-npc.qg-closed { box-shadow: 0 0 0 1px var(--accent), 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent); }

/* ícones polidos do menu (menu-icons.js, 2026-11-04) */
.tb-btn svg.ui-ico, .tb-icon svg.ui-ico { width: 24px; height: 24px; flex: none; filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--x-000000) 45%, transparent)); }