/* PokeHunt — palco 1600×900 e layout fixo do redesenho (reports/ui/design-spec.md §4–5). Carrega por último: manda no layout.
   Só var(--…) de tokens.css. Zonas: topo 48 · esquerda 280 · viewport 1008×616 + barra de ação 48 · direita 280 · chat 156 no rodapé. */

/* ---------- palco: o body é o palco; stage-boot.js aplica a escala ---------- */
html { background: var(--c-void); overflow: hidden; height: 100%; }
body { position: absolute !important; left: 0; top: 0; width: var(--stage-w) !important; min-width: var(--stage-w) !important; max-width: none !important;
  height: var(--stage-h) !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; overflow: clip !important; /* clip: nada rola o palco (foco, scrollIntoView, gaveta escondida embaixo) */
  transform-origin: 0 0; background: var(--c-bg) radial-gradient(ellipse at 50% 0%, var(--c-panel-2), transparent 60%);
  color: var(--c-text); font: var(--fw-normal) var(--fs-md)/var(--lh) var(--font-ui); }

/* ---------- topo ---------- */
.topbar { position: absolute !important; left: 0; top: 0; width: 100%; height: var(--top-h) !important; min-height: 0 !important; padding: 0 var(--sp-3) !important;
  background: linear-gradient(var(--c-panel-2), var(--c-panel)) !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: inset 0 -1px 0 var(--c-edge-2), 0 1px 0 var(--c-bg), 0 2px 0 var(--c-gold-3) !important; z-index: 30; }
.topbar .brand-name { font: 700 var(--fs-xl)/1 var(--font-title) !important; letter-spacing: .12em; color: var(--c-gold-2) !important; }

/* ---------- área de jogo: cidade e caçada no mesmo esqueleto ---------- */
.hunt-layout, .town-layout { position: absolute !important; left: var(--gap); top: var(--play-top); width: calc(var(--stage-w) - var(--gap) * 2);
  height: calc(var(--play-bottom) - var(--play-top)) !important; margin: 0 !important; padding: 0 !important; max-width: none !important;
  display: grid !important; grid-template-columns: var(--col-l) var(--vp-w) var(--col-r) !important; grid-template-rows: 100% !important; gap: var(--gap) !important; }
.hunt-layout.hidden, .town-layout.hidden { display: none !important; }
.hunt-left, .town-left, .hunt-right, .town-right { min-width: 0; min-height: 0; height: 100%; overflow: hidden auto; display: flex; flex-direction: column; gap: var(--gap);
  position: static !important; width: auto !important; }
.hunt-center, .town-center { min-width: 0; height: 100%; display: flex !important; flex-direction: column; gap: var(--gap); position: static !important; }

/* viewport 18×11 tiles (1008×616) */
.hunt-center .arena-panel { display: flex !important; flex-direction: column; gap: var(--gap); padding: 0 !important; margin: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important; flex: none; }
.hunt-center .arena-wrap, .town-center .town-stage { width: var(--vp-w) !important; height: var(--vp-h) !important; min-height: 0 !important; max-height: none !important;
  aspect-ratio: auto !important; flex: none; margin: 0 !important; border-radius: 0 !important; box-shadow: var(--frame) !important; background: var(--c-inset); position: relative; overflow: hidden; }
.town-center .town-wrap { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-height: none !important; margin: 0 !important; border-radius: 0 !important; }
#arena, #town { display: block; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; aspect-ratio: auto !important; border-radius: 0 !important; }

/* barra de ação (48) logo abaixo do viewport: controles da caçada / serviços da cidade */
.hunt-center .arena-controls, .town-center .town-nav { height: var(--action-h) !important; min-height: 0 !important; margin: 0 !important; padding: 0 var(--sp-2) !important;
  display: flex !important; align-items: center; gap: var(--sp-2); flex: none; overflow: hidden;
  background: var(--c-panel) !important; border: 0 !important; border-radius: 0 !important; box-shadow: var(--frame), var(--bevel) !important; position: static !important; }
#hud-reward { display: none !important; }

/* ---------- chat: rodapé fixo, mesma altura em toda tela ---------- */
#console-panel { position: fixed !important; left: var(--gap) !important; top: calc(var(--stage-h) - var(--chat-h) - var(--gap)) !important;
  width: calc(var(--stage-w) - var(--gap) * 2) !important; height: var(--chat-h) !important; min-height: 0 !important; max-height: none !important; flex: none !important;
  margin: 0 !important; border-radius: 0 !important; background: var(--c-panel) !important; border: 0 !important; box-shadow: var(--frame) !important; z-index: 20; }
#console-panel .console-resize { display: none !important; }
body[data-view="login"] #console-panel { display: none !important; }

/* ---------- painéis das colunas: moldura dupla dourada ---------- */
.hunt-left > .panel, .hunt-right > .panel, .town-left > .panel, .town-right > .panel, .card-right, #player-card, #mon-panel, .town-side {
  border: 0 !important; border-radius: 0 !important; background: var(--c-panel) !important; box-shadow: var(--frame), var(--bevel) !important; margin: 0 !important; }
.card-right { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#mon-panel { flex: 1; min-height: 0; overflow: hidden auto; }
.town-left .town-side { flex: 1; min-height: 0; overflow: hidden auto; position: static !important; width: auto !important; }
.panel-title, .card-head b, .svc-title, .modal-title > span:first-child { font-family: var(--font-title) !important; letter-spacing: .08em; color: var(--c-gold-2); }

/* ---------- login: também no palco ---------- */
#login-view { position: absolute !important; inset: 0; overflow: hidden auto; }
#login-bg { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; }
.login-discord { position: absolute !important; }

/* tudo que era "tela inteira" (position: fixed) agora é o palco inteiro — o body é o bloco de referência por causa do transform */

/* ---------- janelas (window-manager.js) ---------- */
/* o fundo cobre só a área de jogo: menus e chat continuam à vista; a ordem (z-index) vem do gerenciador */
.wm-back { position: fixed !important; inset: auto !important; left: 0 !important; top: var(--play-top) !important; width: var(--stage-w) !important;
  height: calc(var(--play-bottom) - var(--play-top)) !important; display: block !important; padding: 0 !important; margin: 0 !important;
  background: var(--c-scrim) !important; backdrop-filter: none !important; animation: none !important; overflow: visible !important; }
.wm-back.hidden, .wm-back.wm-min { display: none !important; }
.wm-back.wm-modeless { background: transparent !important; pointer-events: none; }
.wm-win { position: absolute !important; margin: 0 !important; pointer-events: auto; transform: none !important; animation: wm-open .22s cubic-bezier(.2, 1.3, .4, 1) both !important;
  max-height: calc(var(--play-bottom) - var(--play-top) - var(--gap) * 2) !important; max-width: calc(var(--stage-w) - var(--gap) * 2) !important;
  border: 0 !important; border-radius: 0 !important; background: var(--c-panel) !important; box-shadow: var(--frame), var(--shadow-win) !important; }
.wm-win.wm-top { box-shadow: var(--frame-gold), var(--shadow-win) !important; }
.wm-win.wm-dragging { opacity: .92; }
/* abrir janela (2026-11-03, pedido do dono: "janelas mais polidas, com efeitos"): pop curto; sem movimento para quem pede menos animação */
@keyframes wm-open { from { opacity: 0; scale: .94; translate: 0 10px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .wm-win { animation: none !important; } }
.wm-handle { cursor: move; user-select: none; background: linear-gradient(var(--c-panel-3), var(--c-panel-2)) !important; border-bottom: 1px solid var(--c-gold-3) !important; }
.wm-handle :is(h2, h3, .svc-title, #bp-title, #tm-title), .wm-handle > span:first-child { font-family: var(--font-title) !important; letter-spacing: .08em; color: var(--c-gold-2) !important; text-transform: uppercase; }
.wm-min-btn { flex: none; width: 28px; height: 28px; margin-left: auto; border: 0; cursor: pointer; background: var(--c-inset); color: var(--c-text-2);
  box-shadow: inset 0 0 0 1px var(--c-edge-2); font: var(--fw-bold) var(--fs-lg)/1 var(--font-ui); }
.wm-min-btn + * { margin-left: 6px !important; }
.wm-min-btn:hover { color: var(--c-gold-2); }
/* bandeja das janelas minimizadas: embaixo da área de jogo, sobre a barra de ação, à esquerda do viewport */
.wm-tray { position: fixed; left: calc(var(--gap) * 2 + var(--col-l)); top: calc(var(--play-bottom) - var(--action-h) - var(--gap) * 2 - 30px); display: flex; gap: var(--gap); z-index: 850; }
.wm-tray[hidden] { display: none; }
.wm-tray-btn { box-shadow: var(--frame) !important; background: var(--c-panel-2) !important; color: var(--c-gold-2) !important; }

/* ---------- barra de menus: todos os botões com ícone em cima e nome embaixo (pedido do dono, 2026-10-28) ---------- */
.topbar { gap: var(--sp-2) !important; }
.topbar .brand { flex: none; display: flex; align-items: center; gap: 6px; margin: 0 !important; }
.topbar .brand-name { font-size: var(--fs-lg) !important; }
.topbar .topbar-actions { flex: 1; min-width: 0; display: flex !important; align-items: center; gap: var(--sp-2); flex-wrap: nowrap !important; }
.topbar .mode-seg { flex: none; }
.topbar .mode-btn { height: 30px !important; padding: 0 var(--sp-3) !important; font-size: var(--fs-sm) !important; white-space: nowrap; }
.topbar .tb-spacer { flex: 1 1 0; min-width: 0; }
.topbar .tb-btns { display: flex !important; flex: none !important; flex-wrap: nowrap !important; gap: 2px !important; align-items: stretch; }
.topbar .tb-btns .tb-btn, .topbar .tb-icon { display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 1px !important;
  width: auto !important; min-width: 44px; max-width: none !important; height: 46px !important; padding: 2px 7px !important; margin: 0 !important;
  border: 0 !important; border-radius: var(--r-1) !important; background: transparent !important; box-shadow: none !important; color: var(--c-text-2) !important; position: relative; }
.topbar .tb-btns .tb-btn:hover, .topbar .tb-icon:hover { background: var(--c-panel-3) !important; color: var(--c-gold-2) !important; box-shadow: inset 0 0 0 1px var(--c-edge-2) !important; }
.topbar .tb-btn .ui-ico, .topbar .tb-btn .bag-ico, .topbar .tb-btn .pk-ico, .topbar .tb-icon .pk-ico { width: 24px !important; height: 24px !important; margin: 0 !important; }
.topbar .tb-btn .tb-lbl, .topbar .tb-icon .tb-lbl { display: block !important; font: var(--fw-bold) var(--fs-sm)/15px var(--font-ui) !important; white-space: nowrap; letter-spacing: 0; }
.topbar .tb-btn:not(.tb-sec) + .tb-sec { margin-left: 0 !important; }
.topbar .tb-btn:not(.tb-sec) + .tb-sec::before { display: none !important; }
/* contadores (Pokédex, Passe, Cartas): selinho no canto do ícone */
.topbar .tb-count { position: absolute !important; top: 0; right: 2px; margin: 0 !important; min-width: 18px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--c-gold-3) !important; color: var(--c-text) !important; font: var(--fw-bold) var(--fs-min)/16px var(--font-ui) !important; text-align: center; }
.topbar #dex-count { display: none !important; }   /* "2/597" fica no título da Pokédex */
.topbar .tb-count:empty, .topbar .tb-count.zero { display: none !important; }
.topbar .tb-btns .tb-btn.hidden { display: none !important; } /* botões escondidos (Streamers sem parceiro); o "Mais" aparece também no palco desde a tela enxuta (2026-11-03) */
.topbar .tb-sound { min-width: 36px; }

/* ---------- serviços da cidade (dock) na barra de ação: botões deitados que cabem nos 48 px (pedido do dono, 2026-10-28) ---------- */
.town-center .town-nav.dock { gap: 4px !important; justify-content: stretch !important; align-items: center !important; left: auto !important; right: auto !important; transform: none !important; pointer-events: auto; }
.town-center .town-nav .dock-tile { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; height: 40px !important; min-height: 0 !important;
  display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 4px !important;
  padding: 0 4px !important; margin: 0 !important; border: 0 !important; border-radius: var(--r-1) !important; overflow: hidden; position: relative; isolation: auto;
  background: var(--c-inset) !important; box-shadow: inset 0 0 0 1px var(--c-edge-2) !important; color: var(--c-text-2) !important; transform: none !important; }
.town-center .town-nav .dock-tile::before { display: none !important; }
.town-center .town-nav .dock-tile:hover { background: var(--c-panel-3) !important; color: var(--c-gold-2) !important; }
.town-center .town-nav .dock-tile.active { background: var(--c-panel-2) !important; color: var(--c-gold-2) !important; box-shadow: inset 0 0 0 1px var(--c-gold), 0 0 6px var(--c-glow) !important; }
.town-center .town-nav .dock-ico { flex: none; width: 24px !important; height: 24px !important; border-radius: 50% !important; margin: 0 !important; display: grid; place-items: center; }
.town-center .town-nav .dock-ico canvas { width: 24px !important; height: 24px !important; transform: none !important; }
.town-center .town-nav .dock-tile b { display: block !important; margin: 0 !important; min-width: 0; font: var(--fw-bold) var(--fs-min)/1.15 var(--font-ui) !important; letter-spacing: 0;
  text-align: left !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
.town-center .town-nav .dock-tile small { display: none !important; }
.town-center .town-nav .dock-tile kbd { position: absolute !important; left: 2px !important; top: 1px !important; right: auto !important; min-width: 0; padding: 0 2px !important;
  background: none !important; border: 0 !important; color: var(--c-text-3) !important; font: var(--fw-bold) var(--fs-min)/1 var(--font-ui) !important; }

/* ---------- Depósito (town-ui.js → teamHtml; pedido do dono 2026-10-28) ---------- */
.tm-back .tm-box { width: 1128px !important; height: 640px !important; display: flex !important; flex-direction: column; padding: 0 !important; overflow: hidden !important; }
.tm-box .tm-head { display: flex; align-items: center; gap: var(--sp-2); height: 40px; flex: none; padding: 0 var(--sp-2) 0 var(--sp-3) !important; margin: 0 !important; }
.tm-box .tm-head h3 { margin: 0; font: 700 var(--fs-xl)/1 var(--font-title) !important; }
.tm-box .tm-root { flex: 1; min-height: 0; overflow: hidden !important; padding: 0 !important; }
.dp { height: 100%; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); box-sizing: border-box; }
.dp-top { display: flex; align-items: center; gap: var(--sp-3); }
.dp-top input { flex: 1; height: 36px; padding: 0 var(--sp-3); border: 0; border-radius: 0; background: var(--c-inset); color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-edge-2); font: var(--fs-md) var(--font-ui); }
.dp-top input:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--c-gold); }
.dp-count { color: var(--c-text-3); font-size: var(--fs-sm); white-space: nowrap; }
.dp-filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.dp-filters label { display: grid; gap: 3px; color: var(--c-text-3); font: var(--fw-bold) var(--fs-min) var(--font-ui); }
.dp-filters :is(select, input) { height: 32px; padding: 0 var(--sp-2); border: 0; border-radius: 0; background: var(--c-inset); color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-edge-2); font: var(--fs-sm) var(--font-ui); }
.dp-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.dp-col { min-height: 0; display: flex; flex-direction: column; background: var(--c-inset); box-shadow: inset 0 0 0 1px var(--c-edge); }
.dp-h { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-edge);
  font: 700 var(--fs-md)/1 var(--font-title); letter-spacing: .1em; text-transform: uppercase; color: var(--c-gold-2); }
.dp-h span { font: var(--fw-bold) var(--fs-sm) var(--font-ui); color: var(--c-text); letter-spacing: 0; }
.dp-h small { margin-left: auto; font: var(--fs-min) var(--font-ui); color: var(--c-text-3); letter-spacing: 0; text-transform: none; }
.tm-box .dp-list { flex: 1; min-height: 0; max-height: none !important; overflow: hidden auto; display: flex !important; flex-direction: column; gap: 6px; padding: 6px; grid-template-columns: none !important; }
.tm-box .slot.dp-card { height: auto !important; min-height: 0; display: block !important; flex: none; padding: 6px var(--sp-2) !important; border: 0 !important; border-radius: 0 !important; outline: 0 !important; cursor: pointer;
  background: var(--c-panel-2) !important; box-shadow: inset 0 0 0 1px var(--c-edge-2) !important; color: var(--c-text); text-align: left; }
.tm-box .slot.dp-card:hover { background: var(--c-panel-3) !important; }
.tm-box .slot.dp-card.selected { box-shadow: inset 0 0 0 1px var(--c-gold), 0 0 8px var(--c-glow) !important; cursor: default; }
.tm-box .slot.dp-card.empty { display: grid !important; place-items: center; min-height: 40px; color: var(--c-text-3); font-size: var(--fs-min); background: transparent !important; box-shadow: inset 0 0 0 1px var(--c-edge) !important; cursor: default; }
.tm-box .slot.dp-card canvas { position: static !important; transform: none !important; width: 48px !important; height: 48px !important; }
.dp-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--sp-3); align-items: center; }
.dp-main { min-width: 0; display: grid; gap: 3px; }
.dp-name { font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-name b { color: var(--c-text); }
.dp-lv { color: var(--c-gold-2); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.dp-types, .dp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dp-power { margin-left: 4px; color: var(--c-text-3); font-size: var(--fs-min); }
.tm-box .dp-tags .slot-held, .tm-box .dp-tags .capture-ball { position: static !important; }
.dp-xp { height: 4px !important; }
.dp-detail { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--c-edge); cursor: default; }
.dp-detail .mon-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dp-detail .iv-line { display: flex; flex-wrap: wrap; gap: var(--sp-3); color: var(--c-text-3); font-size: var(--fs-min); }
.dp-detail .iv-line b { color: var(--c-text); }
.dp-pager { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px; border-top: 1px solid var(--c-edge); color: var(--c-text-3); font-size: var(--fs-sm); }
.dp-pager b { color: var(--c-gold-2); }
.dp > #town-msg { margin: 0; min-height: 0; }
.dock-ico img { width: 24px; height: 24px; image-rendering: pixelated; }
.dp-tags .chip:not(.rarity):not(.forge-accent) { background: var(--c-inset) !important; color: var(--c-text-2) !important; box-shadow: inset 0 0 0 1px var(--c-edge-2) !important; border: 0 !important; }
.dp-tags .ball-unknown { display: none !important; }

/* ---------- caçada: golpes na barra de ação (fora do mapa) ---------- */
.arena-controls .skill-bar { position: static !important; margin: 0 auto !important; max-height: none !important; display: flex !important; flex-direction: row !important;
  flex-wrap: nowrap !important; gap: 4px !important; align-items: center; inset: auto !important; }
.arena-controls .skill-bar .skill, .arena-controls .skill-bar .skill .type-emblem { width: 36px !important; height: 36px !important; }
.arena-controls .skill .sk-t { font: var(--fw-bold) var(--fs-sm) var(--font-ui) !important; }
.arena-controls .tb-spacer { display: none !important; }

/* ---------- ferramentas da caçada (hunt-tools-ui.js): ícones ao lado do + − e uma janelinha pelo gerenciador (2026-10-29) ---------- */
.map-zoom .mz-sep { height: 4px; }
.map-zoom .mz-tool { display: flex; align-items: center; justify-content: center; }
.map-zoom .mz-tool .ui-ico { width: 20px; height: 20px; }
.map-zoom .mz-tool.active { border-color: var(--c-gold) !important; box-shadow: inset 0 0 0 1px var(--c-gold), 0 0 8px var(--c-gold-3); }
.ht-back.wm-back { pointer-events: none; }
.ht-float.wm-win { width: 360px !important; max-height: 520px !important; display: flex !important; flex-direction: column; }
.ht-float .ht-head { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 0 0 var(--sp-3) !important; }
.ht-float .ht-title { margin: 0; font: var(--fw-bold) var(--fs-sm) var(--font-ui); flex: 1; }
.ht-float .ht-close { width: 28px; height: 28px; margin: 0; padding: 0; border: 0; background: var(--c-inset); box-shadow: inset 0 0 0 1px var(--c-edge-2); color: var(--c-text-2); font: var(--fw-bold) var(--fs-md)/1 var(--font-ui); cursor: pointer; }
.ht-float .ht-close:hover { color: var(--c-gold-2); }
.ht-float .ht-body { flex: 1; min-height: 0; overflow: hidden auto; padding: var(--sp-2) var(--sp-3); }

/* ---------- topo do mapa: zonas que nunca se cruzam (design-spec §5.3) ---------- */
/* pilha de avisos: centro do viewport, 52 px abaixo do topo — anúncios, dica, drop raro e toasts, um embaixo do outro */
#notify-stack { position: fixed; left: calc(var(--stage-w) / 2 - 240px); top: calc(var(--play-top) + 52px); width: 480px; z-index: var(--z-notify);
  display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
#notify-stack > * { pointer-events: auto; }
#notify-stack .announce-layer, #notify-stack .toasts, #notify-stack .rare-banners { position: static !important; inset: auto !important; transform: none !important; width: 100% !important;
  margin: 0 !important; display: flex; flex-direction: column; gap: 6px; z-index: auto !important; }
#notify-stack .announce-layer:empty, #notify-stack .toasts:empty, #notify-stack .rare-banners:empty { display: none; }
#notify-stack .hud-hint { position: static !important; inset: auto !important; transform: none !important; max-width: none !important; width: 100%; margin: 0 !important; box-sizing: border-box;
  padding: 6px var(--sp-3) !important; background: var(--c-over) !important; color: var(--c-text) !important; border: 0 !important; border-radius: 0 !important; box-shadow: var(--frame) !important;
  font: var(--fs-sm)/1.35 var(--font-ui) !important; text-align: left; }
#notify-stack .hud-hint:empty, #notify-stack .hud-hint.hidden { display: none !important; }
body:not([data-view="hunt"]) #notify-stack .hud-hint, body:not([data-view="hunt"]) #notify-stack .rare-banners { display: none !important; }
body[data-view="login"] #notify-stack { display: none; }
/* nome do mapa: canto de cima à esquerda; barra do boss no meio; tempo da ilha à direita (lado a lado) */
.arena-wrap .hud-map { top: 8px !important; left: 8px !important; bottom: auto !important; right: auto !important; }
.arena-wrap .boss-bar { top: 8px !important; left: 50% !important; width: 440px !important; transform: translateX(-50%) !important; }
.arena-wrap .isl-hud { top: 8px !important; left: auto !important; right: 52px !important; transform: none !important; }

/* ---------- combate dirigido, missões e Liga (cópia da Liga juntada em 2026-10-28) no layout novo ---------- */
.arena-controls .dir-hud { position: static !important; transform: none !important; inset: auto !important; display: flex; flex-wrap: nowrap !important; gap: 4px; align-items: center; }
.arena-controls .dir-help { display: none !important; }   /* as teclas do Manual aparecem no chat ao ligar */
.arena-controls .dir-switch { height: 32px; border-radius: var(--r-1) !important; border: 0 !important; background: var(--c-inset) !important; box-shadow: inset 0 0 0 1px var(--c-edge-2);
  color: var(--c-text-3) !important; font: var(--fw-bold) var(--fs-sm) var(--font-ui) !important; }
.arena-controls .dir-switch > span { border-radius: var(--r-1) !important; }
.arena-controls .dir-hud:not(.on) .dir-s-idle, .arena-controls .dir-hud.on .dir-s-man { background: linear-gradient(var(--c-gold-2), var(--c-gold)) !important; color: var(--c-ink) !important; }
.arena-controls .dir-switch kbd { border: 0 !important; color: var(--c-text-3) !important; font: var(--fw-bold) var(--fs-min) var(--font-ui) !important; }
/* painel de missões: canto de cima à direita do mapa; o tempo da ilha fica à esquerda dele */
.arena-wrap .qg-panel { left: auto !important; right: 8px !important; top: 8px !important; width: 240px !important; border-radius: 0 !important; background: var(--c-over) !important;
  box-shadow: inset 0 0 0 1px var(--c-edge-2) !important; color: var(--c-text) !important; font-size: var(--fs-min) !important; }
.arena-wrap .qg-h { color: var(--c-gold-2) !important; font-family: var(--font-title); letter-spacing: .06em; }
.arena-wrap .qg-small { color: var(--c-text-3) !important; font-size: var(--fs-min) !important; }
.arena-wrap .isl-hud { right: 256px !important; }
.arena-wrap .dir-boss { top: 40px !important; font-size: var(--fs-min) !important; }
.arena-wrap .qg-dialog { border-radius: 0 !important; background: var(--c-over) !important; border: 0 !important; box-shadow: var(--frame-gold) !important; color: var(--c-text) !important; }
.arena-wrap .qg-who { color: var(--c-gold-2) !important; }
/* barra de ação cabendo nos 1008 px com o Idle/Manual: Só números e Pocket só com ícone (nome no tooltip), golpes de 32 px */
.arena-controls .arena-tools .at-lbl { display: none !important; }
.arena-controls .arena-tools .btn { width: 34px; padding: 0 !important; justify-content: center; }
.arena-controls .skill-bar .skill, .arena-controls .skill-bar .skill .type-emblem { width: 32px !important; height: 32px !important; }
.arena-controls .skill-bar { gap: 3px !important; }
.arena-controls #btn-start { white-space: nowrap; flex: none; }

/* Troca (trade-ui.js) no gerenciador: a moldura .tr-frame é a janela; convite e aviso de fim no canto de baixo do mapa */
.tr-root:has(.tr-box) { background: transparent; }
.tr-frame.wm-win { background: transparent !important; border: 0 !important; }
.tr-box { width: 920px; max-height: calc(var(--play-bottom) - var(--play-top) - 16px); }
.tr-invite { right: calc(var(--col-r) + var(--gap) * 3) !important; bottom: calc(var(--stage-h) - var(--play-bottom) + var(--action-h) + var(--gap) * 2) !important; }
/* janela do ADM (/inspect, /scan) */
.gm-box { width: 1100px; max-height: calc(var(--play-bottom) - var(--play-top) - 16px); }

/* ícones desenhados (emoji-icons.js): certo, errado, bolinha de online/offline — só tokens */
.ic { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; margin-right: .2em; position: relative; flex: none; }
.ic-check::after { content: ''; position: absolute; left: .32em; top: .08em; width: .3em; height: .6em; border: solid var(--c-ok); border-width: 0 .16em .16em 0; transform: rotate(45deg); }
.ic-x::before, .ic-x::after { content: ''; position: absolute; left: .44em; top: .08em; width: .14em; height: .84em; background: var(--c-danger); transform: rotate(45deg); }
.ic-x::after { transform: rotate(-45deg); }
.ic-dot::after { content: ''; position: absolute; inset: .25em; border-radius: 50%; background: var(--c-text-3); }
.ic-dot.on::after { background: var(--c-ok); }

/* estilos que o JS escrevia direto no HTML com cor fixa (pokemon-ui.js, app.js) */
.chip.mega, .mega-tag { background: var(--c-mega) !important; color: var(--c-ink-light) !important; font-weight: var(--fw-bold); }
.mega-tag { padding: 1px 6px; border-radius: var(--r-3); font-size: var(--fs-min); }
.mega-bonus { color: var(--c-tier); }
.chip.chip-danger { background: var(--c-danger-soft) !important; color: var(--c-ink-light) !important; font-weight: var(--fw-bold); }
.boot-error { color: var(--c-danger); padding: var(--sp-2); }

/* tecla de atalho no canto do botão (hotkeys.js): topo e dock da cidade */
.hk { position: absolute; top: 1px; right: 2px; min-width: 14px; height: 14px; padding: 0 2px; display: grid; place-items: center; pointer-events: none;
  font: var(--fw-bold) var(--fs-min)/1 var(--font-ui); color: var(--c-text-3); background: var(--c-inset); border-radius: var(--r-1); box-shadow: inset 0 0 0 1px var(--c-edge); }
.topbar .tb-btns .tb-btn { position: relative; }
.town-center .town-nav .dock-tile .hk { top: 2px; right: 2px; }
.tb-btn:hover .hk, .dock-tile:hover .hk, .dock-tile.active .hk { color: var(--c-gold-2); }

/* chat expandido (console-ui.js, botão Expandir): cresce para cima por cima da parte de baixo do jogo */
.console-expand { flex: none; margin-left: var(--sp-2); padding: 2px var(--sp-2); border: 0; border-radius: var(--r-1); cursor: pointer;
  font: var(--fw-bold) var(--fs-min)/1.4 var(--font-ui); color: var(--c-text-2); background: var(--c-inset); box-shadow: inset 0 0 0 1px var(--c-edge-2); }
.console-expand:hover, .console-expand[aria-pressed="true"] { color: var(--c-gold-2); box-shadow: inset 0 0 0 1px var(--c-gold); }
body.chat-tall #console-panel { top: calc(var(--stage-h) - var(--chat-h-tall) - var(--gap)) !important; height: var(--chat-h-tall) !important; z-index: 860; box-shadow: var(--frame-gold), var(--shadow-win) !important; }

/* Arena PvP como tela (pvp-ui.js, ServiceHud screen): ocupa a área de jogo inteira (colunas + mapa), sem arrastar nem minimizar */
.svc-backdrop.svc-screen-back { background: var(--c-bg) !important; }
.svc-hud.svc-screen { left: var(--gap) !important; top: 0 !important; width: calc(var(--stage-w) - var(--gap) * 2) !important; max-width: none !important;
  height: calc(var(--play-bottom) - var(--play-top)) !important; max-height: none !important; }
.svc-hud.svc-screen .wm-min-btn { display: none; }
.svc-hud.svc-screen .svc-head { cursor: default; }
.svc-hud.svc-screen .svc-close { margin-left: auto !important; }

/* ======================================================================================================================
   CELULAR (decisão 1 do dono): palco 800×450 deitado (stage-boot.js põe :root.phone). Mapa 18×11 de 32 px, coluna da direita ao lado,
   Treinador (coluna da esquerda) e chat em gavetas por cima do mapa, menus do topo só com ícone. Letra continua ≥ 12 px do palco.
   ====================================================================================================================== */
:root.phone {
  --stage-w: 800px; --stage-h: 450px; --gap: 4px; --top-h: 36px; --tile: 32px; --action-h: 40px;
  --col-l: 0px; --col-r: 208px; --chat-h: 0px; --chat-h-tall: 300px;
}
:root.phone .hunt-layout, :root.phone .town-layout { column-gap: var(--gap) !important; grid-template-columns: 0 var(--vp-w) var(--col-r) !important; }
/* gaveta do Treinador: a coluna da esquerda sai do lado do mapa */
:root.phone .hunt-left, :root.phone .town-left { position: fixed !important; left: 0; top: var(--play-top); width: 280px !important; height: calc(var(--stage-h) - var(--play-top)) !important;
  z-index: 870; padding: var(--gap) var(--gap) 40px; background: var(--c-bg); box-shadow: var(--frame-gold), var(--shadow-win); transform: translateX(-110%); transition: transform var(--t-med); } /* embaixo: os botões das gavetas */
:root.phone body.drawer-left .hunt-left, :root.phone body.drawer-left .town-left { transform: none; }
/* gaveta do chat: escondido até abrir; abre por cima da parte de baixo */
:root.phone #console-panel { top: calc(var(--stage-h) - var(--chat-h-tall)) !important; height: var(--chat-h-tall) !important; left: 0 !important; width: var(--stage-w) !important;
  z-index: 870; transform: translateY(105%); transition: transform var(--t-med); }
:root.phone body.drawer-chat #console-panel { transform: none; }
:root.phone .console-expand { display: none; }
.phone-drawers { display: none; }
:root.phone .phone-drawers { display: flex; gap: var(--gap); position: fixed; left: calc(var(--gap) * 2); top: calc(var(--play-top) + var(--vp-h) - 34px); z-index: 880; } /* canto de baixo do mapa: em cima ficam o nome do mapa e os avisos */
:root.phone .phone-drawers .btn[aria-pressed="true"] { color: var(--c-gold-2) !important; box-shadow: inset 0 0 0 1px var(--c-gold) !important; }
:root.phone body[data-view="login"] .phone-drawers { display: none; }
/* topo: só ícones, sem marca e sem tecla (não há teclado) */
:root.phone .topbar { padding: 0 var(--gap) !important; }
:root.phone .topbar .brand, :root.phone .topbar .brand-name, :root.phone .topbar .tb-lbl, :root.phone .topbar .tb-count, :root.phone .hk, :root.phone .mode-long { display: none !important; }
:root.phone .topbar .tb-btns .tb-btn, :root.phone .topbar .tb-icon { min-width: 30px !important; padding: 0 2px !important; }
:root.phone .topbar .tb-btn .ui-ico, :root.phone .topbar .tb-btn .bag-ico, :root.phone .topbar .tb-btn .pk-ico { width: 24px !important; height: 24px !important; }
/* barra de ação: rola para o lado em vez de cortar; dock só com ícone */
:root.phone .hunt-center .arena-controls, :root.phone .town-center .town-nav { overflow-x: auto !important; overflow-y: hidden !important; }
:root.phone .town-center .town-nav .dock-tile { flex: none !important; width: 40px !important; justify-content: center !important; }
:root.phone .town-center .town-nav .dock-tile > :not(.dock-ico) { display: none !important; }
/* janelas e avisos cabem no palco pequeno (rolam por dentro) */
:root.phone .wm-win { max-width: calc(var(--stage-w) - var(--gap) * 2) !important; max-height: calc(var(--play-bottom) - var(--play-top) - var(--gap) * 2) !important; overflow: auto !important; }
:root.phone #notify-stack { left: calc(var(--gap) * 2); width: calc(var(--vp-w) - var(--gap) * 2); top: calc(var(--play-top) + 40px); }
/* em pé: pede para girar (stage-boot.js) */
.rotate-phone { position: fixed; inset: 0; z-index: 2000; display: grid; place-content: center; gap: var(--sp-2); text-align: center; padding: var(--sp-5);
  background: var(--c-bg); color: var(--c-text); font: var(--fs-lg)/1.4 var(--font-ui); }
.rotate-phone b { font: 700 var(--fs-2xl)/1.2 var(--font-title); color: var(--c-gold-2); }
.rotate-phone[hidden] { display: none; }
/* Mapa global no celular: lista numa coluna só (nome, nível e Caçar); elementos, situação e o detalhe ficam no cartão abaixo */
:root.phone .wm-split { grid-template-columns: minmax(0, 1fr) !important; height: auto !important; }
:root.phone .wm-list-head, :root.phone .wm-row { grid-template-columns: 34px minmax(0, 1fr) 70px 76px !important; }
:root.phone .wm-list-head > :nth-child(4), :root.phone .wm-list-head > :nth-child(5), :root.phone .wm-row > .wm-row-types, :root.phone .wm-row > .wm-st { display: none !important; }
:root.phone .wm-list { max-height: 220px; overflow: auto; }

/* <small> do navegador é "smaller" (12 px → 10 px): nunca abaixo de --fs-min (Fase 5, medição) */
small { font-size: max(var(--fs-min), .833em); }
/* contraste ≥ 4,5:1 (Fase 5, medição): selos e chips que ficavam abaixo */
#pass-count, .tb-count.badge { background: var(--c-gold) !important; color: var(--c-ink) !important; }
.dex-ms-badge { color: var(--c-ink) !important; }
em.zero { color: var(--c-text-2) !important; }
.chip.rarity { color: var(--c-ink) !important; }
.tcg-slot small { color: var(--c-text-2) !important; }
.companion-badge { background: var(--c-xp) !important; color: var(--c-ink) !important; }
/* celular: o topo tem 36 px — botões e seletor de modo cabem nele (Fase 5: saíam 5 px pela borda de cima) */
:root.phone #topbar-actions, :root.phone .topbar .tb-btns, :root.phone .topbar .theme-wrap { height: 34px !important; max-height: 34px !important; align-self: center; }
:root.phone .topbar .tb-btns .tb-btn, :root.phone .topbar .tb-icon { height: 34px !important; min-height: 0 !important; }
:root.phone #mode-seg { height: 30px !important; }
:root.phone #mode-seg .mode-btn { height: 26px !important; min-height: 0 !important; padding: 0 var(--sp-2) !important; }

/* Itens vivos (2026-10-28, pedido do dono: efeitos dos itens "quando visto ou quando colocamos o mouse"):
   ao abrir um bolso da Mochila, os cartões surgem com um pulinho; com o mouse em cima, o cartão sobe e acende na cor da raridade, o ícone cresce,
   flutua e brilha, e um reflexo atravessa o cartão. Cor: --item-glow (dourado; pedras em verde; raros e helds em roxo). */
.bp-item, .bag-item, .loot-item, .shop-item, .mk-row { --item-glow: var(--c-gold); }
.bp-pk-stones .bp-item, .bag-item.stone { --item-glow: var(--c-ok); }
.bp-pk-rare .bp-item, .bp-pk-helds .bp-item, .bp-pk-tms .bp-item { --item-glow: var(--c-mega); }
.bp-item, .bag-item, .loot-item, .shop-item { position: relative; overflow: hidden; isolation: isolate;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.bp-enter .bp-item { animation: item-in .32s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.bp-enter .bp-item:nth-child(n+2) { animation-delay: .03s; }
.bp-enter .bp-item:nth-child(n+5) { animation-delay: .06s; }
.bp-enter .bp-item:nth-child(n+9) { animation-delay: .09s; }
.bp-enter .bp-item:nth-child(n+13) { animation-delay: .12s; }
:is(.bp-item, .bag-item, .loot-item, .shop-item):hover { transform: translateY(-2px); border-color: var(--item-glow);
  box-shadow: 0 0 0 1px var(--item-glow), 0 6px 16px color-mix(in srgb, var(--item-glow) 30%, transparent); }
:is(.bp-item, .bag-item, .loot-item, .shop-item, .mk-row) img { transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), filter .2s ease; }
:is(.bp-item, .bag-item, .loot-item, .shop-item, .mk-row):hover img { transform: scale(1.18); animation: item-float 1.1s ease-in-out .2s infinite;
  filter: drop-shadow(0 0 3px var(--item-glow)) drop-shadow(0 0 7px color-mix(in srgb, var(--item-glow) 60%, transparent)); }
:is(.bp-item, .bag-item, .loot-item, .shop-item)::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--item-glow) 28%, transparent) 50%, transparent 70%);
  translate: -120% 0; transition: translate 0s; }
:is(.bp-item, .bag-item, .loot-item, .shop-item):hover::before { translate: 120% 0; transition: translate .55s ease; }
.mk-row { transition: background-color .16s ease, box-shadow .16s ease; }
.mk-row:hover { box-shadow: inset 3px 0 0 var(--item-glow); background-color: color-mix(in srgb, var(--item-glow) 8%, transparent); }
@keyframes item-in { from { opacity: 0; transform: translateY(6px) scale(.92); } }
@keyframes item-float { 50% { translate: 0 -2px; } }
@media (prefers-reduced-motion: reduce) {
  .bp-enter .bp-item, :is(.bp-item, .bag-item, .loot-item, .shop-item, .mk-row):hover img { animation: none; }
  :is(.bp-item, .bag-item, .loot-item, .shop-item):hover::before { transition: none; }
}

/* Refino com pedras na ficha (2026-10-28, src/core/refine.js): pedras do tipo, "+N" ao lado do atributo-base, botão +1 e a janela
   de refinar por cima da ficha (retrato, base ››› nova, pedras, total contra o preço). */
.ms-box { position: relative; }
.ms-stones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.ms-stone { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--c-inset); border: 1px solid var(--c-edge); font-size: var(--fs-min); }
.ms-stone b { color: var(--c-text); }
.ms-stone-total { font-size: var(--fs-min); color: var(--c-mega); font-weight: 700; }
.ms-bars.base:has(.ms-ref-btn, .ms-ref-fixed) .ms-bar { grid-template-columns: 34px minmax(0, 1fr) 62px 46px; }
.ms-bar b em.ms-ref { margin-left: 4px; color: var(--c-ok); }
.ms-ref-btn { min-height: 0; padding: 1px 6px; font-size: var(--fs-min); }
.ms-ref-btn:not(:disabled):hover { border-color: var(--c-ok); box-shadow: 0 0 8px color-mix(in srgb, var(--c-ok) 45%, transparent); }
.ms-ref-fixed { font-size: var(--fs-min); color: var(--c-ink-light); text-align: center; text-transform: uppercase; }
.ms-refine { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: var(--c-scrim); animation: item-in .2s ease backwards; }
.msr-box { width: min(380px, calc(100% - 32px)); max-height: calc(100% - 16px); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border-radius: 12px;
  background: var(--c-panel); border: 1px solid var(--c-edge); box-shadow: 0 10px 30px var(--c-shade); }
.msr-box h4 { margin: 0; text-transform: uppercase; letter-spacing: .04em; }
.msr-stage { display: flex; flex-direction: column; align-items: center; padding: var(--sp-2) 0; border-radius: 10px;
  background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--c-gold) 30%, transparent), transparent 70%), var(--c-inset); }
.msr-stage canvas { width: 96px; height: 96px; image-rendering: pixelated; }
.msr-stage small { color: var(--c-ink-light); }
.msr-stat { display: grid; grid-template-columns: 1fr auto auto auto auto; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: 10px; background: var(--c-inset); }
.msr-stat span { font-weight: 700; } .msr-stat span small { color: var(--c-ink-light); text-transform: uppercase; }
.msr-stat b { font-size: 22px; font-variant-numeric: tabular-nums; } .msr-stat b.from { color: var(--c-ink-light); } .msr-stat b.to { color: var(--c-ok); }
.msr-stat i { font-style: normal; color: var(--c-ink-light); letter-spacing: -2px; }
.msr-stat em { font-style: normal; font-size: var(--fs-min); color: var(--c-gold); font-weight: 700; }
.msr-done .msr-stat b.from { animation: msr-pop .5s cubic-bezier(.3, 1.6, .5, 1); color: var(--c-ok); }
.msr-row { position: relative; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border-radius: 10px; background: var(--c-inset); border: 1px solid transparent; }
.msr-row span { display: flex; flex-direction: column; } .msr-row small { color: var(--c-ink-light); font-size: var(--fs-min); }
.msr-row > b { font-size: 16px; font-variant-numeric: tabular-nums; } .msr-row > b i { font-style: normal; color: var(--c-ink-light); font-size: var(--fs-min); }
.msr-total { border-color: var(--c-danger); } .msr-total.is-ok { border-color: var(--c-ok); }
.msr-sum { font-size: 20px; text-align: center; color: var(--c-ink-light); }
.msr-meter { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--c-void); overflow: hidden; }
.msr-meter i { display: block; height: 100%; background: var(--c-danger); transition: width .3s ease; } .msr-total.is-ok .msr-meter i { background: var(--c-ok); }
.msr-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.msr-chips .chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-min); color: var(--c-text); background: var(--c-inset); border: 1px solid var(--c-gold); }
.msr-msg { margin: 0; min-height: 1.2em; text-align: center; font-size: var(--fs-min); color: var(--c-ink-light); }
.msr-done .msr-msg { color: var(--c-ok); font-weight: 700; }
.msr-btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
@keyframes msr-pop { 0% { transform: scale(1.6); } }

/* cartão do Pokémon: Chat e Ver ficha sempre juntos, lado a lado */
.pokemon-hover-hud .hud-btns { display: inline-flex; gap: 4px; white-space: nowrap; vertical-align: middle; }

/* Mapa global (2026-10-28): o minimapa desenhado é o padrão e ocupa a esquerda inteira; o cartão da caçada fica ao lado, rolando sozinho */
.wm-split-map .wm-view { height: 100% !important; min-height: 0; }
.wm-info-side { margin-top: 0 !important; min-height: 0; overflow-y: auto; padding-right: 2px; }
:root.phone .wm-split-map .wm-view { height: 240px !important; }
/* 2026-10-30 (dono: "duas barras de rolagem no Mapa global atrapalham mexer no mapa"): no modo Mapa o corpo da janela não rola — abas e filtros
   com a altura natural, o mapa ocupa o resto e só o cartão da caçada (#wm-info) rola por dentro; assim a roda e o arrasto movem o mapa.
   No celular a janela inteira continua rolando (o mapa tem 240 px fixos). */
:root:not(.phone) .svc-body.wm-body-map { display: flex; flex-direction: column; overflow: hidden; min-height: 0; flex: 1 1 auto; }
:root:not(.phone) .svc-body.wm-body-map > * { flex: none; }
:root:not(.phone) .svc-body.wm-body-map > .wm-split-map { flex: 1 1 auto; height: auto; min-height: 0; }
:root:not(.phone) .wm-body-map .wm-info-side { max-height: 100%; }

/* ---------- Bloco Social (2026-10-28): Amigos, Ficha do Treinador, salas e balões da praça ---------- */
.console-friends { flex: none; margin-left: var(--sp-1); padding: 0 var(--sp-2); border: 1px solid var(--c-edge); background: var(--c-inset); color: var(--c-gold-2); font: var(--fw-bold) var(--fs-min)/1 var(--font-ui); cursor: pointer; }
.console-friends:hover { border-color: var(--c-gold); }
.town-plate .town-room { margin-left: var(--sp-2); padding: 1px var(--sp-1); border: 1px solid var(--c-edge); border-radius: 4px; background: var(--c-inset); color: var(--c-text); font-size: var(--fs-min); }
/* Amigos */
.fr-box { width: min(560px, 100%); max-height: calc(var(--play-bottom) - var(--play-top) - var(--gap) * 2); display: flex; flex-direction: column; gap: var(--sp-2); padding: 0 0 var(--sp-2); }
.fr-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-3); } .fr-head h3 { margin: 0; } .fr-head small { font-size: var(--fs-min); color: var(--c-ink-light); margin-left: var(--sp-2); }
.fr-add { display: flex; gap: var(--sp-2); padding: 0 var(--sp-3); } .fr-add input { flex: 1; }
.fr-search { margin: 0 var(--sp-3); }
.fr-msg { margin: 0 var(--sp-3); min-height: 1.2em; font-size: var(--fs-min); } .fr-msg.ok { color: var(--c-ok); } .fr-msg.warn { color: var(--c-danger); }
.fr-list { list-style: none; margin: 0; padding: 0 var(--sp-3); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-1); }
.fr-item { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: var(--sp-2); padding: var(--sp-2); border-radius: 8px; background: var(--c-inset); border: 1px solid var(--c-edge); }
.fr-item.on { border-color: color-mix(in srgb, var(--c-ok) 50%, transparent); }
.fr-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-ink-light); } .fr-item.on .fr-dot { background: var(--c-ok); box-shadow: 0 0 6px var(--c-ok); }
.fr-name { display: flex; flex-direction: column; } .fr-name small { color: var(--c-ink-light); font-size: var(--fs-min); }
.fr-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; } .fr-actions .btn { padding: 2px 8px; min-height: 0; }
.fr-ask { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2); border-top: 1px solid var(--c-edge); font-size: var(--fs-min); }
.fr-ask input { width: 140px; margin-left: var(--sp-1); }
/* Ficha do Treinador */
.ts-box { width: min(720px, 100%); max-height: calc(var(--play-bottom) - var(--play-top) - var(--gap) * 2); display: flex; flex-direction: column; gap: var(--sp-2); padding: 0 0 var(--sp-2); overflow-y: auto; }
.ts-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-3); } .ts-head h3 { margin: 0; }
.ts-err { margin: 0 var(--sp-3); }
.ts-top { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--sp-3); align-items: start; padding: 0 var(--sp-3); }
.ts-figure { width: 96px; height: 116px; image-rendering: pixelated; border-radius: 10px; background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--c-gold) 28%, transparent), transparent 70%), var(--c-inset); }
.ts-id { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.ts-name { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .ts-name > b { font-family: var(--font-title); font-size: var(--fs-lg); color: var(--c-gold-2); }
.ts-online { font-size: var(--fs-min); color: var(--c-ink-light); } .ts-online.on { color: var(--c-ok); }
/* elo da Arena PvP na ficha (2026-10-30): insígnia em pixel art (assets/ui/elos) */
.ts-elo { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 96px; padding: var(--sp-1) var(--sp-2); text-align: center; }
.ts-elo b { font-size: 14px; color: var(--c-text); } .ts-elo small { color: var(--c-text-2); white-space: nowrap; }
.ts-elo.none .ar-badge { filter: grayscale(1) opacity(.45); }
@media (max-width: 560px) { .ts-top { grid-template-columns: 76px 1fr; } .ts-elo { grid-column: 1 / -1; flex-direction: row; justify-content: center; } }
.ts-chips { display: flex; gap: 4px; flex-wrap: wrap; } .ts-chips .chip { color: var(--c-text-2); border-color: var(--c-edge-2); } .ts-chips .chip.muted { color: var(--c-text-3); }
.ts-about { margin: 0; padding: var(--sp-2); border-radius: 8px; background: var(--c-inset); border: 1px solid var(--c-edge); line-height: 1.35; }
.ts-btns { display: flex; gap: var(--sp-2); }
.ts-card { margin: 0 var(--sp-3); padding: var(--sp-2); border-radius: 10px; background: var(--c-panel-2, var(--c-inset)); border: 1px solid var(--c-edge); }
.ts-card h4 { margin: 0 0 var(--sp-2); text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-min); color: var(--c-gold-2); }
.ts-showcase { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); }
.ts-mon { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-2) 4px; border-radius: 8px; background: var(--c-inset); border: 1px solid var(--c-edge); text-align: center; min-width: 0; }
.ts-mon canvas { width: 64px; height: 64px; image-rendering: pixelated; } .ts-mon b { font-size: var(--fs-min); } .ts-mon small { font-size: var(--fs-min); color: var(--c-ink-light); }
.ts-mon.empty { justify-content: center; min-height: 120px; color: var(--c-ink-light); border-style: dashed; }
.ts-types { display: flex; gap: 2px; justify-content: center; flex-wrap: wrap; }
.ts-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.ts-tile { display: flex; flex-direction: column; padding: var(--sp-2); border-radius: 8px; background: var(--c-inset); border: 1px solid var(--c-edge); }
.ts-tile small { font-size: var(--fs-min); color: var(--c-ink-light); text-transform: uppercase; } .ts-tile b { font-size: var(--fs-lg); color: var(--c-gold-2); font-variant-numeric: tabular-nums; } .ts-tile span { font-size: var(--fs-min); color: var(--c-ink-light); }
.ts-field { display: flex; flex-direction: column; gap: 4px; } .ts-field textarea { resize: vertical; }
.ts-picker { max-height: 260px; overflow-y: auto; }
:root.phone .ts-showcase { grid-template-columns: repeat(3, minmax(0, 1fr)); } :root.phone .ts-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Conteúdo novo (2026-10-28): Coleção (cadeado no Depósito), Guerra dos Clãs */
.dp-keep { margin-left: 4px; padding: 0 4px; min-height: 0; border: 1px solid var(--c-edge); border-radius: 4px; background: var(--c-inset); cursor: pointer; font-size: var(--fs-min); line-height: 1.4; }
.dp-keep.on, .dp-keep:hover { border-color: var(--c-gold); }
.chip.keep { background: var(--c-gold-soft); color: var(--c-gold-2); border: 1px solid var(--c-gold); }
.clan-war-list { margin: 0 0 var(--sp-2); padding-left: 20px; } .clan-war-list li { margin: 2px 0; } .clan-war-pts { color: var(--c-gold-2); margin-left: 4px; }
.clan-war-matches { display: flex; flex-wrap: wrap; gap: 4px; }

/* Guildas (2026-10-28) */
.gd-box { width: min(640px, 100%); max-height: calc(var(--play-bottom) - var(--play-top) - var(--gap) * 2); display: flex; flex-direction: column; gap: var(--sp-2); padding: 0 0 var(--sp-2); overflow-y: auto; }
.gd-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-3); } .gd-head h3 { margin: 0; }
.gd-tabs { display: flex; gap: var(--sp-1); padding: 0 var(--sp-3); } .gd-tabs .btn.on { border-color: var(--c-gold); color: var(--c-gold-2); }
.gd-body { padding: 0 var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.gd-msg { margin: 0; min-height: 1.2em; font-size: var(--fs-min); } .gd-msg.ok { color: var(--c-ok); } .gd-msg.warn { color: var(--c-danger); }
.gd-card { padding: var(--sp-2); border-radius: 10px; background: var(--c-inset); border: 1px solid var(--c-edge); }
.gd-title { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .gd-title b { font-family: var(--font-title); color: var(--c-gold-2); font-size: var(--fs-lg); }
.gd-bonus { margin: 4px 0 0; color: var(--c-ok); }
.gd-xp { color: var(--c-ok); border-color: color-mix(in srgb, var(--c-ok) 60%, transparent); } /* +10% de XP do top 3 da guerra */
.gd-tag { padding: 1px 6px; border-radius: 4px; background: var(--c-gold-soft); color: var(--c-gold-2); border: 1px solid var(--c-gold); font-size: var(--fs-min); font-weight: 700; }
.gd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.gd-row { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); border-radius: 8px; background: var(--c-inset); border: 1px solid var(--c-edge); }
.gd-row.on { border-color: color-mix(in srgb, var(--c-ok) 50%, transparent); }
.gd-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-ink-light); } .gd-row.on .gd-dot { background: var(--c-ok); box-shadow: 0 0 6px var(--c-ok); }
.gd-row small { color: var(--c-ink-light); font-size: var(--fs-min); } .gd-row .btn { padding: 2px 8px; min-height: 0; }
.gd-form { display: grid; grid-template-columns: 1fr 90px auto; gap: var(--sp-2); align-items: center; }
.gd-war ol { margin: 0; padding-left: 20px; } .gd-war li { margin: 2px 0; } .gd-pts { color: var(--c-gold-2); margin-left: 4px; }
.gd-matches { display: flex; flex-wrap: wrap; gap: 4px; }

/* Novidades, Configurações e Estatísticas (2026-10-28) */
.tb-news { font: var(--fw-bold) var(--fs-lg)/1 var(--font-title); color: var(--c-gold-2); position: relative; }
.tb-news.has-new::after { content: ''; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-danger); box-shadow: 0 0 6px var(--c-danger); }
.nw-box { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-2); padding: 0 0 var(--sp-3); }
.nw-art.small { padding: var(--sp-2) var(--sp-3); } .nw-art.small > b { font-size: var(--fs-lg); }
.nw-media { margin: 0 var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); }
.nw-media a { display: block; line-height: 0; } .nw-media img { display: block; width: 100%; height: 258px; object-fit: contain; border-radius: 8px; border: 1px solid var(--c-edge); background: var(--c-inset); }
.nw-pics { display: flex; justify-content: center; gap: var(--sp-1); flex-wrap: wrap; } .nw-pics .active { border-color: var(--c-gold); color: var(--c-gold-2); }
.nw-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-3); } .nw-head h3 { margin: 0; } .nw-head small { margin-left: var(--sp-2); font-size: var(--fs-min); color: var(--c-ink-light); }
.nw-art { margin: 0 var(--sp-3); padding: var(--sp-4) var(--sp-3); border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); text-align: center;
  background: radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--c-gold) 35%, transparent), transparent 70%), var(--c-inset); border: 1px solid var(--c-edge); }
.nw-art .ui-ico { width: 48px; height: 48px; } .nw-art > b { font-family: var(--font-title); font-size: var(--fs-xl, 22px); color: var(--c-gold-2); letter-spacing: .04em; text-transform: uppercase; }
.nw-tag { padding: 1px 8px; border-radius: 999px; background: var(--c-gold-soft); color: var(--c-gold-2); border: 1px solid var(--c-gold); font-size: var(--fs-min); font-weight: 700; }
.nw-lead { margin: 0 var(--sp-3); line-height: 1.4; } .nw-items { margin: 0 var(--sp-3); padding-left: 18px; font-size: var(--fs-min); color: var(--c-ink-light); } .nw-items li { margin: 2px 0; }
.nw-nav { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); } .nw-dots { display: flex; gap: 6px; } .nw-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-edge); cursor: pointer; } .nw-dots i.on { background: var(--c-gold); }
.nw-go { margin: 0 var(--sp-3); }
.cfg-box { width: min(560px, 100%); display: flex; flex-direction: column; gap: var(--sp-2); padding: 0 0 var(--sp-3); }
.cfg-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-3); } .cfg-head h3 { margin: 0; }
.cfg-body { display: flex; flex-direction: column; gap: var(--sp-2); padding: 0 var(--sp-3); }
.cfg-sec { padding: var(--sp-2); border-radius: 10px; background: var(--c-inset); border: 1px solid var(--c-edge); } .cfg-sec h4 { margin: 0 0 var(--sp-2); text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-min); color: var(--c-gold-2); }
.cfg-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-1) 0; } .cfg-row > span:first-child { display: flex; flex-direction: column; } .cfg-row small { color: var(--c-ink-light); font-size: var(--fs-min); }
.cfg-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px; border-radius: 999px; border: 1px solid var(--c-edge); background: var(--c-void); color: var(--c-ink-light); cursor: pointer; font-size: var(--fs-min); font-weight: 700; }
.cfg-toggle i { width: 18px; height: 18px; border-radius: 50%; background: var(--c-ink-light); } .cfg-toggle.on { border-color: var(--c-ok); color: var(--c-ok); } .cfg-toggle.on i { background: var(--c-ok); }
.cfg-seg { display: inline-flex; gap: 4px; } .cfg-seg .btn.on { border-color: var(--c-gold); color: var(--c-gold-2); }
.cfg-range { display: inline-flex; align-items: center; gap: var(--sp-1); } .cfg-range b { min-width: 40px; text-align: right; }
body.no-skill-bar .arena-controls .skill-bar { display: none !important; }
.st-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); } .st-tiles.small3 { grid-template-columns: repeat(3, 1fr); }
.st-tile { display: flex; flex-direction: column; padding: var(--sp-2); border-radius: 10px; background: var(--c-inset); border: 1px solid var(--c-edge); text-align: center; }
.st-tile small { text-transform: uppercase; font-size: var(--fs-min); color: var(--c-ink-light); } .st-tile b { font-size: var(--fs-xl, 22px); color: var(--c-gold-2); font-variant-numeric: tabular-nums; } .st-tile span { font-size: var(--fs-min); color: var(--c-ink-light); }
.st-tile.dia b { color: var(--c-info); } .st-tile.coin b { color: var(--c-gold-2); }

/* arte em HD (hd-art.js): o <img> trocado pela versão suavizada deixa de ser pixelado */
img.hd-img { image-rendering: auto !important; }

/* aba Guild do chat (2026-10-29): só aparece para membros */
.console-tab.guild-tab { color: var(--c-gold-2); }
.chat-msg.guild-msg .chat-name { color: var(--c-gold-2); }

/* Mensagem fixada do administrador (pinned-ui.js): no palco, o canto de baixo à esquerda é o chat. O aviso fica no canto de cima à
   esquerda do mapa, logo abaixo do nome do mapa, por cima do jogo e abaixo das janelas (2026-10-30, pedido do dono do jogo). */
.pinned-msg { left: calc(var(--gap) * 2 + var(--col-l) + 8px) !important; top: calc(var(--play-top) + 72px) !important; bottom: auto !important; width: min(260px, calc(var(--vp-w) - 16px)); }

/* ---------- polimento 2026-11: card do Pokémon ativo mais compacto (Shiny + 2 tipos + raridade em 2 linhas cortavam SpA/SpD/Spe sob o chat) ---------- */
.hunt-left .mon-details { gap: 8px; }
.hunt-left .am-info { gap: 4px; }
.hunt-left .am-portrait { width: 72px; height: 72px; }
.hunt-left .am-portrait canvas { width: 68px; height: 68px; }
.hunt-left .am-chips { gap: 3px; }
.hunt-left .am-chips .chip, .hunt-left .am-chips .type, .hunt-left .am-chips .tag { padding-top: 1px; padding-bottom: 1px; }
.hunt-left .am-bars { gap: 4px; }
.hunt-left .am-stats { gap: 4px 12px; }
.hunt-left .am-stat { gap: 2px; }
/* a tela de entrada rola quando a aba Criar conta é maior que a tela: o convite do Discord não cobre o fim do formulário */
#login-view:not(.hidden) { padding-bottom: 96px; }
.hunt-left .am-head { flex-wrap: wrap; gap: 6px 10px; }
.hunt-left .am-info { display: contents; } /* nome ao lado do retrato; chips e meta em linha cheia (menos linhas) */
.hunt-left .am-name { flex: 1; min-width: 0; align-self: center; }
.hunt-left .am-name .linkish { font-size: 18px; }
.hunt-left .am-chips, .hunt-left .am-meta { flex-basis: 100%; }
.hunt-left .am-chips { gap: 2px 3px; }
.hunt-left .am-foot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hunt-left .pc-info { gap: 4px; } .hunt-left #player-card { gap: 6px; }
.hunt-left .pc-tags { display: flex; flex-wrap: nowrap; gap: 4px; } .hunt-left .pc-tags > span { white-space: nowrap; }
.hunt-left .pc-wallet { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }