/* ============================================================================================================
   HUD "Arena Ciano" (design handoff): tokens de tema, tipografia e o visual novo por cima de styles.css.
   Temas: preto (padrão) · cinza · ciano (claro) — trocados pela engrenagem da topbar (html[data-theme]).
   As variáveis antigas (--bg, --panel, --text, --muted, --gold…) passam a apontar para os tokens do tema,
   então o CSS antigo acompanha a troca de tema sem mudar.
   ============================================================================================================ */
:root {
  --bg-page: var(--rar-comum); --bg-app: var(--rar-comum); --topbar-a: var(--c-ink-light); --topbar-b: var(--c-ink-light); --inset: var(--c-text);
  --panel-t: var(--c-ink-light); --card-t: var(--rar-comum); --pill-t: var(--rar-comum); --edge-t: var(--type-ice); --edge-2: var(--type-ice); --edge-3: var(--type-ice);
  --text-t: var(--c-ok-soft); --text-2: var(--x-26606c); --muted-t: var(--x-5b6b80); --faint: var(--x-5f8189); --overlay: color-mix(in srgb, var(--c-ink-light) 90%, transparent);
  --gold-text: var(--x-a8740a); --gold-soft-a: var(--c-ink-light); --gold-soft-b: var(--c-text); --green-text: var(--x-478a3b); --green-soft: var(--c-text);
  --blue-text: var(--x-0a7fa8); --tier-soft: var(--rar-comum); --tier-text: var(--x-7a2fd1); --stripe-a: var(--rar-comum); --stripe-b: var(--c-text);
  --shadow-panel: 0 12px 30px color-mix(in srgb, var(--x-1f5560) 18%, transparent); --shadow-screen: 0 30px 80px color-mix(in srgb, var(--x-1f5560) 25%, transparent);
  --arena-frame: var(--c-text); --scrollbar: var(--type-ice);
}
:root[data-theme="preto"] {
  --bg-page: var(--c-void); --bg-app: var(--c-inset); --topbar-a: var(--c-panel); --topbar-b: var(--c-bg); --inset: var(--x-000000);
  --panel-t: var(--c-panel); --card-t: var(--c-panel); --pill-t: var(--c-panel-2); --edge-t: var(--c-panel-3); --edge-2: var(--c-edge); --edge-3: var(--c-edge);
  --text-t: var(--rar-comum); --text-2: var(--type-steel); --muted-t: var(--c-text-3); --faint: var(--x-6b6f78); --overlay: color-mix(in srgb, var(--c-inset) 90%, transparent);
  --gold-text: var(--type-ground); --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(--rar-raro); --tier-soft: var(--c-tier-soft); --tier-text: var(--c-tier); --stripe-a: var(--c-panel); --stripe-b: var(--c-bg);
  --shadow-panel: 0 12px 30px color-mix(in srgb, var(--x-000000) 45%, transparent); --shadow-screen: 0 30px 80px color-mix(in srgb, var(--x-000000) 60%, transparent);
  --arena-frame: var(--x-000000); --scrollbar: var(--c-edge);
}
/* acentos fixos + ponte para as variáveis antigas */
:root {
  --accent: var(--type-ground); --on-accent: var(--c-gold-soft); --cta-a: var(--type-grass); --cta-b: var(--x-2a9d4a); --pause-a: var(--c-shiny); --pause-b: var(--c-warn);
  --hp-a: var(--c-ok); --hp-b: var(--x-7ee88f); --xp-c: var(--c-xp); --diamond: var(--rar-raro); --danger: var(--c-hp);
  --r-md: 10px; --r-lg: 14px; --r-xl: 16px;
  --display: 'Russo One', 'Rubik', system-ui, sans-serif;
  --font: 'Rubik', system-ui, 'Segoe UI', sans-serif;
  --bg: var(--bg-app); --panel: var(--panel-t); --panel-2: var(--card-t); --edge-light: transparent; --edge-dark: var(--edge-t);
  --text: var(--text-t); --muted: var(--muted-t); --gold: var(--accent); --green: var(--cta-b); --green-hi: var(--cta-a);
  --hp-hi: var(--hp-a); --xp: var(--xp-c);
}

html, body { background: var(--bg-page); color: var(--text-t); font: 13px/1.45 var(--font); }
body { background: radial-gradient(ellipse at 50% 0, var(--bg-app), var(--bg-page) 70%) fixed; min-height: 100vh; }
b, strong { font-weight: 600; }
::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 6px; } ::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
img.px, canvas { image-rendering: pixelated; }
.tabular, .timer, .wallet b, .hud-big { font-variant-numeric: tabular-nums; }

/* ---------- painéis, cartões, botões, pills ---------- */
.panel { background: var(--panel-t); border: 1px solid var(--edge-3); border-radius: var(--r-lg); box-shadow: none; padding: 12px 14px; margin-bottom: 12px; color: var(--text-t); }
.panel-title { color: var(--text-t); border-bottom: 1px solid var(--edge-t); box-shadow: none; font-weight: 600; letter-spacing: .3px; }
.card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.card-head b { font-size: 12px; letter-spacing: .6px; }
.card-head .muted { font-size: var(--fs-min); }
.card-head .card-link { margin-left: auto; font-size: var(--fs-min); }
.btn { background: var(--pill-t); color: var(--text-t); border: 1px solid var(--edge-2); box-shadow: none; border-radius: var(--r-md); padding: 7px 13px; font-weight: 500; }
.btn:hover:not(:disabled) { background: var(--card-t); border-color: var(--accent); }
.btn.active { background: var(--accent); color: var(--on-accent); border-color: transparent; font-weight: 700; }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.btn-green { background: linear-gradient(var(--cta-a), var(--cta-b)); color: var(--c-bg); border-color: transparent; box-shadow: none; font-weight: 700; }
.btn-green:hover:not(:disabled) { filter: brightness(1.06); background: linear-gradient(var(--cta-a), var(--cta-b)); }
.btn-red { background: linear-gradient(var(--pause-a), var(--pause-b)); color: var(--c-gold-soft); border-color: transparent; box-shadow: none; font-weight: 700; }
.linkish { background: none; border: 0; padding: 0; color: var(--blue-text); cursor: pointer; font: inherit; font-weight: 600; }
.linkish:hover { text-decoration: underline; }
.pill { display: inline-flex; align-items: center; gap: 8px; background: var(--pill-t); border: 1px solid var(--edge-2); border-radius: 999px; padding: 5px 14px 5px 8px; color: var(--text-t); box-shadow: none; }
.pill-note { font-size: var(--fs-min); padding: 2px 8px; border-radius: 999px; background: var(--green-soft); color: var(--green-text); font-weight: 600; margin-left: auto; }
.pill-note.off { background: var(--inset); color: var(--muted-t); }
.chip { border-radius: 5px; border: 0; font-size: var(--fs-min); font-weight: 700; padding: 2px 7px; }
.chip.forge-accent { background: var(--tier-soft); color: var(--tier-text); border: 1px solid var(--c-boss); }
.chip.shiny { color: var(--c-panel-2); }
.type { border-radius: 5px; font-size: var(--fs-min); font-weight: 600; text-shadow: none; padding: 2px 7px; }
.seg { display: inline-flex; gap: 3px; background: var(--inset); border-radius: 10px; padding: 3px; }
.seg-btn { flex: 1; text-align: center; padding: 6px 12px; border-radius: 7px; font-size: 12px; font-weight: 600; background: transparent; border: 0; color: var(--text-2); cursor: pointer; font-family: inherit; box-shadow: none; }
.seg-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 22%, transparent); border: 0; }
.seg-btn.active, .btn.seg-btn.active { background: var(--accent); color: var(--on-accent); border: 0; }
.seg-btn small { margin-left: 3px; font-size: var(--fs-min); }
input, select, textarea { font-family: inherit; }
input[type=text], input[type=search], input[type=number], input[type=password], input:not([type]), select, textarea, .capture-panel select, .shop select, .depot-tools input, .depot-tools select, .mon-actions select, .dex-toolbar input, .dex-toolbar select, .console-input input, .forge-fields select, .daycare-enroll select {
  background: var(--inset); color: var(--text-t); border: 1px solid var(--edge-2); border-radius: 8px; padding: 6px 9px; box-shadow: none; }
input:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.muted { color: var(--muted-t); }
.rules-note { color: var(--muted-t); font-size: var(--fs-min); }
.warn { color: var(--danger); }

/* ---------- topbar ---------- */
.topbar { height: 60px; padding: 0 18px; gap: 14px; flex-wrap: nowrap; background: linear-gradient(var(--topbar-a), var(--topbar-b)); border-bottom: 1px solid var(--edge-t); position: sticky; top: 0; z-index: 30; }
.brand { display: flex; align-items: center; gap: 10px; font-size: inherit; letter-spacing: 0; flex: none; }
.brand-gem { width: 18px; height: 18px; background: var(--accent); transform: rotate(45deg); border-radius: 3px; box-shadow: 0 0 14px color-mix(in srgb, var(--type-ground) 60%, transparent); margin: 0 4px; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--display); font-size: 18px; letter-spacing: 1px; color: var(--text-t); }
.brand-sub { font-size: var(--fs-min); color: var(--muted-t); letter-spacing: 2px; text-transform: uppercase; margin-top: 3px; }
.topbar-actions { flex: 1; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.tb-spacer { flex: 1; }
.mode-seg { display: flex; gap: 4px; background: var(--inset); border: 1px solid var(--edge-t); border-radius: 999px; padding: 4px; margin-left: 4px; flex: none; }
.mode-btn { padding: 6px 16px; border-radius: 999px; border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; }
.mode-btn:hover { color: var(--text-t); }
.mode-btn.active { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.mode-btn:disabled { opacity: .5; cursor: default; }
.wallet { color: var(--text-t); font-weight: 700; font-size: 14px; }
.wallet img { width: 22px; height: 22px; }
.diamond-wallet { color: var(--blue-text); padding-left: 12px; }
/* diamante (moeda paga): <i class="gem"> com o ícone em pixel art de tools/draw-ui-icons.mjs, no tamanho exato de cada arte
   (16 px no texto e nos botões, 22 px no topo e nos saldos grandes, 18 px no topo de telas estreitas: hud.css) para não esticar pixel */
i.gem { display: inline-block; flex: none; width: 16px; height: 16px; margin: 0 2px; vertical-align: -3px; background: url(../../assets/ui/icons/diamond.png) center / 16px 16px no-repeat; image-rendering: pixelated; }
.diamond-wallet.pill i.gem, i.gem.big { width: 22px; height: 22px; margin: 0; background-image: url(../../assets/ui/icons/diamond-22.png); background-size: 22px 22px; }
.tb-btns { display: flex; gap: 6px; flex: none; }
.tb-btn { padding: 8px 14px; font-size: 13px; }
.tb-btn .muted { margin-left: 4px; }
.tb-icon { width: 36px; height: 36px; padding: 0; font-size: 16px; border-radius: 10px; display: grid; place-items: center; }
.trainer-avatar { position: relative; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, var(--gold-soft-a), var(--gold-soft-b)); border: 2px solid var(--accent); display: grid; place-items: center; font-family: var(--display); color: var(--gold-text); cursor: pointer; padding: 0; font-size: 15px; }
.trainer-avatar canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.trainer-avatar:hover { box-shadow: 0 0 12px color-mix(in srgb, var(--type-ground) 50%, transparent); }
.trainer-avatar:disabled { cursor: default; opacity: .7; }
.trainer-info { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 132px; }
.trainer-row { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.1; min-width: 0; }
.trainer-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.trainer-level { display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: var(--fs-min); font-weight: 600; color: var(--gold-text); margin: 0; min-width: 0; }
.trainer-level .trainer-lv { color: var(--gold-text); white-space: nowrap; }
.trainer-level .trainer-bar { flex: 1; min-width: 0; height: 6px; border-radius: 3px; background: var(--inset); }
.trainer-level .trainer-bar i { background: linear-gradient(90deg, var(--type-ground), var(--c-shiny)); border-radius: 3px; }
.trainer-level .trainer-pct { color: var(--muted-t); font-weight: 500; font-variant-numeric: tabular-nums; min-width: 26px; text-align: right; }
.save-status { display: none; }
.save-status.error { display: inline; flex: none; margin-left: auto; font-size: var(--fs-min); font-weight: 600; color: var(--danger); cursor: help; }
.theme-wrap { position: relative; flex: none; }
.theme-pop { position: absolute; right: 0; top: 44px; background: var(--panel-t); border: 1px solid var(--edge-2); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 180px; box-shadow: var(--shadow-panel); z-index: 50; }
.theme-title { font-size: var(--fs-min); letter-spacing: 1px; text-transform: uppercase; color: var(--muted-t); padding: 2px 6px 4px; }
.theme-opt { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text-t); font: inherit; cursor: pointer; text-align: left; }
.theme-opt i { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--sw) 55%, var(--sw2) 55%); border: 1px solid var(--edge-2); }
.theme-opt:hover { background: var(--card-t); }
.theme-opt.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); font-weight: 600; }
/* idioma (engrenagem): bandeiras do Brasil e dos EUA lado a lado — src/ui/i18n.js */
.lang-title { margin-top: 6px; border-top: 1px solid var(--edge-2); padding-top: 8px; }
.lang-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lang-opt { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 6px; border-radius: 8px; border: 1px solid var(--edge-2); background: transparent; color: var(--text-t); font: inherit; font-size: 13px; cursor: pointer; }
.lang-opt .flag { width: 26px; height: 18px; flex: none; border-radius: 3px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--x-000000) 18%, transparent); }
.lang-opt:hover { background: var(--card-t); }
.lang-opt.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); font-weight: 600; }
@media (max-width: 1240px) { .brand-sub, .tb-btn .muted { display: none; } .trainer-info { width: 96px; } .trainer-level .trainer-pct { display: none; } .mode-btn { padding: 6px 10px; } }

/* ---------- Caçada ---------- */
.hunt-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr) 360px; grid-template-areas: "left center right"; gap: 16px; padding: 16px; max-width: none; margin: 0; align-items: stretch; height: calc(100vh - 60px); box-sizing: border-box; }
.hunt-left, .hunt-center, .hunt-right { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.hunt-left, .hunt-right { overflow-y: auto; }
.hunt-left > .panel, .hunt-right > .panel, .hunt-center > .panel { margin: 0; zoom: 1; }
.hunt-left > .panel, .hunt-right > .panel { flex: none; } /* os cartões não encolhem; a coluna rola */
.hunt-center { display: flex; flex-direction: column; gap: 10px; }
.hunt-center .arena-panel { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; background: transparent; border: 0; gap: 10px; }
.hunt-center .arena-wrap { flex: 1 1 0; min-height: 0; width: 100%; max-width: none; aspect-ratio: auto; margin: 0; border-radius: var(--r-xl); border: 1px solid var(--edge-3); outline: 0; overflow: hidden;
  background: repeating-linear-gradient(45deg, var(--stripe-a) 0 12px, var(--stripe-b) 12px 24px); }
#arena { background: transparent; }
.arena-side { position: absolute; left: 12px; top: 12px; display: flex; flex-direction: column; gap: 8px; width: 112px; pointer-events: none; }
.hud-card { background: var(--overlay); border: 1px solid var(--edge-2); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; color: var(--text-t); backdrop-filter: blur(6px); }
.hud-k { font-size: var(--fs-min); letter-spacing: 2px; color: var(--muted-t); }
.hud-big { font-family: var(--display); font-size: 28px; line-height: 1; }
.hud-s { font-size: var(--fs-min); color: var(--text-2); }
.hud-stats { gap: 6px; font-size: var(--fs-min); }
.hud-stats > div { display: flex; justify-content: space-between; gap: 6px; }
.hud-stats span { color: var(--muted-t); }
.hud-stats b { color: var(--text-t); font-weight: 700; margin: 0; }
.hud-counter { display: none; }
.arena-wrap .hud-map { left: 12px; right: auto; bottom: 12px; text-align: left; background: var(--overlay); border-radius: 10px; padding: 8px 12px; color: var(--text-t); text-shadow: none; font-family: var(--display); font-size: 16px; font-weight: normal; pointer-events: none; backdrop-filter: blur(6px); }
.arena-wrap .hud-map small { font-family: var(--font); font-size: var(--fs-min); letter-spacing: 1.5px; color: var(--text-2); text-transform: uppercase; }
.hud-hint { left: auto; right: 12px; top: 12px; transform: none; background: var(--overlay); color: var(--text-t); border: 1px solid var(--edge-2); border-radius: 10px; padding: 6px 10px; font-size: var(--fs-min); max-width: 42%; text-align: left; }
.arena-controls { height: 52px; flex: none; margin: 0; padding: 0 8px; gap: 10px; flex-wrap: nowrap; background: var(--panel-t); border: 1px solid var(--edge-3); border-radius: var(--r-lg); }
.btn-run { height: 38px; width: 150px; min-width: 150px; border-radius: 10px; font-size: 14px; letter-spacing: .5px; position: relative; overflow: hidden; }
.btn-run::before { content: ''; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-ink-light) 45%, transparent), transparent); animation: run-sweep 2.8s ease-in-out infinite; }
@keyframes run-sweep { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(320%); } }
.btn-run:disabled::before { display: none; }
.speed.seg { gap: 3px; }
.speed .btn { min-width: 0; }
.check { color: var(--text-2); font-size: 12px; gap: 8px; cursor: pointer; }
.check.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.check.switch .sw { width: 34px; height: 20px; border-radius: 999px; background: var(--edge-2); position: relative; display: inline-block; transition: background .2s; flex: none; }
.check.switch .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--c-ink-light); transition: left .2s; box-shadow: 0 1px 2px color-mix(in srgb, var(--x-000000) 30%, transparent); }
.check.switch input:checked + .sw { background: var(--cta-b); }
.check.switch input:checked + .sw::after { left: 17px; }
.arena-tools { display: flex; gap: 6px; margin: 0; }
.arena-tools .btn { padding: 8px 12px; border-radius: 9px; }
.hud-reward { display: none; }
/* console (log + chat) */
.console-panel { flex: 0 0 var(--console-h, 22vh); min-height: 120px; margin: 0; padding: 0; overflow: hidden; }
.console-resize { background: transparent; border: 0; margin: 0; height: 8px; }
.console-resize::after { border-color: var(--edge-2); }
.console-tabs { background: transparent; border-bottom: 1px solid var(--edge-t); padding: 4px 6px; gap: 2px; }
.console-tab { background: transparent; border: 0; color: var(--text-2); border-radius: 7px; padding: 4px 9px; font-size: var(--fs-min); }
.console-tab:hover { color: var(--text-t); background: var(--card-t); }
.console-tab.active { background: var(--accent); color: var(--on-accent); box-shadow: none; font-weight: 600; }
.console-badge { background: var(--danger); }
.console-online.online { color: var(--green-text); }
.console-body { background: transparent; display: flex; flex-direction: column; min-height: 0; flex: 1; }
.console-body .console-log { flex: 1; height: auto; min-height: 0; font-size: 12px; padding: 4px 6px; }
.console-log li { border-bottom: 0; padding: 1px 6px; }
.battle-log .t { color: var(--faint); }
.log-sys { color: var(--text-2); } .log-player { color: var(--green-text); } .log-wild { color: var(--c-hp); } .log-xp { color: var(--blue-text); } .log-lvl { color: var(--gold-text); }
.log-loot { color: var(--x-a8740a); } .log-ball { color: var(--x-7c5cc9); } .log-help { color: var(--blue-text); } .log-eff { color: var(--x-b8860b); }
:root:not([data-theme="ciano"]) .log-loot { color: var(--c-gold-2); } :root:not([data-theme="ciano"]) .log-ball { color: var(--c-tier); } :root:not([data-theme="ciano"]) .log-eff { color: var(--c-shiny); }
.chat-msg .chat-name { color: var(--gold-text); } .chat-msg.mine .chat-name { color: var(--green-text); }
.console-input { background: transparent; border-top: 1px solid var(--edge-t); padding: 6px; gap: 6px; }
.console-input input { background: var(--inset); border: 1px solid var(--edge-2); border-radius: 8px; }

/* card do Pokémon ativo */
.card-active { position: relative; overflow: hidden; }
.card-active::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 90px; background: linear-gradient(color-mix(in srgb, var(--c-warn) 18%, transparent), transparent); pointer-events: none; }
.mon-details { display: flex; flex-direction: column; gap: 12px; position: relative; }
.am-head { display: flex; gap: 12px; }
.am-portrait { width: 84px; height: 84px; border-radius: 14px; background: radial-gradient(var(--gold-soft-a), var(--gold-soft-b)); border: 2px solid var(--rar, var(--c-warn)); display: grid; place-items: center; box-shadow: 0 0 24px color-mix(in srgb, var(--rar, var(--c-warn)) 35%, transparent); flex: none; overflow: visible; }
.am-portrait canvas { width: 80px; height: 80px; }
.am-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.am-name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.am-name .linkish { font-family: var(--display); font-size: 20px; color: var(--text-t); font-weight: normal; }
.am-name .lv { color: var(--muted-t); font-size: 13px; }
.am-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.am-meta { font-size: var(--fs-min); color: var(--muted-t); }
.am-meta b { color: var(--gold-text); }
.am-bars { display: flex; flex-direction: column; gap: 6px; }
.bar-label { font-size: var(--fs-min); color: var(--muted-t); }
.bar-label span:last-child { color: var(--text-t); }
.bar { height: 8px; background: var(--inset); border: 0; border-radius: 4px; overflow: hidden; margin: 0; }
.bar > i { background: linear-gradient(90deg, var(--hp-a), var(--hp-b)); border-radius: 4px; }
.bar.xp { height: 5px; } .bar.xp > i { background: var(--xp-c); }
.am-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.am-stat { display: flex; flex-direction: column; gap: 3px; }
.am-stat .row { display: flex; justify-content: space-between; font-size: var(--fs-min); }
.am-stat .row span { color: var(--muted-t); }
.am-stat .row b { font-variant-numeric: tabular-nums; }
.am-stat .mini { height: 4px; background: var(--inset); border-radius: 2px; overflow: hidden; }
.am-stat .mini i { display: block; height: 100%; background: var(--c); border-radius: 2px; }
.am-foot { font-size: var(--fs-min); color: var(--muted-t); }
/* moveset */
.move-list { max-height: none; display: flex; flex-direction: column; gap: 5px; }
.move-list li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; background: var(--card-t); border: 1px solid var(--edge-t); box-shadow: none; }
.move-list li.active { background: var(--card-t); box-shadow: none; }
.move-list li.cooling { background: color-mix(in srgb, var(--type-c, var(--c-info)) 14%, var(--card-t)); border-color: color-mix(in srgb, var(--type-c, var(--c-info)) 55%, transparent); }
.move-list .mv-n { width: 20px; font-size: var(--fs-min); color: var(--muted-t); font-weight: 700; flex: none; }
.move-list .mv-main { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.move-list .mv-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; }
.move-list .mv-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.move-list .mv-row .type { font-size: var(--fs-min); padding: 1px 6px; margin: 0; }
.move-list .move-recharge { height: 3px; background: var(--inset); border-radius: 2px; overflow: hidden; width: 100%; }
.move-list .move-recharge i { background: var(--c-info); }
.move-list .cooling .move-recharge i { background: var(--type-c, var(--c-info)); }
.move-list .move-ready { width: 40px; text-align: right; font-size: var(--fs-min); color: var(--text-2); flex: none; }
.move-list .cooling .move-ready { color: var(--gold-text); }
.move-list .note, .move-list .lv, .move-list .meta { display: none; }
.move-list .tgt { font-size: var(--fs-min); vertical-align: middle; }
/* captura (esquerda) */
.cap-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.cap-label { width: 100%; font-size: var(--fs-min); letter-spacing: 1px; color: var(--muted-t); text-transform: uppercase; }
.cap-balls { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; width: 100%; }
.cap-ball { height: 54px; border-radius: 9px; background: var(--card-t); border: 1px solid var(--edge-t); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; color: var(--text-2); font: inherit; padding: 0; }
.cap-ball small { font-size: var(--fs-min); font-variant-numeric: tabular-nums; }
.cap-ball.selected { background: color-mix(in srgb, var(--accent) 28%, var(--card-t)); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.cap-ball.empty { opacity: .55; }
.cap-ball:disabled { cursor: default; }
.cap-ball .cap-none { font-size: 16px; color: var(--danger); line-height: 24px; }
.svc-chips { margin: 0; }
.svc-chip { background: var(--card-t); border: 1px solid var(--edge-t); color: var(--text-2); }
.svc-chip.active { border-color: var(--accent); color: var(--gold-text); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.cap-autosell .as-toggle { border-radius: 999px; }
.as-summary { font-size: var(--fs-min); color: var(--muted-t); }
/* direita: abas, time, mochila */
.rtabs { display: flex; width: 100%; margin-bottom: 10px; }
.collection { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hunt-right .collection { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.slot { height: 104px; border-radius: 12px; background: var(--card-t); border: 1px solid var(--edge-t); box-shadow: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 6px; overflow: visible; }
.slot canvas { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 60px; height: 60px; }
.slot .lvl { left: 7px; top: 6px; bottom: auto; font-size: var(--fs-min); color: var(--text-t); text-shadow: none; }
.slot .star { right: 7px; top: 5px; color: var(--rar-lendario); }
.slot .slot-name { position: relative; color: var(--text-t); font-size: var(--fs-min); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.slot .slot-hp { width: 100%; height: 4px; border-radius: 2px; background: var(--inset); overflow: hidden; margin-top: 4px; }
.slot .slot-hp i { display: block; height: 100%; width: 100%; background: var(--type-grass); }
.slot.selected { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 0 16px color-mix(in srgb, var(--type-ground) 35%, transparent); }
.slot .iv-badge, .slot .grade-badge { top: auto; bottom: 26px; }
.companion-badge { left: auto; right: 6px; top: 24px; border-radius: 4px; background: var(--blue-text); color: var(--c-ink-light); }
.bag-balls { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
.bag-balls span { height: 52px; border-radius: 9px; background: var(--card-t); border: 1px solid var(--edge-t); display: flex; flex-direction: column; justify-content: center; font-size: var(--fs-min); color: var(--text-2); gap: 2px; }
.bag-items { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.bag-item, .loot-item { width: auto; height: 46px; border-radius: 9px; background: var(--card-t); border: 1px solid var(--edge-t); box-shadow: none; }
.bag-item i, .loot-item i { color: var(--text-t); text-shadow: none; right: 4px; bottom: 2px; }
.bag-stones-title { font-size: var(--fs-min); color: var(--muted-t); letter-spacing: .5px; text-transform: uppercase; margin: 10px 0 6px; font-weight: 600; }
.bag-helds, .bag-tokens { display: flex; flex-wrap: wrap; }
.bag-helds .bag-item, .bag-tokens .bag-item { width: 36px; height: 36px; }
.bag-foot { margin-top: 10px; background: var(--card-t); border-radius: 10px; padding: 8px 8px 8px 12px; }
.bag-foot .muted { color: var(--text-2); font-size: 12px; }
.bag-foot b { color: var(--gold-text); }
/* desta caçada */
.card-session { flex: 1 1 auto; }
.sess-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.sess-stat { background: var(--card-t); border-radius: 9px; padding: 8px; display: flex; flex-direction: column; }
.sess-stat span { font-size: var(--fs-min); color: var(--muted-t); }
.sess-stat b { font-size: 18px; font-family: var(--display); font-weight: normal; }
.sess-stat.gold b { color: var(--gold-text); }
.mini-h { font-size: var(--fs-min); color: var(--muted-t); font-weight: 600; letter-spacing: .3px; }
.mini-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin: 4px 0 8px; }
.mini-mon { width: auto; aspect-ratio: 1; height: auto; border-radius: 7px; background: var(--card-t); border: 1px solid var(--edge-t); display: grid; place-items: center; overflow: hidden; }
.mini-mon canvas { width: 100%; height: 100%; }
.mini-note { display: none; }

/* ---------- Cidade ---------- */
.town-layout { display: block; padding: 0; margin: 0; max-width: none; }
.town-stage { position: relative; height: calc(100vh - 60px); overflow: hidden; background: var(--bg-app); }
.town-wrap { position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; border: 0; outline: 0; background: var(--x-000000); }
.town-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, color-mix(in srgb, var(--x-000000) 45%, transparent)); }
.town-plate { position: absolute; left: 50%; top: 14px; right: auto; bottom: auto; transform: translateX(-50%); background: var(--overlay); border: 1px solid var(--edge-2); border-radius: 999px; padding: 6px 16px; display: flex; align-items: center; gap: 10px; color: var(--text-t); text-shadow: none; font-size: 13px; font-weight: 600; backdrop-filter: blur(6px); pointer-events: none; }
.town-plate small { display: inline; font-size: var(--fs-min); letter-spacing: 2px; color: var(--muted-t); text-transform: uppercase; }
.tt-row { display: grid; grid-template-columns: 44px 1fr 22px; gap: 8px; align-items: center; background: var(--card-t); border: 1px solid var(--edge-t); border-radius: 10px; padding: 5px 6px; cursor: pointer; color: var(--text-t); font: inherit; text-align: left; }
.tt-row:hover { border-color: var(--accent); }
.tt-row canvas { width: 44px; height: 44px; border-radius: 8px; background: var(--inset); border: 2px solid var(--rar, var(--edge-t)); box-sizing: border-box; }
.tt-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tt-name { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; }
.tt-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-name span { color: var(--muted-t); font-size: var(--fs-min); }
.tt-hp { height: 4px; border-radius: 2px; background: var(--inset); overflow: hidden; }
.tt-hp i { display: block; height: 100%; width: 100%; background: var(--type-grass); }
.town-side { position: absolute; right: 16px; top: 16px; bottom: 128px; width: 360px; margin: 0; max-height: none; overflow-y: auto; background: var(--overlay); backdrop-filter: blur(8px); box-shadow: var(--shadow-panel); }
/* chat da cidade: compacto e fixo (~6 linhas), sem tapar o mapa; o da caçada continua com a alça */
.dock { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 8px; margin: 0; z-index: 3; }
.dock-tile { width: 118px; height: 78px; border-radius: 12px; background: var(--overlay); border: 1px solid var(--edge-2); color: var(--text-t); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; align-content: start; row-gap: 1px; padding: 8px 10px; text-align: left; cursor: pointer; font: inherit; backdrop-filter: blur(8px); transition: transform .15s, box-shadow .15s; position: relative; }
.dock-tile:hover { transform: translateY(-3px); box-shadow: 0 8px 20px color-mix(in srgb, var(--x-000000) 25%, transparent); border-color: var(--c); }
.dock-tile.active { background: linear-gradient(color-mix(in srgb, var(--c) 35%, var(--panel-t)), var(--panel-t)); border-color: var(--c); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 35%, transparent); }
.dock-ico { grid-row: 1; width: 26px; height: 26px; border-radius: 8px; background: var(--c); color: var(--c-inset); display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 14px; font-family: var(--display); }
.dock-tile kbd { grid-column: 2; grid-row: 1; font: 600 12px var(--font); color: var(--muted-t); background: var(--inset); border-radius: 4px; padding: 1px 5px; align-self: start; }
.dock-tile b { grid-column: 1 / -1; font-size: var(--fs-min); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.dock-tile small { grid-column: 1 / -1; font-size: var(--fs-min); color: var(--muted-t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-tile:not(.active) .dock-ico { opacity: .9; }
@media (max-width: 1500px) { .dock-tile { width: 96px; height: 70px; } .dock-tile small { display: none; } .town-side { width: 320px; }  }
@media (max-width: 1240px) {   .dock-tile { width: 72px; height: 60px; padding: 6px 8px; } .dock-tile b { display: none; } }
.town-nav .btn { display: none; }
.npc-head { grid-template-columns: 52px 1fr; }
.npc-face { border-radius: 10px; background: var(--card-t); border: 1px solid var(--edge-t); }
.npc-talk { background: var(--card-t); border: 1px solid var(--edge-t); border-radius: 8px; color: var(--text-2); }
.team-grid .slot { height: 88px; }
.depot-grid .slot { height: 60px; }
.depot-grid .slot canvas { top: 2px; width: 44px; height: 44px; }
.mon-card { background: var(--card-t); border: 1px solid var(--edge-t); border-radius: 12px; }

/* ---------- janela de Serviços (uma só, com trilho lateral) ---------- */
.svc-backdrop { background: color-mix(in srgb, var(--c-ok-soft) 55%, transparent); backdrop-filter: blur(3px); }
:root:not([data-theme="ciano"]) .svc-backdrop { background: color-mix(in srgb, var(--x-000000) 62%, transparent); }
.svc-hud { width: min(1280px, 100%); border-radius: 18px; background: var(--bg-app); border: 1px solid var(--edge-3); box-shadow: var(--shadow-screen); display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "rail head" "rail body"; }
.svc-hud.no-rail { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body"; width: min(980px, 100%); }
.svc-hud.wide { width: min(1280px, 100%); }
.svc-rail { grid-area: rail; width: 232px; background: var(--panel-t); border-right: 1px solid var(--edge-t); display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.svc-rail-title { font-size: var(--fs-min); letter-spacing: 2px; text-transform: uppercase; color: var(--muted-t); padding: 4px 6px 6px; }
.svc-rail-item { display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--text-t); font: inherit; cursor: pointer; }
.svc-rail-item i { grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 9px; background: var(--c); color: var(--c-inset); display: grid; place-items: center; font: 800 14px var(--display); font-style: normal; }
.svc-rail-item b { font-size: 12px; }
.svc-rail-item small { font-size: var(--fs-min); color: var(--muted-t); }
.svc-rail-item:hover { background: var(--card-t); }
.svc-rail-item.active { background: linear-gradient(color-mix(in srgb, var(--c) 30%, var(--panel-t)), var(--panel-t)); border-color: var(--c); }
.svc-rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: var(--card-t); font-size: 12px; }
.svc-rail-foot span { display: flex; justify-content: space-between; align-items: center; }
.svc-rail-foot img { width: 18px; height: 18px; }
.svc-rail-foot b { color: var(--gold-text); }
.svc-rail-foot .dia { color: var(--blue-text); }
.svc-head { grid-area: head; background: var(--panel-t); border-bottom: 1px solid var(--edge-t); padding: 12px 16px; }
.svc-head h2 { font-family: var(--display); font-size: 20px; font-weight: normal; color: var(--text-t); }
.svc-head .svc-sub { color: var(--muted-t); }
.svc-face { width: 44px; height: 44px; border-radius: 12px; background: var(--card-t); border: 2px solid var(--svc-c, var(--edge-2)); }
.svc-close { border: 1px solid var(--edge-2); border-radius: 10px; color: var(--text-t); background: var(--pill-t); }
.svc-body { grid-area: body; padding: 14px 16px 16px; }
.svc-card, .svc-mon, .svc-pick, .held-tile, .tutor-slot, .tutor-move, .svc-wallet, .svc-steps span, .svc-tag { background: var(--card-t); border-color: var(--edge-t); color: var(--text-t); }
.svc-card { border-radius: 12px; }
.svc-mon, .svc-pick { border-radius: 10px; }
.svc-mon.selected, .svc-pick.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 0 12px color-mix(in srgb, var(--type-ground) 25%, transparent); }
.svc-tabs { border-bottom-color: var(--edge-t); }
.svc-tab { color: var(--muted-t); } .svc-tab.active { color: var(--gold-text); border-bottom-color: var(--accent); }
.svc-msg { color: var(--gold-text); }
.svc-tag { color: var(--text-2); background: var(--inset); }
.svc-tag.ok { background: var(--green-soft); color: var(--green-text); }
.svc-tag.warn { background: var(--c-text); color: var(--c-hp-bar); } :root:not([data-theme="ciano"]) .svc-tag.warn { background: var(--x-6a2a2a); color: var(--c-ink-light); }
.svc-tag.price { background: var(--gold-soft-a); color: var(--gold-text); }
.tutor-desc, .move-desc { color: var(--text-2); }
.tutor-slot, .tutor-move { background: linear-gradient(90deg, color-mix(in srgb, var(--type) 22%, transparent), var(--card-t) 60%); }
.held-tile:disabled { opacity: .45; }
.ok { color: var(--green-text); }
@media (max-width: 900px) { .svc-hud { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body"; } .svc-rail { display: none; } }

/* ---------- modais antigos (Pokédex, resultado da caçada, escolha), login ---------- */
.modal { background: var(--panel-t); border: 1px solid var(--edge-3); border-radius: var(--r-lg); box-shadow: var(--shadow-screen); color: var(--text-t); }
.modal-title { background: var(--card-t); border-bottom: 1px solid var(--edge-t); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.modal-backdrop { background: color-mix(in srgb, var(--c-ok-soft) 55%, transparent); }
.dex-cell, .pick, .map-card { background: var(--card-t); border: 1px solid var(--edge-t); border-radius: 8px; box-shadow: none; color: var(--text-t); }
.dex-cell:hover, .pick:hover, .map-card:hover { background: var(--pill-t); }
.dex-cell.selected { outline-color: var(--accent); }
.dex-unknown { color: var(--faint); }
.result-table th { background: var(--card-t); border-color: var(--edge-t); }
.result-table td { background: var(--panel-t); border-color: var(--edge-t); }
.result-section { background: var(--card-t); border: 1px solid var(--edge-t); border-radius: 10px; }
.result-section h4 { color: var(--text-2); }
.stats-table th, .stats-table td { border-bottom-color: var(--edge-t); }
.dex-evo-rule { background: var(--card-t); }
.login-card { border-radius: var(--r-xl); }
.login-profile, .pick { background: var(--card-t); border-color: var(--edge-t); box-shadow: none; }
.login-view { padding: 24px 16px; }

/* ---------- anúncio de Shiny / atualização: mantêm as cores próprias ---------- */
.shiny-announce { border-radius: 14px; }

/* ---------- telas menores: volta a rolar a página ---------- */
@media (max-width: 1240px) {
  .hunt-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "center center" "left right"; height: auto; }
  .hunt-left, .hunt-right { overflow: visible; }
  .hunt-center .arena-panel { flex: none; } /* senão o quadro do mapa fica com altura 0 (página rolando) */
  .hunt-center .arena-wrap { flex: none; aspect-ratio: 1; }
  .console-panel { flex: none; }
  .console-body .console-log { height: 190px; }
}
@media (max-width: 760px) {
  .hunt-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "center" "left" "right"; padding: 8px; gap: 8px; }
  .topbar { height: auto; padding: 6px 10px; flex-wrap: wrap; }
  .topbar-actions { flex-wrap: wrap; }
}

/* ---------- componentes antigos com fundo escuro fixo → tokens do tema ---------- */
.dex-counters th, .dex-counters td, .dex-section, .dex-evo, .dex-evo-rule, .dex-info, .dex-detail, .dex-pane, .forge-wallet, .forge-cost,
.login-profile, .login-import, .city-summary, .quest, .capture-ball, .pokemon-card, .pokemon-hover-hud, .market-offer, .held-row, .tutor-row,
.shop-ball, .shop-buybar, .shop-mon, .shop-sellbar, .shop-item, .cap-card, .cap-autosell, .collector-bulk, .bulk-mon, .held-note, .wm-view,
.wm-card, .bag-tab, .ht-head, .ha-card, .ha-balance, .ha-rates span, .ha-drops, .rot-vip, .pvp-rating, .pvp-slot, .pvp-queue, .pvp-match,
.insp-head, .insp-mon, .mon-card, .npc-talk, .result-section, .svc-wallet, .stone-evo-row canvas, .char-team canvas, .mon-card-head canvas,
.wm-pool canvas, .ht-window, .hunt-tools, .ht-body, .cl-row, .rot-step {
  background: var(--card-t); color: var(--text-t); border-color: var(--edge-t); }
.pokemon-card:hover, .pokemon-card:focus-visible, .pokemon-card.selected, .city-summary.city-locked, .cap-card.on, .collector-bulk.empty, .cl-row.shiny { background: var(--pill-t); }
.ht-window, .hunt-tools, .pokemon-hover-hud { background: var(--panel-t); border-radius: 14px; box-shadow: var(--shadow-panel); }
.pokemon-hud-close { background: var(--pill-t); color: var(--text-t); border-color: var(--edge-2); }
.as-toggle { background: var(--pill-t); color: var(--text-t); border: 1px solid var(--edge-2); border-radius: 999px; padding: 4px 12px; font: inherit; cursor: pointer; }
.as-toggle.on { background: var(--cta-b); color: var(--c-bg); border-color: transparent; }
.dex-statbar, .trainer-bar { background: var(--inset); }
.dex-cell.selected { outline-color: var(--accent); }
.rar-chip { color: var(--c-ink-light); }
.tgt-single { background: var(--inset); color: var(--text-2); border-color: var(--edge-2); }
.picker { border-radius: 14px; }
.ht-float { background: var(--panel-t); border: 1px solid var(--edge-3); border-radius: 14px; box-shadow: var(--shadow-panel); color: var(--text-t); }
.ht-head { background: var(--card-t); border-bottom-color: var(--edge-t); border-radius: 14px 14px 0 0; }
.ht-tab { color: var(--muted-t); } .ht-tab.active { color: var(--gold-text); border-bottom-color: var(--accent); }
.dex-detail, .dex-head, .dex-section, .dex-counters { background: var(--card-t); border-color: var(--edge-t); color: var(--text-t); }
.dex-section h4, .dex-state { color: var(--text-2); }
/* entrada: cartões de personagem no tema */
.login-view { background: radial-gradient(ellipse at top, var(--bg-app), var(--bg-page) 60%); min-height: calc(100vh - 60px); }
.char-card, .char-new, .login-profile, .login-import { background: var(--card-t); border-color: var(--edge-t); color: var(--text-t); }
.char-card:hover { border-color: var(--accent); }
.char-name, .char-plus, .login-import summary { color: var(--gold-text); }
.char-team canvas { background: var(--inset); }
.login-form input, .login-name input, .char-delete input { background: var(--inset); color: var(--text-t); border: 1px solid var(--edge-2); border-radius: 8px; }
.login-msg { color: var(--gold-text); }

/* ---------- Coleção de Cartas (src/ui/cards-ui.js): cartas dos Bosses no estilo Yu-Gi-Oh, girando ---------- */
.cards-hub { display: grid; gap: 12px; }
.cards-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cards-head h3 { margin: 0; font: 400 16px var(--display); }
.cards-bonus { display: flex; flex-wrap: wrap; gap: 6px; }
.cards-bonus .chip { background: color-mix(in srgb, var(--el) 22%, var(--panel-t)); color: var(--text-t); border: 1px solid var(--el); }
.cards-slots-wrap { background: var(--card-t); border: 1px solid var(--edge-t); border-radius: var(--r-lg); padding: 10px 12px; }
.cards-slots { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.tcg-slot { width: 150px; height: 218px; font-size: 28px; border: 2px dashed var(--edge-2); border-radius: 10px; display: grid; place-content: center; text-align: center; color: var(--muted-t); gap: 4px; cursor: pointer; }
.tcg-slot span { font: 400 14px var(--display); }
.cards-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 36px; padding: 6px 10px; background: var(--inset); border-radius: var(--r-md); }
.cards-detail .btn { margin-left: auto; }
.cards-filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cards-filters .chip-btn { border: 1px solid var(--edge-2); background: var(--pill-t); color: var(--text-t); border-radius: 999px; padding: 3px 10px; font: 600 12px var(--font); cursor: pointer; }
.cards-filters .chip-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.cards-filters select { background: var(--inset); color: var(--text-t); border: 1px solid var(--edge-2); border-radius: 8px; padding: 3px 6px; font: 12px var(--font); }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 14px; justify-items: center; perspective: 1100px; }
.cards-empty { text-align: center; } .cards-empty p { max-width: 560px; margin: 12px auto 0; }

/* carta: 150×218 (proporção de carta), rosto e verso em 3D */
.tcg { --w: 150px; position: relative; width: var(--w); height: calc(var(--w) * 1.455); padding: 0; border: 0; background: none; cursor: pointer; perspective: 900px; font: inherit; color: var(--c-panel); }
.tcg-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s ease; }
.tcg-spin .tcg-inner { animation: tcg-spin 9s linear infinite; animation-delay: var(--delay, 0s); }
.tcg:hover .tcg-inner, .tcg.selected .tcg-inner, .tcg:focus-visible .tcg-inner { animation: none; transform: rotateY(0) translateZ(12px) scale(1.04); }
@keyframes tcg-spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { .tcg-spin .tcg-inner { animation: none; } }
.tcg-face { position: absolute; inset: 0; border-radius: 8px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; box-shadow: 0 6px 16px color-mix(in srgb, var(--x-000000) 35%, transparent); }
/* frente: moldura de "carta de efeito" (Dano, laranja-bronze) ou holográfica (Shiny) */
.tcg-front { display: grid; grid-template-rows: auto auto 1fr auto auto auto; gap: 3px; padding: 7px 7px 5px; border: 3px solid var(--c-gold-soft);
  background: linear-gradient(160deg, var(--type-fire), var(--x-b8651c) 55%, var(--x-8f4a1e)); text-align: left; }
.tcg-o-shiny .tcg-front { border-color: var(--x-3a3d48); background: linear-gradient(125deg, var(--x-cfd6ff), var(--x-f9d2ff) 20%, var(--rar-comum) 40%, var(--x-ffe9a0) 60%, var(--x-bfe3ff) 80%, var(--x-f9d2ff));
  background-size: 300% 300%; animation: tcg-holo 6s ease-in-out infinite; }
@keyframes tcg-holo { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.tcg-name { display: flex; align-items: center; justify-content: space-between; gap: 4px; background: linear-gradient(var(--c-text), var(--c-gold-2)); border: 1px solid var(--c-edge-2); border-radius: 3px; padding: 2px 4px; }
.tcg-name b { font: 400 12px var(--display); letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcg-attr { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--font); font-style: normal; color: var(--c-ink-light);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--el) 55%, var(--c-ink-light)), var(--el) 60%, color-mix(in srgb, var(--el) 60%, var(--x-000000))); border: 1px solid var(--c-panel); text-shadow: 0 1px 1px var(--x-000000); }
.tcg-stars { text-align: right; font-size: var(--fs-min); letter-spacing: 1px; color: var(--type-electric); text-shadow: 0 0 2px var(--x-7a3500), 0 1px 0 var(--x-7a3500); padding-right: 2px; }
.tcg-o-shiny .tcg-stars { color: var(--c-shiny); text-shadow: 0 0 2px var(--x-4d1e7a), 0 1px 0 var(--x-4d1e7a), 0 0 6px var(--x-b56cff); }
.tcg-art { display: grid; place-items: center; border: 2px solid var(--c-edge); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--el) 35%, var(--c-ink-light)), color-mix(in srgb, var(--el) 70%, var(--c-panel))); overflow: hidden; }
.tcg-art canvas { width: 100%; height: 100%; image-rendering: pixelated; object-fit: contain; }
.tcg-o-shiny .tcg-art { box-shadow: inset 0 0 18px color-mix(in srgb, var(--c-ink-light) 70%, transparent); }
.tcg-type { font: 700 12px var(--font); color: var(--c-gold-soft); padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcg-desc { background: var(--c-text); border: 1px solid var(--c-edge-2); border-radius: 2px; padding: 3px 4px; font: 500 12px/1.25 var(--font); color: var(--c-panel); min-height: 32px; }
.tcg-foot { display: flex; justify-content: space-between; font: 700 12px var(--font); color: var(--c-gold-soft); opacity: .8; padding: 0 2px; }
/* verso: o clássico espiral escuro com uma Poké Ball no centro */
.tcg-back { transform: rotateY(180deg); border: 3px solid var(--c-panel); background: radial-gradient(circle at 50% 50%, var(--x-7a3500) 0 18%, var(--c-gold-soft) 38%, var(--c-bg) 70%),
  repeating-conic-gradient(from 0deg, var(--c-edge) 0 10deg, var(--c-gold-soft-2) 10deg 20deg); background-blend-mode: overlay; display: grid; place-items: center; }
.tcg-back-ball { width: 46%; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--c-inset); background: linear-gradient(var(--c-hp) 0 46%, var(--c-inset) 46% 54%, var(--c-text) 54%);
  box-shadow: 0 0 16px color-mix(in srgb, var(--type-fire) 60%, transparent); position: relative; }
.tcg-back-ball::after { content: ''; position: absolute; inset: 36%; border-radius: 50%; background: var(--c-text); border: 3px solid var(--c-inset); }
.tcg-mystery { display: grid; place-items: center; background: linear-gradient(160deg, var(--c-edge-2), var(--c-panel-3)); border-color: var(--c-panel); }
.tcg-mystery b { font: 400 54px var(--display); color: color-mix(in srgb, var(--c-ink-light) 25%, transparent); }
.tcg-count, .tcg-new, .tcg-on { position: absolute; z-index: 2; font: 800 12px var(--font); border-radius: 999px; padding: 2px 7px; pointer-events: none; }
.tcg-count { right: -6px; top: -8px; background: var(--accent); color: var(--on-accent); box-shadow: 0 2px 6px color-mix(in srgb, var(--x-000000) 30%, transparent); }
.tcg-new { left: -6px; top: -8px; background: var(--danger); color: var(--c-ink-light); }
.tcg-on { left: 50%; bottom: -9px; transform: translateX(-50%); background: var(--cta-b); color: var(--c-ink-light); white-space: nowrap; }
.tcg-equipped .tcg-front { box-shadow: 0 0 0 2px var(--cta-a), 0 0 18px color-mix(in srgb, var(--cta-a) 60%, transparent); }
.tcg.selected .tcg-front { box-shadow: 0 0 0 3px var(--accent), 0 0 22px color-mix(in srgb, var(--accent) 70%, transparent); }
.tcg:focus-visible { outline: none; }
/* carta dropada: aparece girando no resultado da caçada */
.result-cards { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; perspective: 900px; padding: 6px 0 10px; }
.result-cards .tcg { --w: 120px; }

/* carta de Boss de Caça Shiny: moldura verde (como carta de magia) */
.tcg-o-boss.tcg-k-sorte .tcg-front { background: linear-gradient(160deg, var(--rar-incomum), var(--x-1f8a6b) 55%, var(--x-11614a)); border-color: var(--c-ok-soft); }
.tcg-o-boss.tcg-k-sorte .tcg-type, .tcg-o-boss.tcg-k-sorte .tcg-foot { color: var(--c-ink-light); }
.tcg-o-shiny .tcg-type, .tcg-o-shiny .tcg-foot { color: var(--x-2a3350); }
/* slots: 1 de Boss (dourado) + 2 de Shiny (holográfico) */
.tcg-slot-wrap { display: grid; justify-items: center; gap: 6px; }
.tcg-slot-label { font: 700 12px var(--font); padding: 2px 10px; border-radius: 999px; }
.tcg-slot-label.slot-boss { background: var(--gold-soft-a); color: var(--gold-text); border: 1px solid var(--accent); }
.tcg-slot-label.slot-shiny { background: linear-gradient(90deg, var(--rar-comum), var(--rar-comum), var(--rar-comum)); color: var(--x-3b2a6b); border: 1px solid var(--c-tier); }
.tcg-slot.slot-boss { border-color: var(--accent); color: var(--gold-text); }
.tcg-slot.slot-shiny { border-color: var(--c-tier); color: var(--x-8a6fe0); }
.tcg-slot small { font-size: var(--fs-min); }

/* ícones dos serviços: sprite de um Pokémon que combina com cada um (SERVICE_ICON_DEX em app.js), no dock e no trilho */
.dock-ico, .svc-rail-item i { background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--c) 35%, var(--c-ink-light)), var(--c) 70%, color-mix(in srgb, var(--c) 70%, var(--x-000000)));
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--x-000000) 18%, transparent), 0 2px 6px color-mix(in srgb, var(--c) 45%, transparent); }
.dock-ico { width: 34px; height: 34px; border-radius: 10px; }
.dock-ico canvas, .svc-rail-item i canvas { width: 32px; height: 32px; image-rendering: pixelated; filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--x-000000) 45%, transparent)); }
.svc-rail-item i canvas { width: 28px; height: 28px; }
.dock-tile:hover .dock-ico canvas { transform: scale(1.15) translateY(-1px); transition: transform .15s; }
.dock-tile { height: 88px; }
@media (max-width: 1500px) { .dock-tile { height: 74px; } .dock-ico { width: 30px; height: 30px; } .dock-ico canvas { width: 28px; height: 28px; } }

/* Pokémon desmaiado (save.ko): fora das caçadas até Revive ou Centro Pokémon */
.slot.ko canvas { filter: grayscale(1) brightness(.7); opacity: .6; }
.slot.ko .slot-hp i { width: 0 !important; }
.slot .ko-badge { position: absolute; left: 3px; top: 2px; font-size: 13px; filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--x-000000) 60%, transparent)); }

/* ---------- Árvore de Clãs (src/ui/clans-ui.js): céu estrelado, 9 linhas, arte do Pokémon símbolo ---------- */
.clan-hub { position: relative; border-radius: 14px; overflow: hidden; color: var(--rar-comum); min-height: 560px; }
.clan-sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.clan-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 12px; padding: 12px; }
@media (max-width: 1000px) { .clan-grid { grid-template-columns: 1fr; } }
.clan-stage { aspect-ratio: 1; width: 100%; max-height: min(72vh, 760px); margin: 0 auto; }
.clan-stage svg { width: 100%; height: 100%; display: block; overflow: visible; }
.clan-panel { background: color-mix(in srgb, var(--c-bg) 86%, transparent); border: 1px solid color-mix(in srgb, var(--x-8caaff) 18%, transparent); border-radius: 14px; padding: 14px; align-self: start; font-size: 13px; }
.clan-panel h3 { font: 400 17px var(--display); margin: 0 0 6px; color: var(--c-ink-light); }
.clan-panel .clan-sub { margin-top: 14px; }
.clan-panel .muted { color: var(--x-9aa4c7); }
.clan-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; margin: 0 4px 4px 0; color: var(--t); background: color-mix(in srgb, var(--t) 20%, transparent); border: 1px solid var(--t); }
.clan-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dashed color-mix(in srgb, var(--c-ink-light) 8%, transparent); }
.clan-right { text-align: right; }
.clan-gold { color: var(--type-ground); }
.clan-points { display: flex; gap: 6px; margin: 8px 0 10px; }
.clan-points span { width: 20px; height: 20px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c-ink-light) 25%, transparent); }
.clan-points span.on { background: radial-gradient(circle at 35% 30%, var(--c-ink-light), var(--c) 60%); border-color: var(--c); box-shadow: 0 0 10px var(--c); }
.clan-bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--c-ink-light) 8%, transparent); overflow: hidden; margin-top: 6px; }
.clan-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--c, var(--rar-raro)), var(--c-ink-light)); }
.clan-btn { width: 100%; margin-top: 10px; }
.clan-legend { font-size: var(--fs-min); color: var(--x-9aa4c7); margin-top: 12px; line-height: 1.5; }
.clan-hub .edge { stroke: color-mix(in srgb, var(--x-aabeff) 16%, transparent); stroke-width: 3; fill: none; }
.clan-hub .edge.lit { stroke: var(--c); stroke-width: 4; filter: url(#clan-glow); }
.clan-hub .edge.reach { stroke: color-mix(in srgb, var(--c) 55%, transparent); stroke-dasharray: 6 6; animation: clan-dash 1.2s linear infinite; }
@keyframes clan-dash { to { stroke-dashoffset: -24; } }
.clan-hub .node { cursor: pointer; }
.clan-hub .node circle.core { fill: var(--c-bg); stroke: color-mix(in srgb, var(--x-aabeff) 35%, transparent); stroke-width: 2.5; transition: all .2s; }
.clan-hub .node.owned circle.core { fill: var(--c); stroke: var(--c-ink-light); filter: url(#clan-glow); }
.clan-hub .node.avail circle.core { stroke: var(--c); stroke-width: 3.5; }
.clan-hub .node circle.halo { fill: none; stroke: none; }
.clan-hub .node.avail circle.halo { stroke: var(--c); opacity: .5; animation: clan-pulse 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.clan-hub .node.sel circle.core { stroke: var(--c-ink-light); stroke-width: 4; }
.clan-hub .node.locked { opacity: .35; }
@keyframes clan-pulse { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.45); opacity: 0; } }
.clan-hub .node text.ico { font: 700 15px var(--font); fill: var(--c-ink-light); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.clan-hub .node.owned text.ico { fill: var(--c-bg); }
.clan-hub .node text.lbl { font: 600 12px var(--font); fill: var(--x-9aa4c7); text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: var(--c-inset); stroke-width: 3px; }
.clan-hub .node.owned text.lbl, .clan-hub .node.avail text.lbl { fill: var(--c-ink-light); }
.clan-hub .clan-name { font: 400 17px var(--display); text-anchor: middle; paint-order: stroke; stroke: var(--c-inset); stroke-width: 4px; letter-spacing: .5px; }
.clan-hub .clan-el { font: 600 12px var(--font); text-anchor: middle; fill: var(--x-9aa4c7); paint-order: stroke; stroke: var(--c-inset); stroke-width: 3px; }
.clan-hub .art { transition: opacity .3s; }
.clan-hub .clan.dim .art, .clan-hub .clan.dim .clan-name, .clan-hub .clan.dim .clan-el { opacity: .25; }
.clan-hub .start { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .clan-hub .edge.reach, .clan-hub .node.avail circle.halo { animation: none; } }
/* 11 serviços no dock */
.dock-tile { width: 106px; }
@media (max-width: 1500px) { .dock-tile { width: 88px; } }
/* borda metálica (Lendária, Mítica, IV Perfeita): o miolo usa a cor do cartão do tema, não o preto do tema antigo */
.iv-border, .pokemon-card.iv-border, .portrait.iv-border, canvas.iv-border { --iv-fill: var(--card-t); }
.pokemon-card.iv-border:hover, .pokemon-card.iv-border:focus-visible, .pokemon-card.iv-border.selected { --iv-fill: var(--pill-t); }
/* ícone da Mochila (public/assets/ui/bag.png — tools/make-bag-icon.mjs) */
.bag-ico { width: 22px; height: 22px; image-rendering: pixelated; vertical-align: middle; margin: -4px 6px -3px -4px; }
.seg-btn .bag-ico { width: 20px; height: 20px; margin: -4px 4px -3px 0; }
/* fundo da entrada: choque de fogo laranja × azul (src/ui/login-bg.js, shader) — canvas fixo atrás do cartão de entrada */
#login-bg { position: fixed; inset: 0; z-index: 0; width: 100vw; height: 100vh; pointer-events: none; display: block; background: var(--c-void); }
#login-bg.no-gl { background: radial-gradient(ellipse at 20% 80%, var(--type-fire), var(--x-6a1a02) 35%, transparent 60%), radial-gradient(ellipse at 80% 80%, var(--type-water), var(--x-2a1a7a) 35%, transparent 60%), var(--c-void); }
#login-view.hidden ~ #login-bg { display: none; } /* ~ (não +): o convite do Discord (#login-discord) fica entre os dois */
#login-view { position: relative; z-index: 1; background: transparent; }
#login-view .login-card { box-shadow: 0 18px 50px color-mix(in srgb, var(--x-000000) 55%, transparent); }
/* respostas dos comandos de administrador (/online — src/ui/admin-ui.js) */
.log-gm { color: var(--rar-raro); font-family: var(--font); }
/* Outland (src/ui/worldmap-ui.js): quest de entrada, ilhas e desafios */
.wm-tab-outland img { filter: saturate(1.3); }
.wm-quest { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.wm-quest li { color: var(--muted-t); } .wm-quest li.ok { color: var(--green-text); }
.wm-islands { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-bottom: 6px; }
.wm-island { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 10px; background: var(--card-t); border: 1px solid var(--edge-t); font-size: 12px; }
.wm-island small { color: var(--muted-t); } .wm-island.done { border-color: var(--gold-text); } .wm-island.done small { color: var(--gold-text); }
.wm-boss { color: var(--gold-text); }

/* tela "Caçando…" ao voltar do minimizado (src/ui/app.js → catchupOverlay) */
.catchup { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: color-mix(in srgb, var(--x-000000) 62%, transparent); backdrop-filter: blur(2px); }
.catchup-box { display: grid; justify-items: center; gap: 8px; width: min(420px, 92vw); padding: 22px 24px; border-radius: 16px; background: var(--panel-t); color: var(--text-t); border: 1px solid var(--edge-3); box-shadow: var(--shadow-panel); text-align: center; }
.catchup-box b { font: 400 20px var(--display); color: var(--gold-text); }
.catchup-box span { font-size: 13px; color: var(--text-2); }
.catchup-box small { font-size: 12px; color: var(--muted-t); font-variant-numeric: tabular-nums; }
.catchup-bar { display: block; width: 100%; height: 8px; border-radius: 999px; background: var(--inset); overflow: hidden; }
.catchup-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--c-shiny)); transition: width .15s linear; }
.catchup-ball { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--c-panel-2); background: linear-gradient(var(--c-hp) 0 46%, var(--c-panel-2) 46% 54%, var(--rar-comum) 54%); animation: catchup-spin 1s linear infinite; }
@keyframes catchup-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .catchup-ball { animation: none; } }

/* Store (src/ui/store-ui.js): saldo + bônus ativos no topo, seções na lateral (abas no celular), grade de cartões */
.dshop { display: grid; gap: 12px; }
.dshop-bal i.gem, .bp-prem-title i.gem { vertical-align: -2px; margin-right: 4px; }
.dshop-label { display: block; font-size: var(--fs-min); font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--muted-t); }
.dshop-top { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-start; }
.dshop-balance { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--r-lg); background: var(--card-t); border: 1px solid var(--edge-t); }
.dshop-balance .dshop-label { width: 100%; margin-bottom: -6px; }
.dshop-bal { font: 400 22px var(--display); color: var(--blue-text); font-variant-numeric: tabular-nums; }
.dshop-bonus { flex: 1 1 320px; display: grid; align-content: start; gap: 6px; padding: 10px 14px; border-radius: var(--r-lg); background: var(--card-t); border: 1px solid var(--edge-t); }
.dshop-bonus-list { display: flex; flex-wrap: wrap; gap: 6px; }
.dshop-chip { font-size: var(--fs-min); font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--tone-edge); background: var(--tone-bg); color: var(--tone-fg); white-space: nowrap; }
.dshop-chip b { font-variant-numeric: tabular-nums; }
/* tons (cartões, ícones e chips) */
.tone-gold { --tone-bg: var(--gold-soft-a); --tone-fg: var(--gold-text); --tone-edge: color-mix(in srgb, var(--type-ground) 53.3%, transparent); --tone-a: var(--c-shiny); --tone-b: var(--x-b8860b); }
.tone-violet { --tone-bg: var(--tier-soft); --tone-fg: var(--tier-text); --tone-edge: color-mix(in srgb, var(--c-boss) 53.3%, transparent); --tone-a: var(--type-flying); --tone-b: var(--x-5b2fb0); }
.tone-blue { --tone-bg: color-mix(in srgb, var(--rar-raro) 13.3%, transparent); --tone-fg: var(--blue-text); --tone-edge: color-mix(in srgb, var(--rar-raro) 53.3%, transparent); --tone-a: var(--type-ice); --tone-b: var(--x-1f6f9c); }
.tone-green { --tone-bg: var(--green-soft); --tone-fg: var(--green-text); --tone-edge: color-mix(in srgb, var(--type-grass) 53.3%, transparent); --tone-a: var(--x-8ff0a2); --tone-b: var(--x-2a9d4a); }
.tone-red { --tone-a: var(--x-ff9a8f); --tone-b: var(--c-hp-bar); }
.tone-slate { --tone-a: var(--x-8aa0b8); --tone-b: var(--x-3a3d48); }
.tone-pack { --tone-a: var(--c-shiny); --tone-b: var(--c-hp-bar); }
.tone-event { --tone-bg: color-mix(in srgb, var(--type-ground) 14%, transparent); --tone-fg: var(--gold-text); --tone-edge: color-mix(in srgb, var(--type-ground) 50%, transparent); }
.dshop-main { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 14px; align-items: start; }
.dshop-nav { position: sticky; top: 0; display: grid; gap: 4px; padding: 10px; border-radius: var(--r-lg); background: var(--card-t); border: 1px solid var(--edge-t); }
.dshop-nav .dshop-label { margin: 0 4px 4px; }
.dshop-tab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--text-2); font: 600 13px var(--font); cursor: pointer; text-align: left; }
.dshop-tab small { font-size: var(--fs-min); color: var(--faint); font-variant-numeric: tabular-nums; }
.dshop-tab:hover { background: var(--pill-t); color: var(--text-t); }
.dshop-tab.active { background: var(--pill-t); color: var(--text-t); border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.dshop-tab[data-cat="diamonds"] { margin-top: 6px; color: var(--blue-text); }
.dshop-pane { display: grid; gap: 10px; min-width: 0; }
.dshop-pane-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dshop-pane-head h3 { margin: 0; font: 400 16px var(--display); letter-spacing: .5px; text-transform: uppercase; }
.dshop-sub { margin: 6px 0 -2px; font-size: var(--fs-min); font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--muted-t); }
.dshop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px; }
.dshop-card { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; justify-items: center; align-content: start; gap: 6px; padding: 14px 12px 12px; border-radius: var(--r-lg); background: var(--panel-t); border: 1px solid var(--edge-t); text-align: center; transition: border-color .15s, transform .15s; }
.dshop-card:hover { border-color: var(--edge-2); transform: translateY(-1px); }
.dshop-card.wide { grid-column: span 2; }
.dshop-card.active { border-color: color-mix(in srgb, var(--type-grass) 60%, transparent); }
.dshop-card.owned { border-color: color-mix(in srgb, var(--c-ok) 40%, transparent); }
.dshop-badges { position: absolute; top: 8px; right: 8px; left: 8px; display: flex; justify-content: flex-end; gap: 4px; flex-wrap: wrap; pointer-events: none; }
.dshop-badge { font-size: var(--fs-min); font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.dshop-badge.off { background: var(--green-soft); color: var(--green-text); }
.dshop-badge.lim { background: var(--tier-soft); color: var(--tier-text); }
.dshop-badge.on { background: color-mix(in srgb, var(--rar-raro) 13.3%, transparent); color: var(--blue-text); }
.dshop-badge.mine { background: var(--green-soft); color: var(--green-text); }
.dshop-ico { position: relative; width: 72px; height: 72px; display: grid; place-items: center; border-radius: 18px; margin-top: 16px;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--tone-a) 55%, transparent), color-mix(in srgb, var(--tone-b) 35%, transparent) 70%), var(--inset);
  border: 1px solid color-mix(in srgb, var(--tone-a) 45%, transparent); }
.dshop-ico canvas, .dshop-ico img { image-rendering: pixelated; }
.dshop-ico > canvas[data-mon] { width: 60px; height: 60px; }
.dshop .dshop-ico > .ui-ico { width: 44px; height: 44px; }
.dshop .dshop-mini > .ui-ico { width: 24px; height: 24px; }
.dshop-ico-tag { position: absolute; left: -6px; bottom: -6px; font: 700 12px var(--font); padding: 1px 6px; border-radius: 6px; background: var(--tone-b); color: var(--c-ink-light); box-shadow: 0 1px 0 color-mix(in srgb, var(--x-000000) 26.7%, transparent); }
.dshop-ico-dur { position: absolute; right: -6px; top: -6px; font: 700 12px var(--font); padding: 1px 6px; border-radius: 6px; background: var(--bg-app); color: var(--text-t); border: 1px solid var(--edge-2); }
.dshop-vip { display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; font: 400 calc(var(--s) * .32) var(--display); letter-spacing: .5px; color: var(--c-gold-soft);
  background: radial-gradient(circle at 35% 30%, var(--c-ink-light), var(--type-ground) 45%, var(--x-a8740a)); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--x-000000) 20%, transparent), 0 0 0 2px color-mix(in srgb, var(--c-ink-light) 20%, transparent); }
.dshop-pack-grid { display: grid; grid-template-columns: repeat(2, 30px); gap: 3px; }
.dshop-pack-grid.n1 { grid-template-columns: 30px; }
.dshop-pack-grid.n3 > :last-child { grid-column: span 2; justify-self: center; }
.dshop-mini { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; overflow: hidden; background: linear-gradient(var(--tone-a), var(--tone-b)); }
.dshop-mini canvas, .dshop-mini img { width: 26px; height: 26px; }
.dshop-mini .dshop-vip { --s: 24px !important; }
.dshop-name { font-size: 13.5px; line-height: 1.25; }
.dshop-text { margin: 0; font-size: var(--fs-min); line-height: 1.4; color: var(--muted-t); }
.dshop-durs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: 100%; }
.dshop-dur { min-width: 36px; padding: 4px 6px; border-radius: 7px; border: 1px solid var(--edge-2); background: var(--pill-t); color: var(--text-2); font: 600 12px var(--font); cursor: pointer; font-variant-numeric: tabular-nums; }
.dshop-dur:hover { border-color: var(--accent); color: var(--text-t); }
.dshop-dur.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.dshop-note { font-size: var(--fs-min); color: var(--blue-text); }
.dshop-note b { font-variant-numeric: tabular-nums; }
.dshop-foot { width: 100%; align-self: end; }
.dshop-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 7px 10px; border-radius: 10px; cursor: pointer; font: 700 13px var(--font); font-variant-numeric: tabular-nums;
  background: linear-gradient(var(--cta-a), var(--cta-b)); color: var(--c-bg); border: 1px solid transparent; }
.dshop-btn s { opacity: .6; font-weight: 600; margin-right: 4px; }
.dshop-btn:hover:not(:disabled) { filter: brightness(1.07); }
.dshop-btn:disabled { cursor: not-allowed; filter: grayscale(.8); opacity: .55; }
.dshop-btn.ghost { background: var(--pill-t); color: var(--text-t); border-color: var(--edge-2); }
.dshop-btn.ghost:hover:not(:disabled) { border-color: var(--accent); }
.dshop-btn.wearing { background: var(--green-soft); color: var(--green-text); border-color: color-mix(in srgb, var(--c-ok) 40%, transparent); }
.dshop-btn.small { width: auto; padding: 6px 12px; font-size: 12px; }
.dshop-done { display: block; font-size: 12px; font-weight: 600; color: var(--muted-t); padding: 7px 0; }
.dshop-done b { font-variant-numeric: tabular-nums; }
.dshop-foot-note { margin: 0; }
.store-rename { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin-top: 2px; }
.store-rename select, .store-rename input { min-width: 0; flex: 1 1 160px; }
.store-rename .dshop-btn { flex: 1 1 100%; }
.store-packs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.store-packs .chip-btn { display: grid; justify-items: center; line-height: 1.2; border: 1px solid var(--edge-2); background: var(--pill-t); color: var(--text-t); border-radius: 10px; padding: 4px 12px; font: 600 13px var(--font); cursor: pointer; }
.store-packs .chip-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.store-packs small { font-size: var(--fs-min); opacity: .8; }
.store-packs .chip-btn b { display: inline-flex; align-items: center; gap: 3px; }

.store-packs .pack-bonus { margin-top: 2px; font-family: var(--font); font-size: var(--fs-min); font-weight: 700; line-height: 1; font-style: normal; padding: 2px 5px; border-radius: 8px; background: var(--green-soft); color: var(--green-text); border: 1px solid var(--green-text); }
.store-custom input { width: 90px; }
.store-pix { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 12px; border-radius: var(--r-lg); background: var(--card-t); border: 1px solid var(--edge-t); }
.store-qr { width: 200px; height: 200px; border-radius: 8px; flex: none; background: var(--c-ink-light); padding: 6px; image-rendering: pixelated; }
.store-pix-info { display: grid; gap: 8px; flex: 1 1 240px; min-width: 0; }
/* Indique amigos (store-ui.js → referralPane, 2026-10-30) */
.store-ref { margin-top: 12px; padding: 12px; border-radius: var(--r-lg); background: var(--card-t); border: 1px solid var(--edge-t); }
.store-ref-info { display: grid; gap: 8px; min-width: 0; }
.store-ref-info p { margin: 0; }
.store-ref-link { display: flex; gap: 8px; align-items: center; }
.store-ref-link input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 12px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--edge-t); background: var(--c-panel); color: var(--text); }
.store-pix-info p { margin: 0; }
.store-pix-info .dshop-btn { justify-self: start; width: auto; }
.store-pix-info .ok { color: var(--c-ok); }
.store-pix-copy { display: flex; gap: 6px; min-width: 0; }
.store-pix-copy input { flex: 1 1 auto; min-width: 0; font: 12px ui-monospace, monospace; }
.store-pix-copy .dshop-btn { flex: none; }
.store-pix-status { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.store-pix-status b { font-variant-numeric: tabular-nums; }
.store-pix-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--type-ground); flex: none; animation: pix-pulse 1.4s ease-in-out infinite; }
@keyframes pix-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .store-pix-dot { animation: none; } }
.store-pix.done { border-color: color-mix(in srgb, var(--c-ok) 50.2%, transparent); }
@media (max-width: 560px) { .store-pix { justify-content: center; } .store-qr { width: 180px; height: 180px; } }
/* Histórico da Store (2026-10-18): totais + lista com etiqueta da origem (Pix / Market / Store) */
.hist-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.hist-card { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--r-lg); background: var(--card-t); border: 1px solid var(--edge-t); border-left-width: 4px; min-width: 0; }
.hist-card b { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font-size: 15px; font-variant-numeric: tabular-nums; }
.hist-card small { font-size: var(--fs-min); color: var(--muted-t); }
.hist-card.pix, .hist-tag.pix { border-left-color: var(--rar-incomum); }
.hist-card.store, .hist-tag.store { border-left-color: var(--type-ground); }
.hist-card.sell { border-left-color: var(--c-ok); }
.hist-card.buy, .hist-tag.market { border-left-color: var(--type-water); }
.hist-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.hist-tools .dshop-durs { width: auto; justify-content: flex-start; }
.hist-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hist-row { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "tag main val" "tag main when"; align-items: center; column-gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--card-t); border: 1px solid var(--edge-t); }
.hist-tag { grid-area: tag; font-size: var(--fs-min); font-weight: 700; padding: 2px 8px; border-radius: 99px; border-left: 4px solid; background: var(--pill-t); color: var(--text-t); }
.hist-main { grid-area: main; display: grid; min-width: 0; }
.hist-main b { font-size: 13px; overflow-wrap: anywhere; }
.hist-main small { font-size: var(--fs-min); color: var(--muted-t); }
.hist-val { grid-area: val; display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hist-val.plus { color: var(--c-ok); }
.hist-val.minus { color: var(--c-hp); }
.hist-when { grid-area: when; font-size: var(--fs-min); color: var(--muted-t); text-align: right; white-space: nowrap; }
.store-msg { margin: 0; font-weight: 600; }
.store-msg.ok { color: var(--c-ok); }
.diamond-wallet.pill { cursor: pointer; }
label.locked { opacity: .65; }
@media (max-width: 760px) {
  .dshop-main { grid-template-columns: minmax(0, 1fr); }
  .dshop-nav { position: static; display: flex; gap: 6px; overflow-x: auto; padding: 6px; scrollbar-width: none; }
  .dshop-nav .dshop-label { display: none; }
  .dshop-tab { flex: none; padding: 7px 12px; }
  .dshop-tab.active { box-shadow: inset 0 -3px 0 var(--accent); }
  .dshop-tab[data-cat="diamonds"] { margin-top: 0; }
  .dshop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dshop-card { padding: 12px 8px 10px; }
  .dshop-badges { position: static; justify-content: center; min-height: 18px; margin-bottom: -10px; }
  .dshop-badge { font-size: var(--fs-min); padding: 1px 5px; }
  .dshop-chip { font-size: var(--fs-min); padding: 2px 8px; }
  .dshop-card.wide { grid-column: 1 / -1; }
  .dshop-balance { flex: 1 1 100%; }
  .dshop-bonus { flex-basis: 100%; }
}
@media (max-width: 360px) { .dshop-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .dshop-card { transition: none; } .dshop-card:hover { transform: none; } }

/* Passe de Batalha (store-ui.js → passPane): aba própria na Store */
.dshop-tab[data-cat="pass"] { color: var(--gold-text); background: linear-gradient(90deg, color-mix(in srgb, var(--type-ground) 13.3%, transparent), transparent); border-color: color-mix(in srgb, var(--type-ground) 33.3%, transparent); margin-bottom: 6px; }
.dshop-tab[data-cat="pass"].active { border-color: var(--accent); }
.bp { display: grid; gap: 12px; }
.bp-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; }
.bp-today, .bp-prem { display: grid; align-content: start; gap: 10px; padding: 14px; border-radius: var(--r-lg); background: var(--card-t); border: 1px solid var(--edge-t); }
.bp-day b { display: block; font: 400 26px var(--display); letter-spacing: .5px; }
.bp-day small { font: 600 14px var(--font); color: var(--muted-t); }
.bp-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bp-lane { display: grid; gap: 6px; align-content: start; padding: 8px 10px; border-radius: 10px; background: var(--inset); border: 1px solid color-mix(in srgb, var(--type-grass) 33.3%, transparent); }
.bp-lane.prem { border-color: color-mix(in srgb, var(--type-ground) 53.3%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--type-ground) 12.2%, transparent), var(--inset) 60%); }
.bp-lane.prem.locked { opacity: .8; }
.bp-lane-h { font-size: var(--fs-min); font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--muted-t); }
.bp-lane-rw { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-lane-rw .bp-rw small { font-size: 12px; }
.bp-claim { padding: 10px; font-size: 15px; }
.bp-wait { margin: 0; padding: 10px; border-radius: 10px; background: var(--inset); text-align: center; font-weight: 600; color: var(--text-2); }
.bp-wait b { color: var(--x-ff7ab8); font-variant-numeric: tabular-nums; }
.bp-prem { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--type-ground) 60%, transparent); background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--type-ground) 20%, transparent), transparent 60%), var(--card-t); }
.bp-prem.owned { border-color: color-mix(in srgb, var(--c-ok) 53.3%, transparent); background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--c-ok) 16.5%, transparent), transparent 60%), var(--card-t); }
.bp-prem-title { font: 400 22px var(--display); color: var(--gold-text); }
.bp-prem.owned .bp-prem-title { color: var(--green-text); }
.bp-prem-title small { font: 600 12px var(--font); color: var(--muted-t); }
.bp-value { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 12.5px; }
.bp-note { margin: 0; font-size: 12px; color: var(--gold-text); }
.bp-progress { position: relative; height: 10px; border-radius: 999px; background: var(--inset); border: 1px solid var(--edge-t); margin: 6px 4px 2px; }
.bp-progress > i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--type-grass), var(--type-ground)); }
.bp-progress > b { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 13px; line-height: 1; color: var(--faint); text-shadow: 0 1px 0 color-mix(in srgb, var(--x-000000) 53.3%, transparent); }
.bp-progress > b.on { color: var(--c-shiny); }
.bp-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: var(--fs-min); color: var(--muted-t); }
.bp-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.bp-key.free { background: var(--type-grass); } .bp-key.prem { background: var(--type-ground); }
.bp-track { display: grid; grid-auto-flow: column; grid-auto-columns: 104px; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; }
.bp-col { display: grid; grid-template-rows: auto 1fr 1fr; gap: 6px; scroll-snap-align: start; }
.bp-col-day { text-align: center; font-size: var(--fs-min); font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted-t); }
.bp-col.mile .bp-col-day { color: var(--gold-text); }
.bp-col.today .bp-col-day { color: var(--text-t); }
.bp-cell { position: relative; min-height: 74px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 4px 6px; padding: 8px 4px; border-radius: 10px; background: var(--panel-t); border: 1px solid color-mix(in srgb, var(--type-grass) 40%, transparent); }
.bp-cell.prem { border-color: color-mix(in srgb, var(--type-ground) 53.3%, transparent); background: linear-gradient(170deg, color-mix(in srgb, var(--type-ground) 9.4%, transparent), var(--panel-t) 70%); }
.bp-cell.prem.locked .bp-rw { opacity: .45; filter: grayscale(.6); }
.bp-col.mile .bp-cell { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--type-ground) 26.7%, transparent); }
.bp-col.today .bp-cell.free, .bp-col.today .bp-cell.prem:not(.locked) { box-shadow: 0 0 0 2px var(--accent), 0 0 14px color-mix(in srgb, var(--type-ground) 33.3%, transparent); }
.bp-cell.got .bp-rw { opacity: .4; }
.bp-check { position: absolute; right: 5px; top: 3px; font-style: normal; font-weight: 800; color: var(--green-text); }
.bp-lock { position: absolute; right: 4px; bottom: 2px; font-size: var(--fs-min); }
.bp-lane-h .bp-lock { position: static; }
.bp-rw { display: grid; justify-items: center; gap: 1px; min-width: 32px; }
.bp-rw small { font-size: var(--fs-min); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.bp-rw img, .bp-rw .ui-ico { width: 32px; height: 32px; image-rendering: pixelated; }
.bp-mini { width: 28px; height: 28px; margin: 2px; display: grid; place-items: center; border-radius: 6px; overflow: hidden; background: linear-gradient(var(--tone-a), var(--tone-b)); font-style: normal; }
.bp-mini canvas, .bp-mini img, .bp-mini .ui-ico { width: 24px !important; height: 24px !important; }
.bp-mini .dshop-vip { --s: 24px !important; }
@media (max-width: 760px) {
  .bp-top { grid-template-columns: minmax(0, 1fr); }
  .bp-track { grid-auto-columns: 92px; }
}

/* Trocar Outfit (store-ui.js → outfitPane): prévia, roupas, partes e paleta Tibia de 133 cores (19 × 7) */
.dshop-tab[data-cat="outfit"] { color: var(--blue-text); }
.of { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 14px; align-items: start; }
.of-preview { display: grid; justify-items: center; gap: 8px; padding: 14px; border-radius: var(--r-lg); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rar-raro) 13.3%, transparent), transparent 70%), var(--card-t); border: 1px solid var(--edge-t); }
.of-canvas { width: 128px; height: 128px; image-rendering: pixelated; }
.of-rot { display: flex; gap: 6px; }
.of-main { display: grid; gap: 8px; min-width: 0; }
.of-outfits { display: flex; flex-wrap: wrap; gap: 6px; }
.of-opt { display: grid; justify-items: center; gap: 2px; width: 74px; padding: 6px 4px; border-radius: 10px; border: 1px solid var(--edge-2); background: var(--pill-t); color: var(--text-2); font: 600 12px var(--font); cursor: pointer; }
.of-opt canvas { width: 44px; height: 44px; image-rendering: pixelated; }
.of-opt.active { border-color: var(--accent); color: var(--text-t); box-shadow: inset 0 0 0 1px var(--accent); }
.of-opt.more span { display: grid; place-items: center; width: 44px; height: 44px; font-size: 22px; color: var(--muted-t); }
.of-parts { display: flex; flex-wrap: wrap; gap: 6px; }
.of-part { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--edge-2); background: var(--pill-t); color: var(--text-2); font: 600 12px var(--font); cursor: pointer; }
.of-part i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--x-000000) 40%, transparent); }
.of-part.active { border-color: var(--accent); color: var(--text-t); }
.of-palette { display: grid; grid-template-columns: repeat(19, minmax(0, 1fr)); gap: 2px; max-width: 520px; }
.of-sw { aspect-ratio: 1; min-width: 0; padding: 0; border: 1px solid color-mix(in srgb, var(--x-000000) 46.7%, transparent); border-radius: 3px; cursor: pointer; }
.of-sw:hover { transform: scale(1.15); }
.of-sw.on { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 1; }
.of-actions { display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 760px) { .of { grid-template-columns: minmax(0, 1fr); } }

/* Painel "Bônus ativos" (store-ui.js → BonusPanel) no topo do cartão Time/Mochila/Captura */
.bonus-panel { display: grid; gap: 2px; width: 100%; box-sizing: border-box; margin: 0 0 8px; padding: 5px 8px; border-radius: 10px; background: var(--card-t); border: 1px solid var(--edge-t); color: var(--text-t); }
.bonus-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.bonus-store { background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-min); font-weight: 700; color: var(--muted-t); cursor: pointer; }
.bonus-store:hover { color: var(--accent); }
.bonus-panel[hidden] { display: none; }
.bonus-head { font-size: var(--fs-min); font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--muted-t); }
.bonus-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 10px; align-items: center; gap: 6px; width: 100%; padding: 1px 0; background: none; border: 0; color: inherit; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.bonus-row:hover .bonus-name { color: var(--accent); }
.bonus-total { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--green-text); white-space: nowrap; }
.bonus-arrow { font-style: normal; font-size: var(--fs-min); color: var(--muted-t); text-align: right; }
.bonus-detail { display: grid; gap: 2px; margin: 1px 0 3px 24px; padding: 3px 0 3px 6px; border-left: 2px solid var(--edge-t); font-size: var(--fs-min); color: var(--muted-t); }
.bonus-part { display: grid; grid-template-columns: minmax(0, 1fr) auto 50px; align-items: center; gap: 6px; }
.bonus-part b { color: var(--text-t); font-variant-numeric: tabular-nums; }
.bonus-part small { color: var(--x-ff7ab8); font-size: inherit; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.bonus-note { margin: 0; line-height: 1.25; }
.bonus-ico { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 5px; overflow: hidden; background: linear-gradient(var(--tone-a, var(--x-8aa0b8)), var(--tone-b, var(--x-3a3d48))); }
.bonus-ico.tone-event { --tone-a: var(--c-shiny); --tone-b: var(--c-gold-3); }
.bonus-ico canvas, .bonus-ico img, .bonus-ico .ui-ico { width: 14px; height: 14px; image-rendering: pixelated; }
.bonus-ico .dshop-vip { --s: 14px !important; }
.bonus-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* cartões do time e do depósito (town-ui.js → slotHtml): cada selo num canto, dentro do cartão e fora do Pokémon
   ↖ nível · ↗ nota do IV · ↙ held · ↘ bola de captura · embaixo no meio: Shiny ✦ e líder ★ (tamanhos de antes) */
.slot .lvl { left: 6px; top: 4px; bottom: auto; }
.slot .iv-badge, .slot .grade-badge { top: 5px; right: 5px; bottom: auto; }
.slot .star, .slot .leader { left: 50%; right: auto; top: auto; bottom: 5px; transform: translateX(-50%); line-height: 1; }
.slot .star:has(+ .leader) { transform: translateX(-110%); }
.slot .star + .leader { transform: translateX(10%); }
.slot .slot-held { left: 5px; top: auto; bottom: 5px; }
.slot .capture-ball { right: 5px; bottom: 5px; }
.depot-grid .slot .slot-held { left: 3px; bottom: 3px; }
.depot-grid .slot .capture-ball { right: 3px; bottom: 3px; }
/* depósito: faixa embaixo para os selos (o Pokémon 44 px continua igual, em cima) */
.depot-grid .slot { height: 70px; }
/* time (cartão estreito, 6 por linha): Shiny ✦ e líder ★ numa linha acima do held e da bola */
.team-grid .slot { height: 100px; }
.team-grid .slot .star, .team-grid .slot .leader { bottom: 24px; }

/* título "PokeHunt" da tela de entrada (login-ui.js → FIRE_TITLE): o mesmo choque de fogo do fundo — laranja à esquerda, azul
   à direita, costura clara no meio, brilho dos dois lados, labareda tremendo (filtro #fire-wobble) e um pulso leve de calor */
.login-view { row-gap: 14px; align-content: start; }
.fire-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.fire-title { margin: 3vh 0 0; text-align: center; font: 400 clamp(52px, 10vw, 112px)/1.05 var(--display); letter-spacing: 3px; user-select: none; }
.fire-text { display: inline-block; padding: 0 .12em; color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink-light) 55%, transparent) 0%, transparent 38%),
              linear-gradient(90deg, var(--x-ff3d00) 0%, var(--type-fire) 20%, var(--c-shiny) 38%, var(--c-ink-light) 50%, var(--x-a9dcff) 62%, var(--type-water) 80%, var(--type-dragon) 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: url(#fire-wobble) drop-shadow(-6px 0 14px color-mix(in srgb, var(--type-fire) 75%, transparent)) drop-shadow(6px 0 16px color-mix(in srgb, var(--type-water) 70%, transparent)) drop-shadow(0 2px 2px color-mix(in srgb, var(--x-000000) 60%, transparent));
  animation: fire-heat 2.6s ease-in-out infinite alternate; }
@keyframes fire-heat { from { opacity: .92; transform: translateY(0) scaleY(1); } to { opacity: 1; transform: translateY(-2px) scaleY(1.025); } }
@media (prefers-reduced-motion: reduce) { .fire-text { animation: none; filter: drop-shadow(-6px 0 14px color-mix(in srgb, var(--type-fire) 75%, transparent)) drop-shadow(6px 0 16px color-mix(in srgb, var(--type-water) 70%, transparent)); } }
#login-view .login-card.auth, #login-view .login-card.loading { margin-top: 0; }

/* Pokédex: "Onde encontrar" (pokedex-ui.js → whereHtml) e moves que o selvagem usa */
.dex-where > div { margin: 6px 0 2px; }
.dex-where-list { list-style: none; margin: 3px 0 0; padding: 0 0 0 4px; display: grid; gap: 2px; font-size: 12px; }
.dex-where-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.dex-region { font-size: var(--fs-min); font-weight: 700; padding: 0 6px; border-radius: 999px; background: var(--pill-t); border: 1px solid var(--edge-2); color: var(--text-2); }
.dex-moves tr.dex-move-active td:first-child + td { font-weight: 700; color: var(--gold-text); }
.dex-move-fx { display: block; font-size: var(--fs-min); font-weight: 400; color: var(--text-2); line-height: 1.25; max-width: 220px; }

/* Área de Bosses (src/ui/boss-ui.js) */
.boss-area { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; min-height: 520px; }
.boss-list { display: grid; align-content: start; gap: 4px; max-height: 64vh; overflow-y: auto; padding-right: 4px; }
.boss-row { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 10px; border: 1px solid var(--edge-t); background: var(--card-t); color: var(--text-t); font: inherit; text-align: left; cursor: pointer; }
.boss-row canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.boss-row small { color: var(--muted-t); font-size: var(--fs-min); white-space: nowrap; }
.boss-row.active { border-color: var(--c-boss); box-shadow: 0 0 0 1px var(--c-boss) inset, 0 0 14px color-mix(in srgb, var(--c-boss) 35%, transparent); }
.boss-row.locked { opacity: .55; }
.boss-detail { display: grid; align-content: start; gap: 10px; padding: 14px; border-radius: 14px; background: var(--card-t); border: 1px solid var(--edge-t); min-width: 0; }
.boss-head { display: grid; grid-template-columns: 104px 1fr; gap: 14px; align-items: center; }
.boss-big { width: 104px; height: 104px; image-rendering: pixelated; border-radius: 12px; background: radial-gradient(circle, color-mix(in srgb, var(--c-boss) 25%, transparent), transparent 70%), var(--inset); }
.boss-head h3 { margin: 0 0 6px; font: 400 24px var(--display); }
.boss-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.boss-chips .warn { color: var(--c-danger); }
.boss-types { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.boss-types small { margin-left: 2px; font-size: var(--fs-min); opacity: .85; }
.boss-detail h4 { margin: 4px 0 0; }
.boss-rewards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.boss-reward { display: grid; justify-items: center; gap: 3px; padding: 10px 8px; border-radius: 12px; border: 2px solid var(--edge-2); background: var(--inset); text-align: center; }
.boss-reward b { font-size: 13px; }
.boss-reward small { font-size: var(--fs-min); }
.boss-reward-ico { font-size: 26px; line-height: 1; }
.boss-chance { padding: 2px 10px; border-radius: 999px; border: 1px solid currentColor; font-weight: 700; font-size: 13px; }
.boss-reward.rar-rara { border-color: var(--type-water); color: var(--x-aabeff); }
.boss-reward.rar-epica { border-color: var(--rar-ultra); color: var(--x-ff9de2); }
.boss-reward.rar-mitica { border-color: var(--c-boss); color: var(--c-tier); }
.boss-reward.rar-lendaria { border-color: var(--type-ground); color: var(--c-shiny); }
.boss-reward b, .boss-reward .muted { color: var(--text-t); }
.boss-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 14px; align-items: end; }
.boss-team { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
.boss-team span { display: grid; justify-items: center; padding: 4px; border-radius: 8px; background: var(--inset); border: 1px solid var(--edge-t); font-size: var(--fs-min); }
.boss-team span.ok { border-color: var(--c-ok); }
.boss-team canvas { width: 36px; height: 36px; image-rendering: pixelated; }
.boss-team p { flex-basis: 100%; margin: 2px 0 0; }
.boss-team .warn { color: var(--c-danger); }
.boss-actions { display: grid; gap: 6px; }
.boss-entry { padding: 8px 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--c-danger) 40%, transparent); background: color-mix(in srgb, var(--rar-mitico) 8%, transparent); font-size: 13px; }
.boss-fight { min-height: 40px; font-size: 14px; }
@media (max-width: 760px) { .boss-area { grid-template-columns: 1fr; } .boss-list { max-height: 180px; } .boss-foot { grid-template-columns: 1fr; } }
.boss-chips .chip { background: var(--pill-t); color: var(--text-t); border: 1px solid var(--edge-2); border-radius: 999px; padding: 2px 9px; font-size: var(--fs-min); font-weight: 600; }

/* Rastreio de Pokémon: link no chat ([poke:ID] → console-ui.js) e ficha (pokemon-ui.js) */
.chat-poke { display: inline-block; margin: 0 2px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--c-xp); background: color-mix(in srgb, var(--c-xp) 14%, transparent); color: var(--x-9fd0ff); font: 600 12px var(--font); cursor: pointer; vertical-align: baseline; }
.chat-poke.shiny { border-color: var(--type-ground); background: color-mix(in srgb, var(--type-ground) 14%, transparent); color: var(--c-shiny); }
.chat-poke-card { position: fixed; z-index: 120; display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; padding: 10px 12px; max-width: 320px; border-radius: 12px; background: var(--panel-t); border: 1px solid var(--edge-3); box-shadow: var(--shadow-panel); color: var(--text-t); }
.chat-poke-card canvas { width: 64px; height: 64px; image-rendering: pixelated; }
.chat-poke-card div { display: grid; gap: 2px; }
.pokemon-track { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 6px; }
.pokemon-track .muted { font-family: ui-monospace, monospace; font-size: var(--fs-min); }
/* Janela do administrador (/inspect, /scan — admin-ui.js) */
.gm-window { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; background: color-mix(in srgb, var(--x-000000) 60%, transparent); padding: 16px; }
.gm-box { width: min(1100px, 100%); max-height: 88vh; display: grid; grid-template-rows: auto minmax(0, 1fr); border-radius: 14px; background: var(--bg-app); border: 1px solid var(--edge-3); box-shadow: var(--shadow-screen); }
.gm-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--edge-t); }
.gm-body { overflow: auto; padding: 12px 14px; color: var(--text-t); font-size: 13px; }
.gm-body h4 { margin: 14px 0 6px; }
.gm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.gm-grid > div { padding: 10px; border-radius: 10px; background: var(--card-t); border: 1px solid var(--edge-t); line-height: 1.6; }
.gm-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.gm-table th, .gm-table td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--edge-t); }
.gm-list { margin: 0; padding-left: 18px; font-size: 12px; display: grid; gap: 2px; }
.mono { font-family: ui-monospace, monospace; font-size: var(--fs-min); }

/* held com sprite (held-badge.js → tools/build-held-sprites.mjs): sem a bolinha de CSS antiga */
.held-badge.held-sprite { background: none; border: 0; box-shadow: none; border-radius: 0; }
.held-badge.held-sprite img { display: block; width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(0 0 3px var(--held)); }

/* Caçada por respawn (protótipo, mapa grande): o mapa é o protagonista — colunas laterais mais estreitas e chat mais baixo */
@media (min-width: 1241px) {
  .hunt-layout.hunt-big { grid-template-columns: 250px minmax(0, 1fr) 290px; gap: 10px; padding: 10px; }
  .hunt-layout.hunt-big .hunt-center .console-panel { flex: 0 0 150px; min-height: 110px; }
  .hunt-layout.hunt-big .hunt-left > .panel, .hunt-layout.hunt-big .hunt-right > .panel { zoom: .88; }
}

/* Mapa da caçada: sem os quadros de onda/tempo por cima (ficam ocultos); botões de zoom no canto */
.arena-side { display: none; }
.map-zoom { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.map-zoom .btn { width: 34px; height: 34px; padding: 0; font-size: 18px; line-height: 1; background: var(--overlay); border: 1px solid var(--edge-2); color: var(--text-t); backdrop-filter: blur(6px); }
.map-zoom .btn:hover { border-color: var(--accent, var(--type-ground)); }
.fx-pop { position: absolute; right: 42px; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--overlay); border: 1px solid var(--edge-2); color: var(--text-t); backdrop-filter: blur(6px); white-space: nowrap; font-size: 12px; }
.fx-pop input { width: 110px; accent-color: var(--accent, var(--type-ground)); }
.fx-pop b { min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }

/* Modo "só números" (numbers-ui.js): cobre o mapa da caçada com os números da sessão */
.numbers-view { position: absolute; inset: 0; z-index: 3; overflow: auto; background: var(--panel, var(--c-panel)); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.arena-wrap.numbers-on .map-zoom, .arena-wrap.numbers-on .hud-map, .arena-wrap.numbers-on .hud-hint { display: none; }
.nv-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nv-head > b { font-family: var(--display); letter-spacing: .5px; }
.nv-map { flex: 1; min-width: 120px; background: var(--overlay); border: 1px solid var(--edge-2); border-radius: 8px; padding: 4px 10px; font-weight: 600; }
.nv-time { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.nv-time i { width: 8px; height: 8px; border-radius: 50%; background: var(--x-7a7a7a); }
.nv-time i.on { background: var(--type-grass); box-shadow: 0 0 6px var(--type-grass); }
.nv-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.nv-card { background: var(--overlay); border: 1px solid var(--edge-2); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nv-k { font-size: var(--fs-min); letter-spacing: 1px; text-transform: uppercase; color: var(--text-2); }
.nv-big { font-size: 22px; font-variant-numeric: tabular-nums; }
.nv-big.neg { color: var(--rar-mitico); } .nv-big.pos { color: var(--x-6cff6c); }
.nv-s { font-size: var(--fs-min); color: var(--text-2); }
.nv-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; min-height: 0; }
.nv-list { background: var(--overlay); border: 1px solid var(--edge-2); border-radius: 10px; padding: 8px 10px; overflow: auto; min-height: 140px; }
.nv-list h4 { margin: 2px 0 6px; font-size: var(--fs-min); letter-spacing: 1px; text-transform: uppercase; color: var(--text-2); }
.nv-caps { display: flex; flex-direction: column; gap: 4px; }
.nv-cap { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px; padding: 2px 4px; border-radius: 6px; }
.nv-cap.shiny { background: color-mix(in srgb, var(--c-shiny) 12%, transparent); }
.nv-cap small { display: block; color: var(--text-2); font-size: var(--fs-min); }
.nv-drops { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.nv-chip { display: inline-flex; align-items: center; gap: 4px; background: color-mix(in srgb, var(--x-000000) 25%, transparent); border: 1px solid var(--edge-2); border-radius: 8px; padding: 3px 6px; font-size: 12px; }
.nv-chip img { width: 24px; height: 24px; image-rendering: pixelated; }
.nv-chip small { color: var(--text-2); }
.nv-empty { color: var(--text-2); font-size: 12px; text-align: center; margin: 18px 0; }
#btn-numbers.numbers-btn-on { border-color: var(--accent, var(--type-ground)); color: var(--accent, var(--type-ground)); }
@media (max-width: 760px) { .nv-lists { grid-template-columns: 1fr; } }

/* Automações (automations-ui.js) e saída da caçada */
.card-auto .auto-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.auto-row { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 8px; cursor: pointer; }
.auto-row:hover { background: color-mix(in srgb, var(--c-ink-light) 4%, transparent); }
.auto-row.locked { opacity: .55; }
.auto-txt { display: flex; flex-direction: column; font-size: 12px; line-height: 1.2; }
.auto-txt small { color: var(--text-2); font-size: var(--fs-min); }
.arena-controls label.check.switch:has(#auto-repeat) { display: none; } /* agora fica no painel Automações */
#btn-start.waiting { opacity: .75; }
.btn-giveup { border-color: var(--c-hp-bar); color: var(--x-ff8a80); }
.btn-red:hover:not(:disabled) { background: linear-gradient(var(--pause-a), var(--pause-b)); filter: brightness(1.06); } /* não escurece com o mouse em cima */
.auto-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: -2px 0 4px 46px; font-size: var(--fs-min); color: var(--text-2); }
.auto-sub input { width: 48px; padding: 2px 4px; }
.auto-sub select { padding: 2px 4px; font-size: var(--fs-min); max-width: 150px; }

/* Missões diárias (Professor Oak) */
.daily { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.daily-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.daily .quest-foot > span:last-child { display: inline-flex; gap: 6px; }
.daily-bonus { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; border: 1px dashed var(--edge-2); }
.daily-bonus.done { border-color: var(--accent, var(--type-ground)); }
.daily-bonus.claimed { opacity: .6; }
.dock-tile.has-reward::after { content: ''; position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--rar-mitico); box-shadow: 0 0 6px var(--rar-mitico); }
.dock-tile { position: relative; }

/* Automações com sprites: interruptor + itens (quantidade; o escolhido em destaque) */
.auto-list { display: flex; flex-direction: column; gap: 10px; }
.auto-item { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--edge-2); }
.auto-item:last-child { border-bottom: 0; }
.auto-item.locked { opacity: .6; }
.auto-item .auto-row { padding: 0; }
.auto-item .auto-txt { font-size: 13px; font-weight: 600; flex: 1; }
.auto-tag { font-size: var(--fs-min); font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--c-xp-bar); color: var(--c-ink-light); letter-spacing: .5px; }
.auto-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 42px; }
.auto-chip { display: inline-flex; align-items: center; gap: 4px; min-width: 64px; padding: 4px 8px; border-radius: 8px; cursor: pointer;
  background: var(--card-t); border: 1px solid var(--edge-2); color: var(--text-t); font: inherit; font-size: 12px; }
.auto-chip img { width: 22px; height: 22px; image-rendering: pixelated; }
.auto-chip:hover { border-color: var(--accent, var(--type-ground)); }
.auto-chip.selected { border-color: var(--accent, var(--type-ground)); box-shadow: 0 0 0 1px var(--accent, var(--type-ground)) inset; background: var(--gold-soft-b, var(--c-panel-3)); }
.auto-chip.empty { opacity: .45; }
.auto-item:not(.on) .auto-chips, .auto-item:not(.on) .auto-slider { opacity: .55; }
.auto-slider { display: flex; align-items: center; gap: 8px; padding-left: 42px; font-size: var(--fs-min); color: var(--text-2); }
.auto-slider input[type=range] { flex: 1; accent-color: var(--accent, var(--type-ground)); }
.auto-slider b { min-width: 34px; text-align: right; color: var(--text-t); }
.auto-note { padding-left: 42px; font-size: var(--fs-min); color: var(--text-2); }

/* Barra de vida do Boss (topo do mapa, porcentagem dentro) */
.boss-bar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: min(60%, 520px); z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 3px; }
.bb-name { font-family: var(--display); font-size: 14px; color: var(--type-electric); text-shadow: 0 1px 2px var(--x-000000), 0 0 6px var(--x-000000); white-space: nowrap; }
.bb-track { position: relative; width: 100%; height: 20px; border-radius: 6px; background: color-mix(in srgb, var(--x-000000) 75%, transparent); border: 2px solid var(--c-panel-2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--type-electric) 33.3%, transparent), 0 2px 8px color-mix(in srgb, var(--x-000000) 53.3%, transparent); overflow: hidden; }
.bb-track i { position: absolute; inset: 0 auto 0 0; transition: width .2s linear; }
.bb-track i.hi { background: linear-gradient(var(--x-5fe36f), var(--x-2a9d4a)); }
.bb-track i.mid { background: linear-gradient(var(--c-shiny), var(--rar-lendario)); }
.bb-track i.lo { background: linear-gradient(var(--c-danger), var(--type-fighting)); }
.bb-track b { position: relative; display: block; text-align: center; line-height: 16px; font-size: 12px; color: var(--c-ink-light); text-shadow: 0 1px 2px var(--x-000000), 0 0 3px var(--x-000000); font-variant-numeric: tabular-nums; }
.arena-wrap.numbers-on .boss-bar { display: none; }
.outland-tag { margin: 2px 0 4px; padding: 3px 8px; border-radius: 8px; background: color-mix(in srgb, var(--type-fire) 14%, transparent); border: 1px solid color-mix(in srgb, var(--type-fire) 45%, transparent); color: var(--c-gold-2); }

/* Market entre jogadores (market-ui.js) */
.mk-tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.mk-tools input { flex: 1; min-width: 160px; }
.mk-list { display: flex; flex-direction: column; gap: 4px; }
.mk-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 8px; background: var(--card-t); border: 1px solid var(--edge-2); }
.mk-row > .mk-item { grid-column: 1 / 3; }
.mk-what { display: flex; flex-direction: column; min-width: 0; }
.mk-what small { color: var(--text-2); font-size: var(--fs-min); }
.mk-item { flex-direction: row; align-items: center; gap: 8px; }
.mk-ico { width: 26px; height: 26px; image-rendering: pixelated; display: inline-grid; place-items: center; font-size: 18px; }
.mk-seller { text-align: right; line-height: 1.2; }
.mk-price { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
/* Market em diamantes (2026-10-18): seletor de moeda no anúncio; o ícone 💎 dentro dos botões do filtro não vira contador */
.mk-cur { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mk-cur .mk-side-i { width: auto; border-color: var(--edge-2); }
.mk-pick { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.mk-side-i i.gem { margin: 0 2px; padding: 0; border-radius: 0; font-size: inherit; background: url(../../assets/ui/icons/diamond.png) center / 16px 16px no-repeat; }
.mk-price.dia b { color: var(--blue-text); }
.mk-price img { width: 18px; height: 18px; }
.mk-sellbox { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 10px; border-radius: 10px; background: var(--card-t); border: 1px solid var(--edge-2); }
.mk-sellbox input { width: 140px; }
.mk-sellbox .mk-discord { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; } .mk-sellbox .mk-discord input { width: auto; margin-top: 3px; } /* anunciar também no Discord (2026-11-02) */
@media (max-width: 760px) { .mk-row { grid-template-columns: 44px minmax(0, 1fr) auto; } .mk-seller { display: none; } }

/* Guia de primeiros passos (guide-ui.js) */
.guide-card { position: fixed; right: 16px; bottom: 84px; width: 300px; z-index: 40; background: var(--panel-t, var(--c-panel-2)); border: 1px solid var(--edge-2);
  border-radius: 12px; padding: 10px 12px; box-shadow: 0 10px 30px color-mix(in srgb, var(--x-000000) 45%, transparent); display: flex; flex-direction: column; gap: 6px; }
.guide-card.ready { border-color: var(--accent, var(--type-ground)); box-shadow: 0 0 0 1px var(--accent, var(--type-ground)), 0 10px 30px color-mix(in srgb, var(--x-000000) 45%, transparent); }
.guide-card.min { width: auto; padding: 0; background: transparent; border: 0; box-shadow: none; }
.guide-pill { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--edge-2); background: var(--panel-t, var(--c-panel-2)); color: var(--text-t); cursor: pointer; font: inherit; font-size: 12px; box-shadow: 0 6px 18px color-mix(in srgb, var(--x-000000) 40%, transparent); }
.guide-card.min.ready .guide-pill { border-color: var(--accent, var(--type-ground)); color: var(--accent, var(--type-ground)); }
.guide-head { display: flex; align-items: center; gap: 8px; }
.guide-head b { flex: 1; }
.guide-x { background: none; border: 0; color: var(--text-2); cursor: pointer; font-size: 18px; line-height: 1; }
.guide-title { font-size: 14px; }
.guide-text { margin: 0; font-size: 12px; color: var(--text-2); line-height: 1.35; }
.guide-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@media (max-width: 760px) { .guide-card { right: 8px; left: 8px; width: auto; bottom: 8px; } .guide-card.min { left: auto; } }
.chat-title { margin-right: 3px; cursor: help; }
.chat-emblem { width: 16px; height: 16px; margin: 0 3px 0 4px; vertical-align: -3px; image-rendering: pixelated; cursor: help; filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--x-000000) 35%, transparent)); } /* emblema do título, antes do nome */

/* Ranking semanal */
.rk-list { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rk-list li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--card-t); border: 1px solid var(--edge-2); }
.rk-list li.me { border-color: var(--accent, var(--type-ground)); }
.rk-pos { font-size: 16px; text-align: center; }
.rk-val { font-variant-numeric: tabular-nums; font-weight: 700; }
.rk-last { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; }

.away-modal { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--x-000000) 55%, transparent); display: grid; place-items: center; padding: 16px; }

/* Marcos da Pokédex (dex-rewards.js) */
.dex-ms { padding: 6px 8px; border-radius: 8px; background: var(--card-t); border: 1px solid var(--edge-2); margin-bottom: 6px; display: flex; flex-direction: column; gap: 4px; }
.dex-ms.done { border-color: var(--accent, var(--type-ground)); }
.dex-ms.claimed { opacity: .6; }
.dex-ms-top, .dex-ms-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dex-ms-btn.active { border-color: var(--accent, var(--type-ground)); }
.dex-ms-badge { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 999px; background: var(--rar-mitico); color: var(--c-ink-light); font-size: var(--fs-min); line-height: 16px; text-align: center; }
#btn-dex.has-reward { box-shadow: 0 0 0 1px var(--rar-mitico) inset; }

/* Raid em grupo (raid-ui.js) */
.rd-head { display: flex; gap: 14px; align-items: center; }
.rd-head canvas { width: 96px; height: 96px; image-rendering: pixelated; background: var(--card-t); border-radius: 12px; border: 1px solid var(--edge-2); }
.rd-info { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rd-name { font-size: 16px; }
.rd-bar { height: 24px; }
.rd-bar b { line-height: 20px; }
.rd-act { display: flex; align-items: center; gap: 14px; margin: 10px 0 4px; flex-wrap: wrap; }
.rd-act .btn { min-width: 170px; }

/* ---------- janela de confirmação do jogo (confirm-ui.js, no lugar do confirm() do navegador) ---------- */
/* z-index 1500 (D1, 2026-10-27): acima de toda janela que pede confirmação (Time e Depósito 870, Mochila 880, ficha 900, Troca 950) */
.confirm-backdrop { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--x-000000) 55%, transparent); backdrop-filter: blur(2px); animation: confirm-fade .18s ease-out; }
.confirm-backdrop.out { animation: confirm-out .16s ease-in forwards; }
.confirm-box { width: min(380px, 100%); background: var(--panel-t); color: var(--text-t); border: 1px solid var(--edge-3);
  border-top: 3px solid var(--accent); border-radius: var(--r-lg); box-shadow: var(--shadow-screen); padding: 16px 18px 14px;
  animation: confirm-pop .32s cubic-bezier(.2, 1.4, .4, 1); position: relative; overflow: hidden; }
.confirm-box::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--c-ink-light), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: confirm-shine .9s .15s ease-out both; }
.confirm-backdrop.out .confirm-box { animation: confirm-pop-out .16s ease-in forwards; }
.confirm-box.danger { border-top-color: var(--danger); }
.confirm-title { margin: 0 0 8px; font: 400 17px/1.25 var(--display); letter-spacing: .3px; }
.confirm-text { margin: 0 0 8px; color: var(--text-2); font-size: 14px; line-height: 1.4; }
.confirm-items { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.confirm-items li { background: var(--card-t); border: 1px solid var(--edge-t); border-radius: 8px; padding: 7px 10px;
  font-size: 13.5px; line-height: 1.35; }
.confirm-note { margin: 4px 0 0; color: var(--muted-t); font-size: 12px; line-height: 1.35; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
/* ícone no topo e cartões de escolha (confirm-ui.js → icon / choices[].desc; 2026-11-03, "Desistir do combate") */
.confirm-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%); animation: cc-bob 2.4s ease-in-out infinite; }
.confirm-icon :is(img, svg) { width: 44px !important; height: 44px !important; image-rendering: pixelated; filter: drop-shadow(0 0 8px var(--accent)); }
.confirm-box.danger .confirm-icon { background: radial-gradient(circle, color-mix(in srgb, var(--danger) 40%, transparent), transparent 70%); }
.confirm-box.danger .confirm-icon :is(img, svg) { filter: drop-shadow(0 0 8px var(--danger)); }
.confirm-box:has(.confirm-icon) .confirm-title, .confirm-box:has(.confirm-icon) .confirm-text { text-align: center; }
.confirm-box.danger { box-shadow: var(--shadow-screen), 0 0 28px color-mix(in srgb, var(--danger) 35%, transparent); }
.confirm-box.has-cards { width: min(520px, 100%); }
.confirm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 12px; }
.confirm-card { --cc: var(--accent); position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 12px 10px; text-align: center; cursor: pointer;
  font: inherit; color: var(--text-t); background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 16%, var(--card-t)), var(--card-t));
  border: 1px solid color-mix(in srgb, var(--cc) 55%, var(--edge-t)); border-radius: 12px; overflow: hidden;
  transition: transform .14s, box-shadow .14s, border-color .14s; animation: cc-in .35s ease-out both; }
.confirm-card + .confirm-card { animation-delay: .08s; }
.confirm-card.cc-red { --cc: var(--danger); } .confirm-card.cc-green { --cc: var(--c-ok); }
.confirm-card:hover:not(:disabled), .confirm-card:focus-visible { transform: translateY(-3px); border-color: var(--cc); outline: none;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--cc) 35%, transparent), 0 0 0 1px var(--cc); }
.confirm-card:focus-visible::after, .confirm-card:hover:not(:disabled)::after { content: ''; position: absolute; inset: 0; pointer-events: none; translate: -100% 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--c-ink-light) 22%, transparent) 50%, transparent 70%); animation: cc-shine .7s ease-out forwards; }
.confirm-card:disabled { cursor: not-allowed; opacity: .55; filter: grayscale(.6); }
.cc-ico :is(img, svg) { width: 32px !important; height: 32px !important; image-rendering: pixelated; filter: drop-shadow(0 0 6px var(--cc)); }
.cc-label { font-size: 14.5px; color: var(--cc); }
.cc-desc { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; line-height: 1.35; color: var(--text-2); }
.cc-hint { font-size: 12px; color: var(--danger); font-weight: 600; }
@keyframes cc-in { from { opacity: 0; translate: 0 10px; } }
@keyframes cc-shine { to { translate: 100% 0; } }
@keyframes cc-bob { 50% { translate: 0 -3px; } }
@media (prefers-reduced-motion: reduce) { .confirm-icon, .confirm-card, .confirm-card::after { animation: none !important; } }

/* ---------- Minha conta (account-ui.js): foto do Treinador → e-mail e troca de senha ---------- */
.pc-stage { cursor: pointer; }
/* selo do Discord no canto da foto do Treinador (index.html → .pc-discord): abre o convite */
.pc-discord { position: absolute; top: 5px; right: 5px; z-index: 1; display: block; width: 22px; height: 22px; line-height: 0; transition: transform .12s; }
.pc-discord img { width: 22px; height: 22px; image-rendering: pixelated; }
.pc-discord:hover, .pc-discord:focus-visible { transform: scale(1.15); outline: none; }
/* convite do Discord na tela de entrada (index.html → #login-discord): só enquanto a tela de entrada está aberta */
.login-discord { display: none; position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5; align-items: center; gap: 10px; max-width: calc(100vw - 32px);
  padding: 8px 16px 8px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c-tier-soft) 82%, transparent); border: 1px solid var(--x-5865f2); color: var(--rar-comum); font: 500 13px var(--font); text-decoration: none; box-shadow: 0 4px 18px color-mix(in srgb, var(--x-000000) 35%, transparent); transition: transform .12s, background .12s; }
.login-discord img { width: 28px; height: 28px; image-rendering: pixelated; flex: none; }
.login-discord b { color: var(--c-tier); }
.login-discord:hover, .login-discord:focus-visible { background: color-mix(in srgb, var(--x-5865f2) 35%, transparent); transform: translateX(-50%) scale(1.04); outline: none; }
#login-view:not(.hidden) ~ .login-discord { display: flex; }
#login-view:not(.hidden) { padding-bottom: 80px; } /* espaço para o convite fixo não cobrir o fim da tela de criação */
.pc-stage:hover, .pc-stage:focus-visible { border-color: var(--accent); outline: none; }
.acct-backdrop { position: fixed; inset: 0; z-index: 115; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--x-000000) 55%, transparent); animation: confirm-fade .12s ease-out; }
.acct-box { width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--panel-t); color: var(--text-t); border: 1px solid var(--edge-3);
  border-top: 3px solid var(--accent); border-radius: var(--r-lg); box-shadow: var(--shadow-screen); padding: 14px 18px 16px; animation: confirm-pop .14s ease-out; }
.acct-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.acct-head h2 { margin: 0; font: 400 19px/1.2 var(--display); letter-spacing: .3px; }
.acct-close { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--edge-2); background: none; color: var(--text-t); cursor: pointer; }
.acct-close:hover { border-color: var(--accent); }
.acct-invite { margin: 0 0 10px; font-size: 13.5px; line-height: 1.4; color: var(--text-2); }
.acct-info { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 12px; }
.acct-info div { background: var(--card-t); border: 1px solid var(--edge-t); border-radius: 8px; padding: 6px 10px; min-width: 0; }
.acct-info dt { font-size: var(--fs-min); color: var(--muted-t); }
.acct-info dd { margin: 1px 0 0; font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.acct-sec { border-top: 1px solid var(--edge-t); padding-top: 10px; margin-top: 10px; }
.acct-sec h3 { margin: 0 0 8px; font-size: 14px; }
.acct-row { display: flex; gap: 8px; align-items: center; margin: 0; }
.acct-row input { flex: 1; min-width: 0; }
.acct-box input { background: var(--inset); color: var(--text-t); border: 1px solid var(--edge-2); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; width: 100%; }
.acct-box input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
#acct-code { letter-spacing: 6px; font-size: 18px; text-align: center; font-family: Consolas, monospace; }
.acct-ok { justify-content: space-between; background: var(--card-t); border: 1px solid var(--edge-t); border-radius: 8px; padding: 8px 10px; }
.acct-mail { font-weight: 600; overflow-wrap: anywhere; }
.acct-badge { flex: none; font-size: var(--fs-min); font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--cta-b); color: var(--c-ink-light); }
.acct-pw { display: grid; gap: 8px; }
.acct-pw label { display: grid; gap: 3px; font-size: 12px; color: var(--muted-t); }
.acct-pw .btn { justify-self: start; }
.acct-note { margin: 6px 0 0; font-size: 12px; color: var(--muted-t); line-height: 1.4; }
.acct-sec > .acct-note:first-child { margin: 0 0 8px; }
.acct-links { margin: 6px 0 0; font-size: 12px; color: var(--muted-t); }
.acct-msg { margin: 10px 0 0; min-height: 1em; font-size: 13px; }
.acct-msg.warn { color: var(--danger); }
.acct-msg.good { color: var(--cta-b); font-weight: 600; }
.acct-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
@media (max-width: 480px) { .acct-info { grid-template-columns: 1fr; } .acct-row { flex-wrap: wrap; } .acct-row .btn { width: 100%; } }
.confirm-actions .btn { min-width: 104px; }
.confirm-box.many { width: min(440px, 100%); }
.confirm-box.many .confirm-actions { flex-wrap: wrap; }
.confirm-box.many .confirm-actions .btn { flex: 1 1 auto; min-width: 0; }
@keyframes confirm-fade { from { opacity: 0; } }
@keyframes confirm-pop { from { opacity: 0; transform: translateY(14px) scale(.9); } }
@keyframes confirm-out { to { opacity: 0; } }
@keyframes confirm-pop-out { to { opacity: 0; transform: translateY(6px) scale(.96); } }
@keyframes confirm-shine { from { background-position: -60% 0; } to { background-position: 160% 0; } }
/* janelas simples (.modal: resumo da caçada e outras) entram com o mesmo pop (2026-11-03) */
.modal:not(.hidden):not(.wm-win) { animation: modal-pop .32s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes modal-pop { from { opacity: 0; scale: .9; translate: 0 14px; } } /* scale/translate: não mexe no transform de quem se centraliza com ele (#result-modal) */
@media (prefers-reduced-motion: reduce) { .confirm-backdrop, .confirm-box, .confirm-box::before, .modal:not(.hidden) { animation: none !important; } }
@media (max-width: 480px) { .confirm-actions .btn { flex: 1; min-width: 0; } }

/* Chat (2026-10-17): "HH:MM [Título] Nome [nível]: mensagem". Mensagem amarela como no Tibia (no tema claro, dourado escuro para ler
   no fundo claro); administrador com [ADMIN] e nome vermelhos e mensagem laranja; títulos sociais com cor/efeito (src/core/titles.js). */
:root {
  --chat-text: var(--x-7a5c00); --chat-lvl: var(--x-1f6f9c); --chat-admin-name: var(--type-fighting); --chat-admin-text: var(--c-hp-bar);
  --tt-shiny-a: var(--c-gold-3); --tt-shiny-b: var(--c-warn); --tt-legend-a: var(--x-7a2fd1); --tt-legend-b: var(--x-d0307a); --tt-hunter: var(--x-478a3b); --tt-champion: var(--x-b8860b); --tt-hero: var(--c-xp-bar);
  --chat-twitch: var(--type-dragon); --chat-kick: var(--x-1c8f00);
}
:root[data-theme="preto"] {
  --chat-text: var(--c-shiny); --chat-lvl: var(--type-ice); --chat-admin-name: var(--rar-mitico); --chat-admin-text: var(--c-warn);
  --tt-shiny-a: var(--rar-lendario); --tt-shiny-b: var(--x-ffe9a0); --tt-legend-a: var(--type-flying); --tt-legend-b: var(--type-psychic); --tt-hunter: var(--type-grass); --tt-champion: var(--type-electric); --tt-hero: var(--c-xp);
  --chat-twitch: var(--type-flying); --chat-kick: var(--x-53fc18);
}
.chat-msg .chat-text { color: var(--chat-text); }
.chat-msg.chat-system .chat-text { color: inherit; }
.chat-msg .chat-lvl { color: var(--chat-lvl); font-weight: 600; }
.chat-msg.chat-admin .chat-name { color: var(--chat-admin-name); }
.chat-msg.chat-admin .chat-text { color: var(--chat-admin-text); }
.chat-tag { font-weight: 800; margin-right: 4px; letter-spacing: .2px; }
.chat-tt-admin { color: var(--chat-admin-name); }
.chat-tt-cacador { color: var(--tt-hunter); }
.chat-tt-campeao-kanto { color: var(--tt-champion); font-weight: 700; } /* Campeão de Kanto (Liga Pokémon) */
.chat-tt-heroi-kanto { color: var(--tt-hero); font-weight: 700; } /* Herói de Kanto (missões das cidades) */
/* streamer parceiro (2026-10-18): [Streamer] e nome na cor da plataforma (Twitch roxo, Kick verde) */
.chat-tt-twitch, .chat-msg.chat-streamer-twitch .chat-name { color: var(--chat-twitch); }
.chat-tt-kick, .chat-msg.chat-streamer-kick .chat-name { color: var(--chat-kick); }
.chat-tt-shiny, .chat-tt-lendario { -webkit-background-clip: text; background-clip: text; color: transparent; }
.chat-tt-shiny { background-image: linear-gradient(100deg, var(--tt-shiny-a) 0%, var(--tt-shiny-a) 35%, var(--tt-shiny-b) 50%, var(--tt-shiny-a) 65%, var(--tt-shiny-a) 100%);
  background-size: 250% 100%; animation: chat-shine 2.6s linear infinite; }
.chat-tt-lendario { background-image: linear-gradient(90deg, var(--tt-legend-a), var(--tt-legend-b), var(--tt-legend-a)); background-size: 200% 100%;
  animation: chat-flow 3s linear infinite, chat-pulse 1.8s ease-in-out infinite; }
@keyframes chat-shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes chat-flow { to { background-position: -200% 0; } }
@keyframes chat-pulse { 50% { filter: drop-shadow(0 0 3px var(--tt-legend-b)); } }
@media (prefers-reduced-motion: reduce) { .chat-tt-shiny, .chat-tt-lendario { animation: none; } }

/* Ferramentas de administrador no chat (src/ui/admin-chat.js): aba ADM e menu ao clicar no nome */
.console-log .adm-panel { display: grid; gap: 10px; padding: 8px; border-bottom: 0; }
.adm-panel section { background: var(--card-t); border: 1px solid var(--edge-t); border-radius: 10px; padding: 8px 10px; }
.adm-panel h4 { margin: 0 0 6px; font-size: 12px; }
.adm-row, .adm-chan { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; }
.adm-chan > b { min-width: 96px; }
.adm-row input[type="number"] { width: 64px; }
.adm-chks { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.adm-chk { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-min); }
.adm-field { display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-weight: 700; }
.adm-msg { margin: 0; font-weight: 700; min-height: 1.2em; }
.chat-msg .chat-name.adm-click { cursor: pointer; text-decoration: underline dotted; }
.adm-menu { position: fixed; z-index: 1000; min-width: 210px; display: grid; gap: 4px; padding: 10px; background: var(--panel-t); border: 1px solid var(--edge-2);
  border-radius: 10px; box-shadow: 0 8px 24px color-mix(in srgb, var(--x-000000) 35%, transparent); }
.adm-menu { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.adm-menu-list { display: grid; gap: 3px; margin: 4px 0; min-height: 0; overflow-y: auto; }
.adm-menu button { text-align: left; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--edge-t); background: var(--card-t); cursor: pointer; font: inherit; color: inherit; }
.adm-menu button.on { border-color: var(--tt-hunter); }
.adm-menu button:hover { background: var(--pill-t); }

/* Arrastar e soltar (src/ui/drag.js): sombra do item seguindo o ponteiro, origem apagada, onde pode soltar tracejado e o alvo sob o
   ponteiro aceso */
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 2000; pointer-events: none; opacity: .9; margin: 0; box-shadow: 0 10px 24px color-mix(in srgb, var(--x-000000) 35%, transparent);
  border-radius: 10px; transition: none; rotate: -3deg; }
.drag-ghost-label { position: absolute; left: 50%; top: 100%; translate: -50% 6px; white-space: nowrap; font: 700 12px/1.2 var(--font, sans-serif);
  background: var(--x-13294b); color: var(--c-ink-light); padding: 3px 7px; border-radius: 6px; }
.drag-src { opacity: .35; }
body.dragging, body.dragging * { cursor: grabbing !important; user-select: none; }
.drop-ok { outline: 2px dashed var(--accent, var(--c-info)); outline-offset: 2px; }
.drop-hover { outline: 3px solid var(--type-electric) !important; outline-offset: 2px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--type-electric) 25%, transparent), 0 0 16px color-mix(in srgb, var(--type-electric) 45%, transparent); }
#town-side .team-grid .slot[data-mon], #town-side .depot-grid .slot[data-mon], #collection .slot, .held-tile, .held-socket:not(.empty), .svc-pick, .shop-item, #bag [data-potion]
  { touch-action: none; cursor: grab; }

/* Cartão do Treinador (2026-10-17): topo da coluna da esquerda (cidade e caçada) — personagem inteiro com a roupa num "palco", nome,
   nível, barra de XP com os números e o VIP */
.player-card { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; margin-bottom: 10px; }
.pc-stage { position: relative; height: 100px; border-radius: 12px; display: grid; place-items: end center; overflow: hidden; border: 1px solid var(--edge-2);
  background: radial-gradient(ellipse 55% 14% at 50% 90%, color-mix(in srgb, var(--x-13294b) 28%, transparent), transparent 72%), radial-gradient(circle at 50% 38%, var(--c-ink-light) 0%, var(--rar-comum) 55%, var(--type-ice) 100%); }
:root[data-theme="preto"] .pc-stage { background: radial-gradient(ellipse 55% 14% at 50% 90%, color-mix(in srgb, var(--x-000000) 50%, transparent), transparent 72%), radial-gradient(circle at 50% 38%, var(--x-3a4566) 0%, var(--c-tier-soft) 60%, var(--c-panel-2) 100%); }
.player-card .trainer-lv { display: none; } /* o nível já está na etiqueta */
.pc-body { width: 76px; height: 92px; image-rendering: pixelated; margin-bottom: 4px; }
.pc-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pc-info .trainer-row b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.pc-lv, .pc-vip { font-size: var(--fs-min); font-weight: 800; padding: 2px 7px; border-radius: 999px; }
.pc-lv { background: var(--pill-t); color: var(--gold-text); border: 1px solid var(--edge-t); }
.pc-vip { background: linear-gradient(90deg, var(--type-ground), var(--c-shiny)); color: var(--c-edge); }
.player-card .trainer-level { margin: 0; width: 100%; }
.player-card .trainer-level .trainer-bar { height: 8px; }
.pc-xp { font-size: var(--fs-min); color: var(--text); display: flex; flex-direction: column; line-height: 1.3; }
.pc-xp b { color: var(--gold-text); }
.pc-xp small { color: var(--muted-t, var(--muted)); font-size: var(--fs-min); }
/* XP por hora da hunt (app.js → paintXpRates): no cartão do Treinador e embaixo da barra de XP do Pokémon em campo */
.pc-xp small.xph, .am-bars .xph { color: var(--c-info); font-weight: 700; }
.am-bars .xph { font-size: var(--fs-min); text-align: right; margin-top: 3px; }
.xph[hidden] { display: none; }
/* XP/h do Treinador (index.html → #trainer-xph): linha inteira embaixo do cartão, sempre numa linha só (não muda o tamanho do cartão) */
.pc-xph { grid-column: 1 / -1; margin-top: -4px; font-size: var(--fs-min); font-weight: 700; color: var(--c-info); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-xph[hidden] { display: none; }
.pc-switch { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-min); padding: 3px 8px; }
.pc-switch canvas { width: 18px; height: 18px; image-rendering: pixelated; border-radius: 50%; background: var(--pill-t); }
.town-left { display: flex; flex-direction: column; min-height: 0; }
/* cartão do Treinador: carteira (dinheiro e diamantes) */
.pc-wallet { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-wallet span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--pill-t); border: 1px solid var(--edge-t); font-size: var(--fs-min); }
.pc-wallet b { color: var(--gold-text); }
.pc-wallet .ui-ico { width: 14px; height: 14px; }
.pc-wallet .pc-dia { cursor: pointer; }
.pc-wallet .pc-dia:hover { border-color: var(--blue-text); }
/* Stamina Offline (src/core/offline.js → STAMINA, 2026-10-30): linha embaixo do dinheiro, com barrinha; vazia fica em vermelho */
.pc-stamina { box-sizing: border-box; max-width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 6px; margin-top: 6px; padding: 3px 8px; border-radius: 10px; background: var(--pill-t); border: 1px solid var(--edge-t); font-size: var(--fs-min); }
.pc-stamina[hidden] { display: none; }
.pc-stamina .ui-ico { width: 14px; height: 14px; }
.pc-stamina .pc-st-lbl { grid-column: 2 / 4; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-dim, inherit); white-space: nowrap; } /* 1ª linha: ampulheta + nome; 2ª: barra + tempo */
.pc-stamina b { grid-row: 2; grid-column: 3; color: var(--gold-text); white-space: nowrap; }
.pc-stamina .pc-st-bar { grid-row: 2; grid-column: 1 / 3; align-self: center; height: 4px; border-radius: 2px; background: var(--edge-t); overflow: hidden; }
.pc-stamina .pc-st-bar i { display: block; height: 100%; width: 100%; background: var(--gold-text); transition: width .4s; }
.pc-stamina.empty { border-color: var(--red-text); }
.pc-stamina.empty b, .pc-stamina.empty .pc-st-lbl { color: var(--red-text); }
.pc-stamina.empty .pc-st-bar i { background: var(--red-text); }
.pc-wallet i.gem { width: 16px; height: 16px; background-image: url(../../assets/ui/icons/diamond-18.png); background-size: 16px 16px; }

/* Conta aberta em outro lugar (app.js → showSessionConflict): cobre a tela toda até o jogador escolher */
.session-lock { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--c-bg) 72%, transparent); backdrop-filter: blur(3px); }
.session-box { max-width: 440px; background: var(--panel-t); color: var(--text); border: 1px solid var(--edge-2); border-radius: 14px; padding: 18px 20px;
  box-shadow: 0 16px 40px color-mix(in srgb, var(--x-000000) 45%, transparent); display: grid; gap: 10px; }
.session-box h3 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.session-box p { margin: 0; line-height: 1.45; }
.session-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* cartão "Enquanto você estava fora" (app.js → offlineCard): resumo da caçada com o jogo fechado */
#offline-card { z-index: 60; }
.offc-modal { width: 460px; max-width: 100%; max-height: calc(100dvh - 32px); overflow-y: auto; display: grid; gap: 10px; align-content: start; }
.offc-modal .modal-title { margin-bottom: 0; }
.offc-modal .result-section { margin: 0; padding: 8px 10px; }
.offc-modal .result-section p { margin: 0; line-height: 1.45; }
.offc-sub { margin: 0; }
.offc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.offc-tile { background: var(--card-t); border: 1px solid var(--edge-t); border-radius: 10px; padding: 8px 6px; text-align: center; display: grid; gap: 2px; }
.offc-tile b { font-size: 16px; color: var(--text-t); overflow-wrap: anywhere; }
.offc-tile span { font-size: var(--fs-min); color: var(--text-2); }
.offc-mon { display: flex; align-items: center; gap: 6px; }
.offc-mon canvas { width: 40px; height: 40px; image-rendering: pixelated; }
.offc-mon span { display: grid; font-weight: 600; }
.offc-mon small { font-weight: 400; color: var(--text-2); }
.offc-foot { margin: 0; line-height: 1.45; }
.offc-modal .modal-actions { margin-top: 0; }
@media (max-width: 420px) { .offc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* bandeiras de idioma no rodapé do cartão de login (cópia das da engrenagem) */
.login-lang { width: 190px; margin: 10px auto 0; }
.lang-opt span { white-space: nowrap; }

/* AoE TM na Move Tutor (tutor-ui.js): disco laranja; ativo fica com o fundo aceso */
.tutor-aoe { margin-bottom: 12px; text-align: left; }
.tutor-aoe .tutor-main { justify-content: flex-start; }
.tutor-aoe.on { background: color-mix(in srgb, var(--type-fire) 14%, var(--card-t)); }
.type.type-aoe { background: linear-gradient(135deg, var(--c-warn), var(--type-fighting)); color: var(--c-ink-light); }

/* Missões do Professor Oak (town-ui.js → oakCard, 2026-10-18): cartões com ícone, barra com o número e prêmios em selos */
.oq-sec { display: grid; gap: 8px; }
.oq-head { display: flex; align-items: center; gap: 8px; margin: 2px 0 2px; }
.oq-head > b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.oq-head2 { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--edge-t); }
.oq-dots { display: inline-flex; gap: 4px; }
.oq-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--inset); border: 1px solid var(--edge-2); }
.oq-dots i.ready { background: var(--accent); border-color: var(--accent); }
.oq-dots i.on { background: var(--cta-b, var(--x-2a9d4a)); border-color: var(--cta-b, var(--x-2a9d4a)); }
.oq-timer { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-min); padding: 2px 8px; border-radius: 999px; background: var(--pill-t); border: 1px solid var(--edge-t); color: var(--muted-t); white-space: nowrap; }
.oq-note { margin: 0 0 2px; font-size: var(--fs-min); color: var(--muted-t); }
.oq-card { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; padding: 8px 9px; border-radius: 12px; background: var(--card-t); border: 1px solid var(--edge-t); position: relative; }
.oq-card.done { border-color: color-mix(in srgb, var(--accent) 70%, var(--edge-t)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }
.oq-card.claimed { opacity: .62; }
.oq-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--inset); border: 1px solid var(--edge-2); }
.oq-ico img { width: 22px; height: 22px; image-rendering: pixelated; margin: 0; }
.oq-check { color: var(--c-ink-light); background: var(--cta-b, var(--x-2a9d4a)); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; }
.oq-card.done .oq-ico { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--inset)); }
.oq-body { display: grid; gap: 4px; min-width: 0; }
.oq-title { font-size: 13px; line-height: 1.25; }
.oq-sub { font-size: var(--fs-min); color: var(--muted-t); line-height: 1.3; }
.oq-bar { position: relative; height: 14px; border-radius: 999px; background: var(--inset); border: 1px solid var(--edge-2); overflow: hidden; }
.oq-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--xp-c, var(--c-xp)), color-mix(in srgb, var(--xp-c, var(--c-xp)) 60%, var(--c-ink-light))); border-radius: inherit; transition: width .3s; }
.oq-card.done .oq-bar i { background: linear-gradient(90deg, var(--cta-b, var(--x-2a9d4a)), var(--cta-a, var(--type-grass))); }
.oq-bar span { position: relative; display: block; text-align: center; font-size: var(--fs-min); font-weight: 700; line-height: 12px; color: var(--text-t); text-shadow: 0 0 3px var(--card-t); }
.oq-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.oq-rewards { display: inline-flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.oq-rw { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 4px; border-radius: 999px; background: var(--pill-t); border: 1px solid var(--edge-t); font-size: var(--fs-min); font-weight: 600; white-space: nowrap; }
.oq-rw img { width: 16px; height: 16px; margin: 0; image-rendering: pixelated; }
.oq-acts { display: inline-flex; gap: 4px; margin-left: auto; }
.oq-foot > .btn { margin-left: auto; }
.oq-reroll { padding: 0 6px; }
.oq-reroll img { margin: 0; }
.oq-claim { animation: oq-pulse 1.6s ease-in-out infinite; }
@keyframes oq-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--cta-a, var(--type-grass)) 35%, transparent); } }
.oq-got { margin-left: auto; font-size: var(--fs-min); font-weight: 700; color: var(--cta-b, var(--x-2a9d4a)); }
@media (prefers-reduced-motion: reduce) { .oq-claim { animation: none; } }

/* M3 (2026-10-20): no celular o convite do Discord cobria o botão de criar conta: vira faixa fina no rodapé e some enquanto um campo está em foco */
@media (max-width: 600px) {
  .login-discord { left: 0; right: 0; bottom: 0; transform: none; max-width: none; border-radius: 0; padding: 6px 12px; font-size: 12px; gap: 8px; justify-content: center; }
  .login-discord img { width: 20px; height: 20px; }
  .login-discord:hover, .login-discord:focus-visible { transform: none; }
  #login-view:not(.hidden):has(input:focus) ~ .login-discord { display: none; }
}
/* Mercado em R$ (market-ui.js, 2026-11-02): preço em reais, cartão do Mercado Pago na aba Vender, botão "Vender por R$", Pix da compra e vendas */
.mk-price.brl b { color: var(--c-ok); }
.mk-rmt { display: grid; gap: 4px; padding: 10px 12px; margin-bottom: 10px; border-radius: 10px; background: var(--card-t); border: 1px solid var(--edge-t); box-shadow: inset 4px 0 0 var(--c-gold-3); }
.mk-rmt.ok { box-shadow: inset 4px 0 0 var(--c-ok); }
.mk-rmt-h { font-weight: 700; font-size: var(--fs-min); letter-spacing: .1em; text-transform: uppercase; color: var(--c-gold-2); }
.mk-rmt p { margin: 0; } .mk-rmt .ok { color: var(--c-ok); }
.mk-brl { color: var(--c-ok); }
.mk-order { margin-bottom: 10px; }
.mk-sales { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.mk-code { display: grid; gap: 4px; padding: 8px 10px; border-radius: 8px; background: var(--card-t); border: 1px dashed var(--edge-t); }
.mk-code-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mk-code input { width: 110px; font: 18px ui-monospace, monospace; letter-spacing: 4px; text-align: center; }
.mk-terms { display: grid; gap: 4px; padding: 8px 10px; border-radius: 8px; background: var(--card-t); border: 1px solid var(--c-gold-3); }
.mk-terms p { margin: 0; }
.mk-rep { color: var(--c-ok); font-weight: 700; }
.mk-rank { margin-bottom: 8px; border-radius: 8px; background: var(--card-t); border: 1px solid var(--edge-t); padding: 4px 10px; }
.mk-rank summary { cursor: pointer; font-weight: 700; }
.mk-rank-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 6px 0; }
.mk-rank h5 { margin: 0 0 4px; } .mk-rank ol { margin: 0; padding-left: 20px; display: grid; gap: 2px; }
.ts-rep { color: var(--c-ok); }
/* proteções do mercado em R$ (2026-11-02): aviso de golpe no Market e no chat */
.mk-scam { margin: 0 0 8px; padding: 6px 10px; border-radius: 8px; font-size: var(--fs-sm); background: var(--card-t); border: 1px solid var(--c-warn); }
.chat-scam { display: block; margin: 2px 0 0 12px; font-size: var(--fs-min); color: var(--c-warn); font-style: normal; }
@media (max-width: 560px) { .mk-rank-cols { grid-template-columns: 1fr; } }