/* ═══ JORNADA (19/10/2026): diário, tasks, correntes, loja, quests, árvore ═══ */

#jornada {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(720px, 96vw); height: min(80vh, 680px);
  padding: 13px; display: flex; flex-direction: column; gap: 9px; z-index: 26;
  font-family: var(--ui);
}
#jornada > header { display: flex; align-items: center; gap: 10px; }
#jornada > header .lead { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; }
#jornada > header .jr-ic { width: 20px; height: 20px; }
#jornada > header .jr-pts { margin-left: auto; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #ffd66b; background: rgba(242, 181, 68, .12); border: 1px solid rgba(242, 181, 68, .35); }
#jornada > header .close { cursor: pointer; color: var(--dim); padding: 0 4px; }
#jornada > header .close:hover { color: var(--ink); }

#jornada .jr-tabs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
#jornada .jr-tabs button { position: relative; padding: 6px 4px; font-size: 11.5px; border-radius: 7px; background: rgba(255, 255, 255, .04); }
#jornada .jr-tabs button.on { background: var(--red); border-color: var(--red-hi); color: var(--white); }
#jornada .jr-tabs button i, .dock-btn .jr-selo { position: absolute; top: -5px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; font-size: 9.5px; font-style: normal; font-weight: 800; line-height: 16px; text-align: center; background: var(--red); color: #fff; box-shadow: 0 0 0 2px rgba(14, 15, 18, .9); }
#jornada .jr-tabs button i:empty, .dock-btn .jr-selo:empty { display: none; }
.dock-btn .jr-selo { top: 2px; right: 6px; }

#jornada .jr-corpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 7px; padding-right: 3px; }
#jornada .jr-corpo::-webkit-scrollbar { width: 6px; }
#jornada .jr-corpo::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); border-radius: 3px; }

.jr-sec { display: flex; align-items: center; gap: 8px; margin: 8px 0 1px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.jr-sec .jr-sec-x { margin-left: auto; font-size: 10.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--faint); display: flex; align-items: center; gap: 6px; }
.jr-nota { margin: 0; font-size: 11.5px; color: var(--faint); line-height: 1.4; }
.jr-vazio { margin: 2px 0; font-size: 12px; color: var(--faint); }

.jr-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .035); border: 1px solid var(--edge); }
.jr-card.pronta { border-color: rgba(79, 209, 122, .55); background: linear-gradient(90deg, rgba(79, 209, 122, .12), rgba(255, 255, 255, .02)); }
.jr-card.feita { opacity: .55; }
.jr-meio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.jr-nm { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.jr-sub { font-size: 11.5px; color: var(--dim); }
.jr-acoes { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.jr-acoes button, .jr-card > button { padding: 5px 12px; font-size: 11.5px; white-space: nowrap; }
.jr-mini { padding: 2px 7px !important; font-size: 10.5px !important; }
.jr-ok { color: #6fd38e; font-weight: 800; font-size: 16px; padding: 0 8px; }
.jr-grande { padding: 9px 16px; font-size: 13px; font-weight: 700; align-self: center; }

.jr-barra { position: relative; height: 15px; border-radius: 5px; background: rgba(0, 0, 0, .4); overflow: hidden; border: 1px solid rgba(255, 255, 255, .06); }
.jr-barra > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #3d8bff, #6fb3ff); transition: width .4s ease; }
.jr-barra.cheia > i { background: linear-gradient(90deg, #3fbf6a, #6fe39a); }
.jr-barra > span { position: relative; display: block; text-align: center; font-size: 10px; line-height: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .9); font-variant-numeric: tabular-nums; }

.jr-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.jr-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: rgba(255, 255, 255, .06); color: var(--ink); white-space: nowrap; }
.jr-chip img, .jr-chip canvas { width: 14px; height: 14px; image-rendering: pixelated; }
.jr-chip.rc-ouro { color: #ffd66b; background: rgba(242, 181, 68, .12); }
.jr-chip.rc-xp { color: #8ff0ae; background: rgba(79, 209, 122, .12); }
.jr-chip.rc-pts { color: #8cc8ff; background: rgba(76, 141, 255, .14); }
.jr-chip.rc-dm { color: #b8f1ff; background: rgba(110, 220, 255, .12); }
.jr-chip.rc-item { color: var(--dim); }

/* diário */
.jr-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.jr-dia { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 7px 4px; border-radius: 9px; background: rgba(255, 255, 255, .03); border: 1px solid var(--edge); min-height: 92px; text-align: center; }
.jr-dia > b { font-size: 11px; color: var(--dim); }
.jr-dia .jr-chips { justify-content: center; }
.jr-dia .jr-chip { font-size: 9.5px; padding: 1px 5px; white-space: normal; }
.jr-dia.ok { opacity: .5; }
.jr-dia.ok > b::after { content: ' ✓'; color: #6fd38e; }
.jr-dia.agora { border-color: rgba(242, 181, 68, .8); background: linear-gradient(180deg, rgba(242, 181, 68, .2), rgba(242, 181, 68, .04)); box-shadow: 0 0 14px rgba(242, 181, 68, .25); animation: jr-pulsa 1.6s ease-in-out infinite; }
.jr-dia.agora > b { color: #ffd66b; }
.jr-dia.grande { background: linear-gradient(180deg, rgba(110, 220, 255, .1), rgba(255, 255, 255, .02)); }
@keyframes jr-pulsa { 50% { box-shadow: 0 0 22px rgba(242, 181, 68, .45); } }

/* tasks */
.jr-task > img, .jr-task > canvas, .jr-task > span:first-child { width: 40px; height: 40px; flex: none; }
.jr-busca { flex: 1; max-width: 220px; padding: 4px 9px; border-radius: 7px; border: 1px solid var(--edge); background: rgba(0, 0, 0, .35); color: var(--ink); font: inherit; font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.jr-mural { display: flex; flex-direction: column; gap: 3px; }
.jr-mural-l { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; background: rgba(255, 255, 255, .025); }
.jr-mural-l > img, .jr-mural-l > canvas { width: 28px; height: 28px; flex: none; }
.jr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.jr-info small { font-size: 10px; color: var(--faint); }
.jr-tam { display: flex; flex-direction: column; align-items: center; min-width: 52px; padding: 3px 6px; font-size: 11.5px; font-weight: 700; line-height: 1.1; }
.jr-tam small { font-size: 9.5px; font-weight: 600; color: #8cc8ff; }
.jr-tam:disabled small { color: var(--faint); }
.jr-vip { color: #ffd66b !important; border-color: rgba(242, 181, 68, .5) !important; }

/* correntes */
.jr-corrente { flex-direction: column; align-items: stretch; gap: 7px; }
.jr-cor-topo { display: flex; align-items: baseline; gap: 8px; }
.jr-cor-topo small { color: var(--faint); font-size: 10.5px; }
.jr-passos { display: flex; align-items: center; }
.jr-passo { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, .35); border: 2px solid rgba(255, 255, 255, .1); flex: none; filter: grayscale(.9) brightness(.7); }
.jr-passo > * { width: 26px; height: 26px; }
.jr-passo.ok { filter: none; border-color: #4fd17a; }
.jr-passo.ok::after { content: '✓'; position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; border-radius: 50%; background: #3fbf6a; color: #fff; font-size: 9px; line-height: 14px; text-align: center; font-weight: 900; }
.jr-passo.agora { filter: none; border-color: #ffd66b; box-shadow: 0 0 10px rgba(242, 181, 68, .5); }
.jr-elo { flex: 1; height: 2px; min-width: 6px; background: rgba(255, 255, 255, .12); }
.jr-cor-agora { display: flex; align-items: center; gap: 10px; }
.jr-final { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 10.5px; color: var(--faint); }
.jr-feita { margin: 0; font-size: 12px; color: #6fd38e; font-weight: 600; }
.jr-fechadas { display: flex; flex-wrap: wrap; gap: 4px; }
.jr-fechada { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .04); color: var(--faint); }

/* loja */
.jr-loja { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.jr-loja-c { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 6px; border-radius: 10px; background: rgba(255, 255, 255, .035); border: 1px solid var(--edge); text-align: center; }
.jr-loja-c b { font-size: 11.5px; }
.jr-loja-c.caro { opacity: .6; }
.jr-loja-arte { height: 34px; display: grid; place-items: center; }
.jr-loja-arte > * { width: 32px; height: 32px; image-rendering: pixelated; }
.jr-loja-c button { width: 100%; padding: 4px; font-size: 11.5px; }

/* quests */
.jr-quest { flex-direction: column; align-items: stretch; gap: 6px; }
.jr-quest.q-bloqueada { opacity: .55; }
.jr-quest.q-nova { border-color: rgba(242, 181, 68, .5); }
.jr-quest.q-pronta { border-color: rgba(79, 209, 122, .6); }
.jr-fala { margin: 0; padding: 6px 9px; border-left: 3px solid rgba(140, 200, 255, .5); background: rgba(140, 200, 255, .06); border-radius: 0 7px 7px 0; font-size: 12px; font-style: italic; color: #dfe9f5; }
.jr-quest .jr-acoes { flex-direction: row; }
.jr-npc { min-width: min(360px, 82vw); font-family: var(--ui); }
.jr-npc .jr-card { background: transparent; border: none; padding: 0; }
.label .tag.npc-quest { color: #ffd66b; animation: jr-pulsa-tag 1.5s ease-in-out infinite; }
.label .tag.npc-quest.q-pronta { color: #6fe39a; }
@keyframes jr-pulsa-tag { 50% { text-shadow: 0 0 8px rgba(242, 181, 68, .9); } }

/* árvore */
.jr-arv-topo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.jr-arv-ouro { font-size: 18px; font-weight: 800; color: #ffd66b; }
.jr-arv-topo small { font-size: 11px; color: var(--faint); }
.jr-ramos { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 6px; }
.jr-ramo { --tinta: #8cc8ff; display: flex; flex-direction: column; gap: 3px; padding: 8px 9px; border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--tinta) 12%, transparent), rgba(255, 255, 255, .02)); border: 1px solid color-mix(in srgb, var(--tinta) 35%, transparent); }
.jr-ramo-vida { --tinta: #4fd17a; }
.jr-ramo-critico { --tinta: #ff8a4c; }
.jr-ramo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.jr-ramo-cab b { font-size: 12px; color: var(--tinta); filter: brightness(1.25); }
.jr-ramo-nv { font-size: 11px; font-weight: 800; color: var(--ink); }
.jr-ramo-ef { font-size: 10.5px; color: var(--ink); line-height: 1.3; }
.jr-ramo-prox { font-size: 10px; color: var(--faint); line-height: 1.3; }
.jr-ramo button { margin-top: 3px; padding: 4px; font-size: 11.5px; }
.jr-ramo.caro button { opacity: .7; }
.jr-ramo.fechado { opacity: .5; }
.jr-ramo-max { margin-top: 3px; font-size: 10.5px; color: var(--faint); text-align: center; }

/* pokédex: marcos e ficha */
#dex-marcos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 6px; font-family: var(--ui); }
#dex-marcos .dm-total { grid-column: 1 / -1; font-size: 10.5px; color: #8ff0ae; }
.dm-trilha { display: flex; flex-direction: column; gap: 4px; padding: 7px 9px; border-radius: 9px; background: rgba(255, 255, 255, .035); border: 1px solid var(--edge); }
.dm-trilha.pronto { border-color: rgba(79, 209, 122, .6); background: rgba(79, 209, 122, .08); }
.dm-tr-cab { display: flex; justify-content: space-between; font-size: 11.5px; }
.dm-tr-cab span { color: var(--dim); font-variant-numeric: tabular-nums; }
.dm-tr-pe { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dm-tr-pe button { margin-left: auto; padding: 3px 10px; font-size: 11px; }
.dm-perm { font-size: 10px; color: #8ff0ae; }
.dm-trilha .jr-barra { height: 7px; }
.dexmon.visto { opacity: .8; }
.dexmon.visto::after { content: 'visto'; position: absolute; left: 4px; bottom: 3px; font-size: 8.5px; color: #8cc8ff; letter-spacing: .05em; }
.dx-extra { display: flex; flex-direction: column; gap: 5px; margin: 6px 0 8px; font-family: var(--ui); }
.dx-extra h5 { margin: 4px 0 0; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.dx-status { display: flex; flex-wrap: wrap; gap: 4px; }
.dx-status span { padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.dx-ok { color: #6fe39a; background: rgba(79, 209, 122, .14); }
.dx-nao { color: var(--faint); background: rgba(255, 255, 255, .05); }
.dx-tipo { --tinta: #aaa; color: var(--tinta); background: color-mix(in srgb, var(--tinta) 16%, transparent); }
.dx-hunts { display: flex; flex-wrap: wrap; gap: 4px; }
.dx-hunt { display: flex; flex-direction: column; align-items: flex-start; padding: 3px 8px; font-size: 11px; line-height: 1.2; }
.dx-hunt small { font-size: 9.5px; color: var(--faint); }
.dx-evol { display: flex; flex-wrap: wrap; gap: 4px; }
.dx-evol span { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .05); }
.dx-loot { display: flex; flex-wrap: wrap; gap: 4px; }
.dx-item { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 7px; background: rgba(255, 255, 255, .04); font-size: 11px; }
.dx-item img, .dx-item canvas { width: 16px; height: 16px; image-rendering: pixelated; }
.dx-item small { color: var(--faint); font-size: 10px; }
.dx-vazio { color: var(--faint); font-size: 11px; }

/* evento lendário */
/* Evento lendário: abaixo do status do Helper (não cobre ninguém); clicável — abre o que é. */
#evento-lendario { position: fixed; top: 50px; left: 50%; transform: translateX(-50%); z-index: 13; display: flex; gap: 8px; align-items: center; padding: 4px 12px; border-radius: 999px; font: 600 11px var(--ui); color: #ffe2b8; background: linear-gradient(90deg, rgba(120, 50, 10, .78), rgba(160, 80, 10, .78)); border: 1px solid rgba(255, 170, 70, .55); box-shadow: 0 0 14px rgba(255, 140, 40, .28); white-space: nowrap; cursor: pointer; }
#evento-lendario:hover { background: linear-gradient(90deg, rgba(140, 60, 12, .92), rgba(180, 90, 12, .92)); }
#evento-lendario .ev-x { margin-left: 2px; padding: 0 4px; border-radius: 6px; color: #ffcf99; opacity: .7; }
#evento-lendario .ev-x:hover { opacity: 1; background: rgba(0, 0, 0, .25); }
body.hud-oculto #evento-lendario { display: none !important; }
#evento-lendario b { color: #ffb347; }
@media (max-width: 720px) { #evento-lendario { top: auto; bottom: calc(var(--dock-h, 74px) + 120px); font-size: 10.5px; max-width: 94vw; white-space: normal; text-align: center; } }

/* VIP */
.buff-vip { background: linear-gradient(180deg, rgba(255, 196, 64, .28), rgba(160, 90, 255, .14)) !important; border-color: rgba(255, 210, 90, .65) !important; padding-left: 4px !important; }
.buff-vip .bf-coroa { display: grid; place-items: center; height: 18px; padding: 0 4px; border-radius: 5px; font: 900 9px var(--ui); letter-spacing: .06em; color: #2b1a00; background: linear-gradient(180deg, #ffe08a, #f2a93b); }
.buff-vip .bf-txt b { color: #ffe08a; }
.dm-vip { color: #ffd66b !important; text-shadow: 0 0 12px rgba(255, 196, 64, .5); }
.dm-card.dm-vip { border-color: rgba(255, 210, 90, .55) !important; background: linear-gradient(180deg, rgba(255, 196, 64, .14), rgba(160, 90, 255, .06)) !important; }
.selo-vip { display: inline-block; padding: 0 5px; border-radius: 4px; font: 900 9px/14px var(--ui); letter-spacing: .06em; color: #2b1a00; background: linear-gradient(180deg, #ffe08a, #f2a93b); vertical-align: 1px; }
.mc-vip-off { cursor: pointer; opacity: .75; }
.mc-vip-off:hover { opacity: 1; }
.cc-msg .selo-vip { margin-right: 4px; }

@media (max-width: 720px) {
  #jornada { width: 100vw; height: calc(100vh - var(--dock-h, 74px) - 20px); top: 0; transform: translate(-50%, 0); border-radius: 0 0 12px 12px; padding: 10px; }
  #jornada .jr-tabs { grid-template-columns: repeat(4, 1fr); }
  .jr-dias { grid-template-columns: repeat(4, 1fr); }
  .jr-card { flex-wrap: wrap; }
  .jr-mural-l { flex-wrap: wrap; }
  .jr-mural-l .jr-info { min-width: 120px; }
  .jr-ramos { grid-template-columns: 1fr 1fr; }
  #dex-marcos { grid-template-columns: 1fr; }
}
.jr-regioes { display: flex; flex-wrap: wrap; gap: 4px; }
.jr-regioes button { padding: 3px 10px; font-size: 11px; border-radius: 999px; background: rgba(255, 255, 255, .04); }
.jr-regioes button.on { background: rgba(var(--accent-rgb), .22); border-color: rgba(var(--accent-rgb), .55); color: var(--white); }

/* ═══ CODEX (19/10/2026) ═══ */
.cx-topo { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; border-radius: 12px; background: radial-gradient(120% 140% at 0% 0%, rgba(140, 200, 255, .14), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)); border: 1px solid rgba(140, 200, 255, .22); }
.cx-tit { display: flex; flex-direction: column; gap: 1px; }
.cx-tit b { font-size: 15px; letter-spacing: .02em; color: #e8f2ff; }
.cx-tit small { font-size: 11px; color: var(--dim); }
.cx-resumo { display: flex; flex-wrap: wrap; gap: 4px; }
.cx-res { --cor: #8cc8ff; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: var(--cor); background: color-mix(in srgb, var(--cor) 14%, transparent); border: 1px solid color-mix(in srgb, var(--cor) 35%, transparent); }
.cx-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 8px; }
.cx-card { --cor: #8cc8ff; position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, var(--cor) 18%, transparent), transparent 65%), linear-gradient(180deg, rgba(30, 32, 38, .95), rgba(18, 19, 23, .95));
  border: 1px solid color-mix(in srgb, var(--cor) 30%, rgba(255, 255, 255, .06)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.cx-card.pronto { border-color: color-mix(in srgb, var(--cor) 70%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--cor) 25%, transparent), inset 0 1px 0 rgba(255, 255, 255, .06); }
.cx-card.fechado { filter: grayscale(.8); opacity: .55; }
.cx-card.max { border-color: #ffd66b; }
.cx-cab { display: flex; align-items: center; gap: 8px; }
.cx-emb { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px; font-size: 20px; color: var(--cor);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--cor) 45%, transparent), color-mix(in srgb, var(--cor) 12%, transparent)); border: 1px solid color-mix(in srgb, var(--cor) 55%, transparent); text-shadow: 0 0 8px var(--cor); }
.cx-emb img { width: 26px; height: 26px; image-rendering: pixelated; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .8)); }
.cx-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.cx-nome b { font-size: 13px; color: color-mix(in srgb, var(--cor) 70%, #fff); }
.cx-nome small { font-size: 10.5px; color: var(--ink); opacity: .85; }
.cx-nv { padding: 2px 8px; border-radius: 7px; font-size: 11px; font-weight: 800; color: #111; background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 80%, #fff), var(--cor)); }
.cx-prox { display: flex; justify-content: space-between; gap: 6px; font-size: 10.5px; color: var(--dim); }
.cx-prox b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cx-barra { height: 7px; border-radius: 4px; background: rgba(0, 0, 0, .45); overflow: hidden; border: 1px solid rgba(255, 255, 255, .05); }
.cx-barra > i { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--cor) 60%, #000), var(--cor)); box-shadow: 0 0 8px var(--cor); transition: width .4s ease; }
.cx-mats { display: flex; flex-direction: column; gap: 3px; }
.cx-mat { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 7px; background: rgba(0, 0, 0, .25); }
.cx-mat.ok { background: rgba(79, 209, 122, .1); }
.cx-mat-ic { width: 22px; height: 22px; display: grid; place-items: center; flex: none; }
.cx-mat-ic > * { width: 22px; height: 22px; image-rendering: pixelated; }
.cx-mat-i { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.cx-mat-i span { font-size: 11px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-mat-i small { font-size: 9.5px; color: var(--faint); }
.cx-mat-i small.tem { color: #8ff0ae; }
.cx-mat > b { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--dim); }
.cx-mat.ok > b { color: #6fe39a; }
.cx-bt { margin-top: 2px; padding: 6px; font-size: 12px; }
.cx-trava { font-size: 11px; color: var(--faint); text-align: center; padding: 6px 0; }
.jr-saldo { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: linear-gradient(90deg, rgba(76, 141, 255, .18), rgba(76, 141, 255, .04)); border: 1px solid rgba(76, 141, 255, .4); }
.jr-saldo-ic { grid-row: span 2; font-size: 26px; }
.jr-saldo b { font-size: 16px; color: #b9d6ff; }
.jr-saldo small { font-size: 10.5px; color: var(--dim); }
.jr-loja-c.boost { border-color: rgba(79, 209, 122, .4); background: linear-gradient(180deg, rgba(79, 209, 122, .12), rgba(255, 255, 255, .02)); }
.jr-loja-boost { display: flex; flex-direction: column; align-items: center; font: 800 16px/1 var(--ui); color: #8ff0ae; }
.jr-loja-boost small { font-size: 9px; letter-spacing: .2em; color: var(--dim); margin-top: 2px; }

/* ═══ TRACKER (19/10/2026) ═══ */
#tracker { font-family: var(--ui); }
#tracker > header .tk-pts { margin-left: auto; font-size: 10.5px; font-weight: 800; color: #b9d6ff; }
.tk-lista { display: flex; flex-direction: column; gap: 3px; padding-top: 5px; max-height: 42vh; overflow-y: auto; }
.tk-l { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 5px; border-radius: 7px; background: rgba(255, 255, 255, .03); border: 1px solid transparent; box-shadow: none; text-align: left; color: var(--ink); cursor: pointer; }
.tk-l:hover { background: rgba(255, 255, 255, .07); }
.tk-l.pronta { border-color: rgba(79, 209, 122, .55); background: rgba(79, 209, 122, .1); }
.tk-l.feita { opacity: .5; }
.tk-ret { width: 22px !important; height: 22px !important; flex: none; }
.tk-meio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tk-topo { display: flex; justify-content: space-between; gap: 5px; }
.tk-topo b { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-topo small { font-size: 10px; font-weight: 700; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-l.pronta .tk-topo small { color: #6fe39a; }
.tk-sub { font-size: 9.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-barra { display: block; height: 3px; border-radius: 2px; background: rgba(0, 0, 0, .45); overflow: hidden; }
.tk-barra > i { display: block; height: 100%; background: linear-gradient(90deg, #3d8bff, #6fb3ff); }
.tk-l.pronta .tk-barra > i { background: #4fd17a; }
.tk-aviso { width: 100%; padding: 4px 7px; border-radius: 7px; font-size: 10.5px; font-weight: 700; text-align: left; color: #ffd66b; background: rgba(242, 181, 68, .1); border: 1px solid rgba(242, 181, 68, .35); box-shadow: none; animation: jr-pulsa 1.8s ease-in-out infinite; }
.tk-vazio { margin: 0; font-size: 10.5px; color: var(--faint); cursor: pointer; }
.jr-pino { padding: 1px 5px !important; font-size: 11px !important; line-height: 1.2; opacity: .45; filter: grayscale(1); background: transparent; box-shadow: none; }
.jr-pino.on { opacity: 1; filter: none; border-color: rgba(242, 181, 68, .55); background: rgba(242, 181, 68, .12); }
.jr-cor-topo .jr-pino { margin-left: auto; }
.cx-leva { --cor: #ff6b5e; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: radial-gradient(120% 120% at 100% 0%, rgba(255, 107, 94, .16), transparent 60%), rgba(255, 255, 255, .03); border: 1px solid rgba(255, 107, 94, .35); }
.cx-leva .cx-emb { font-size: 18px; }
.cx-leva-esc { display: flex; gap: 3px; margin-left: auto; }
.cx-leva-esc button { padding: 3px 9px; font-size: 11px; border-radius: 7px; background: rgba(255, 255, 255, .04); }
.cx-leva-esc button.on { background: var(--red); border-color: var(--red-hi); color: #fff; }
.cx-leva-mats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 3px; }
.cx-leva-nota { color: var(--dim); font-size: 11px; }
.buff-estagio { cursor: default; background: linear-gradient(180deg, rgba(140, 200, 255, .18), rgba(140, 200, 255, .05)) !important; border-color: rgba(140, 200, 255, .45) !important; padding-left: 7px !important; }
.buff-estagio .bf-txt b { color: #b9d6ff; }

/* OS CHIPS EMBAIXO DO TREINADOR (20/10/2026): uma fileira de cartõezinhos
   do mesmo tamanho — selo/ícone à esquerda, valor em cima, detalhe embaixo. */
#buffs { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 4px; padding: 4px 6px 2px; }
#buffs .buff { width: 100%; min-width: 0; height: 32px; padding: 0 6px 0 4px !important; gap: 5px; justify-content: flex-start; }
#buffs .bf-txt { min-width: 0; }
#buffs .bf-txt b { font-size: 11px; white-space: nowrap; }
#buffs .bf-txt small { font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#buffs .buff img { width: 20px; height: 20px; flex: 0 0 auto; }
#buffs .bf-selo, #buffs .bf-coroa { flex: 0 0 auto; display: grid; place-items: center; min-width: 22px; height: 18px; padding: 0 3px; border-radius: 5px; font: 900 9px var(--ui); letter-spacing: .04em; }
.buff-estagio .bf-selo { color: #0d1a2b; background: linear-gradient(180deg, #cfe6ff, #7fb6f2); }
.tk-x { flex: none; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 4px; font-size: 10px; color: var(--faint); opacity: 0; transition: opacity .15s; }
.tk-l:hover .tk-x { opacity: 1; }
.tk-x:hover { color: #fff; background: rgba(229, 50, 61, .6); }
@media (pointer: coarse) { .tk-x { opacity: .7; } }

/* ═══ ITENS (19/10/2026) ═══ */
.cx-mat.link { cursor: pointer; }
.cx-mat.link:hover { background: rgba(140, 200, 255, .12); }
.it-topo { display: flex; }
.it-busca { max-width: none; width: 100%; }
.it-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; max-height: 210px; overflow-y: auto; }
.it-item { display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 4px 7px; border-radius: 8px; text-align: left; background: rgba(255, 255, 255, .03); box-shadow: none; }
.it-item > :first-child:not(span) { grid-row: span 2; width: 22px; height: 22px; image-rendering: pixelated; }
.it-item span { font-size: 11.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it-item small { font-size: 9.5px; color: var(--faint); }
.it-item.on { border-color: rgba(140, 200, 255, .6); background: rgba(140, 200, 255, .12); }
.it-detalhe { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px solid var(--edge); }
.it-cab { display: flex; align-items: center; gap: 8px; }
.it-cab > :first-child:not(span) { width: 32px; height: 32px; image-rendering: pixelated; }
.it-nome { display: flex; flex-direction: column; line-height: 1.2; }
.it-nome b { font-size: 14px; }
.it-nome small { font-size: 10.5px; color: var(--dim); }
.it-uso { margin-left: auto; font-size: 10.5px; padding: 2px 8px; border-radius: 999px; color: #b9d6ff; background: rgba(140, 200, 255, .12); }
.it-fonte { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; background: rgba(255, 255, 255, .025); }
.it-fonte > img, .it-fonte > canvas { width: 28px; height: 28px; flex: none; }
.it-fonte.fechada { opacity: .55; }
.it-sem { font-size: 10px; color: var(--faint); }
.it-grade, .it-detalhe, .it-topo { flex: none; }

/* ═══ RARIDADE DOS POKÉMON (19/10/2026) ═══ */
.row.mon .meta .rar { font-weight: 800; letter-spacing: .02em; }
.rar-comum { color: #aeb6c2; }
.rar-incomum { color: #4fd17a; }
.rar-rara { color: #4c9dff; text-shadow: 0 0 6px rgba(76, 157, 255, .5); }
.rar-epica { color: #b26bff; text-shadow: 0 0 7px rgba(178, 107, 255, .6); }
.rar-lendaria { color: #ffa53d; text-shadow: 0 0 8px rgba(255, 165, 61, .7); }
.row.mon .meta .req { color: var(--faint); }
.row.mon .meta .req.falta { color: #ff6b5e; }
.row.mon .atrib { display: block; font-size: 10px; color: var(--dim); }
.row.mon.rar-borda-incomum { box-shadow: inset 3px 0 0 #4fd17a; }
.row.mon.rar-borda-rara { box-shadow: inset 3px 0 0 #4c9dff, 0 0 10px rgba(76, 157, 255, .18); background: linear-gradient(90deg, rgba(76, 157, 255, .1), transparent 60%); }
.row.mon.rar-borda-epica { box-shadow: inset 3px 0 0 #b26bff, 0 0 12px rgba(178, 107, 255, .25); background: linear-gradient(90deg, rgba(178, 107, 255, .14), transparent 60%); }
.row.mon.rar-borda-lendaria { box-shadow: inset 3px 0 0 #ffa53d, 0 0 14px rgba(255, 165, 61, .35); background: linear-gradient(90deg, rgba(255, 165, 61, .16), transparent 60%); animation: rar-brilho 2.4s ease-in-out infinite; }
.row.mon.rar-borda-incomum .atrib { color: #8fe5a8; }
.row.mon.rar-borda-rara .atrib { color: #9cc6ff; }
.row.mon.rar-borda-epica .atrib { color: #d4adff; }
.row.mon.rar-borda-lendaria .atrib { color: #ffc98a; }
@keyframes rar-brilho { 50% { box-shadow: inset 3px 0 0 #ffa53d, 0 0 22px rgba(255, 165, 61, .55); } }
#party .mon.rar-mon-incomum { box-shadow: inset 2px 0 0 #4fd17a; }
#party .mon.rar-mon-rara { box-shadow: inset 2px 0 0 #4c9dff, 0 0 8px rgba(76, 157, 255, .25); }
#party .mon.rar-mon-epica { box-shadow: inset 2px 0 0 #b26bff, 0 0 9px rgba(178, 107, 255, .3); }
#party .mon.rar-mon-lendaria { box-shadow: inset 2px 0 0 #ffa53d, 0 0 10px rgba(255, 165, 61, .4); }

/* DINHEIRO (22/10/2026: Pokéreal, P$ — moedas.ts; antes o $ azul da base) antes
   de todo valor em dinheiro com a classe .din; textos corridos usam "P$ 12,34". */
.din::before, .din-ic, .jr-chip.rc-ouro::before {
  image-rendering: pixelated;
  content: ''; display: inline-block; width: 13px; height: 13px; flex: none;
  background: url(pokereal.png) center / contain no-repeat;
  vertical-align: -2px; margin-right: 3px;
}
.din-ic { width: 14px; height: 14px; }
#p-cash::before { content: ''; display: inline-block; width: 14px; height: 14px; background: url(pokereal.png) center / contain no-repeat; vertical-align: -2px; margin-right: 4px; }
.din, #p-cash, .jr-chip.rc-ouro { color: #7fd0ff; }
.ouro.din, .pf-ouro b, #shop .purse.din, #capture .purse.gold.din { color: #8fd8ff; }

/* Codex 19/10/2026: famílias (Geral/Ataque/Defesa/Captura/Drop) e o desafio da leva. */
.cx-familias button { font-weight: 700; }
.cx-desafio { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; margin: 6px 0 4px; font-size: 12px; }
.cx-desafio b { font-variant-numeric: tabular-nums; }
.cx-desafio b.ok { color: #5fd88a; }
.cx-desafio .cx-barra, .cx-desafio small { grid-column: 1 / -1; }

/* Uma conta por PC/IP (vagaIp.ts): faixa no alto quando esta conta é a secundária. */
#vaga-ip {
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 90;
  display: flex; align-items: center; gap: 12px; max-width: min(720px, 94vw);
  padding: 8px 10px 8px 14px; border-radius: 12px; font-size: 12.5px; color: #ffe2a8;
  background: rgba(40, 28, 8, .92); border: 1px solid rgba(242, 181, 68, .55); box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
}
#vaga-ip[hidden] { display: none; }
#vaga-ip button {
  font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; color: #0d0e11;
  background: linear-gradient(180deg, #ffd66b, #f2a33a); border: 0; border-radius: 9px; padding: 6px 12px;
}
.cx-renasce { border-color: rgba(76, 157, 255, .35); background: linear-gradient(180deg, rgba(76, 157, 255, .08), rgba(255, 255, 255, .02)); }
.cx-renasce .cx-emb { color: #8cc8ff; }

/* Ginásios (20/10/2026): desafio, insígnias e o placar do duelo. */
.gym-desafio { margin: 8px 0 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); display: grid; gap: 8px; }
.gym-desafio .gd-regras { font-size: 11.5px; color: var(--dim); line-height: 1.45; }
.gym-desafio .gd-premio { font-size: 12px; color: var(--ink); }
.gym-desafio .gd-btn { justify-self: start; }
.gym-desafio .gd-traco { display: grid; gap: 3px; padding: 8px 10px; border-radius: 9px; border: 1px solid rgba(255, 140, 90, .35); background: rgba(255, 120, 70, .08); font-size: 12px; }
.gym-desafio .gd-traco b { color: #ffb38a; font-size: 12.5px; }
.gym-desafio .gd-traco small { color: #cfe6ff; font-size: 11.5px; line-height: 1.4; }
.gym-desafio .gd-btn:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }
.gym-tem { color: #ffd66b; }
.gymrow.ganha .n { font-size: 13px; }
.gymrow.ganha .city { color: #ffd66b; }
#gym-placar { position: fixed; top: 50px; left: 50%; transform: translateX(-50%); z-index: 13; display: flex; gap: 10px; align-items: center; padding: 5px 14px; border-radius: 999px; font: 600 11.5px var(--ui); color: var(--ink); background: linear-gradient(90deg, rgba(40, 42, 48, .85), rgba(18, 19, 23, .85)); border: 1px solid rgba(255, 210, 90, .45); box-shadow: 0 6px 18px rgba(0, 0, 0, .4); white-space: nowrap; }
#gym-placar b { color: #ffd66b; }
#gym-placar .gp-bolas { display: inline-flex; gap: 4px; }
#gym-placar .gp-bolas i { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #e33 45%, #a11 70%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
#gym-placar .gp-bolas i.caiu { filter: grayscale(1) brightness(.5); }
body.hud-oculto #gym-placar { display: none !important; }
body.em-ginasio #evento-lendario { display: none !important; }

/* "9 corpos" na mesma linha do título da Captura. */
#capture header .lead { white-space: nowrap; }

/* Leva/Renascimento: entregar aos poucos, concluir no fim (20/10/2026). */
.cx-acoes-degrau { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cx-mat-tem { display: block; font-size: 10px; color: #5fd88a; }

/* Ordem da equipe no Banco (20/10/2026): posição, ▲▼ e arrastar. */
.row.mon .eq-pos { flex: none; width: 24px; text-align: center; font-size: 11px; font-weight: 800; color: var(--dim); }
.row.mon .eq-pos.lider { color: #ffd66b; }
.row.mon .eq-ordem { display: flex; flex-direction: column; gap: 2px; flex: none; }
#depot .row.mon.na-equipe { grid-template-columns: 22px 30px minmax(0, 1fr) auto 16px; }
.row.mon .eq-ordem button { width: 26px; height: 18px; padding: 0; font-size: 9px; line-height: 1; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); color: var(--ink); cursor: pointer; }
.row.mon .eq-ordem button:hover:not(:disabled) { background: rgba(255, 214, 107, .2); border-color: rgba(255, 214, 107, .5); }
.row.mon .eq-ordem button:disabled { opacity: .25; cursor: default; }
.row.mon.arrastando { opacity: .45; }
.row.mon.alvo-eq { outline: 2px dashed #ffd66b; outline-offset: -2px; }
@media (max-width: 720px) { .row.mon .eq-ordem button { width: 34px; height: 22px; font-size: 11px; } }
/* Tasks Longa/Gigante: só VIP (20/10/2026). */
.jr-tam.vip { border-color: rgba(255, 214, 107, .35); }
.jr-tam.vip small { color: #ffd66b; }
.jr-tam.travado { opacity: .7; }
.jr-tam.travado:hover { opacity: 1; }
@media (max-width: 720px) { .jr-mural-l { flex-wrap: wrap; } .jr-mural-l .jr-info { flex: 1 1 100%; } }

/* ── HIGHSCORES (20/10/2026): categorias, busca, 10 por página ─────────── */
body #ranking { width: min(600px, 96vw); height: min(90vh, 800px); display: flex; flex-direction: column; gap: 8px; }
body #ranking[hidden] { display: none !important; }
body #ranking > * { flex: none; }
body #ranking #rk-lista { flex: 1 1 auto; min-height: 0; }
.rk-cats { display: flex; flex-wrap: wrap; gap: 5px; }
@media (max-width: 720px) { .rk-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } }
.rk-cats::-webkit-scrollbar { display: none; }
.rk-cats button { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 12px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .03); color: var(--dim); cursor: pointer; }
.rk-cats button b { font-weight: 700; }
.rk-cats button.on { color: #1a1205; background: linear-gradient(180deg, #ffd57a, #f2b544); border-color: transparent; }
.rk-busca { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; }
.rk-busca input { min-width: 0; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--edge); background: rgba(0, 0, 0, .25); color: var(--ink); }
.rk-busca button { padding: 0 12px; border-radius: 8px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .05); color: var(--ink); cursor: pointer; font-size: 12.5px; }
.rk-busca .rk-meu { font-weight: 700; }
.rk-msg { font-size: 12px; min-height: 0; }
.rk-msg:empty { display: none; }
.rk-msg.ok { color: #7fe0a0; } .rk-msg.ruim { color: #ff8a8a; }
body #ranking .rk { grid-template-columns: 34px 36px minmax(0, 1fr) auto; padding: 2px 10px; gap: 8px; min-height: 0; }
body #ranking .rk-av { width: 34px; height: 34px; }
body #ranking .rk-av canvas { width: 32px; height: 32px; margin-top: 2px; }
body #ranking #rk-lista { gap: 3px; }
.rk.achado { border-color: #7fe0a0; background: rgba(95, 216, 138, .12); animation: rk-pisca 1.2s ease-in-out 2; }
@keyframes rk-pisca { 50% { background: rgba(95, 216, 138, .28); } }
.rk-val { font-size: 12px; font-weight: 800; color: #ffd57a; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rk-pags { display: flex; justify-content: center; align-items: center; gap: 4px; flex-wrap: wrap; }
.rk-pags:empty { display: none; }
.rk-pags button { min-width: 30px; height: 28px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .04); color: var(--ink); cursor: pointer; font-size: 12px; font-variant-numeric: tabular-nums; }
.rk-pags button.on { background: rgba(var(--accent-rgb), .8); border-color: transparent; color: #fff; font-weight: 800; }
.rk-pags button:disabled { opacity: .35; cursor: default; }
.rk-reti { color: var(--faint); padding: 0 2px; }
@media (max-width: 720px) { body #ranking { height: auto !important; } }
/* Placar das bolas da caçada no painel de captura (20/10/2026). */
.cap-placar { font-size: 11px; color: var(--dim); padding: 4px 6px; margin-bottom: 4px; border-radius: 6px; background: rgba(255, 255, 255, .04); }

/* ── GUIA DO INICIANTE (20/10/2026, inicianteTela.ts) ───────────────────── */
.guia-fundo { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px; background: rgba(5, 6, 8, .6); font-family: var(--ui); }
.guia-fundo[hidden] { display: none !important; }
.guia-card {
  width: min(420px, 94vw); display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 16px; border-radius: 18px; color: var(--ink);
  background: radial-gradient(120% 70% at 50% 0%, rgba(255, 214, 107, .16), transparent 60%), linear-gradient(180deg, #23252b, #16171b);
  border: 1px solid rgba(255, 214, 107, .45); box-shadow: 0 30px 70px rgba(0, 0, 0, .65); animation: gc-entra .25s ease-out;
}
@keyframes gc-entra { from { transform: translateY(10px) scale(.97); } }
.gc-cab { display: flex; align-items: center; }
.gc-passo { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ffd66b; }
.gc-pontos { display: flex; gap: 5px; }
.gc-pontos i { flex: 1; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.gc-pontos i.feito { background: #ffd66b; }
.gc-pontos i.agora { background: linear-gradient(90deg, #ffd66b, rgba(255, 214, 107, .3)); }
.guia-card h3 { margin: 4px 0 0; font-size: 20px; letter-spacing: -.01em; }
.guia-card h3.ok { color: #6ee7a0; }
.gc-dica { margin: 0; font-size: 13px; color: var(--dim); line-height: 1.5; }
.gc-barra { display: block; height: 7px; border-radius: 99px; background: rgba(0, 0, 0, .4); overflow: hidden; }
.gc-barra > i { display: block; height: 100%; background: linear-gradient(90deg, #f2a93b, #ffe08a); transition: width .4s; }
.gc-num { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; margin-top: -4px; }
.gc-premio { font-size: 12.5px; color: #b9f5c9; padding: 8px 10px; border-radius: 10px; background: rgba(79, 209, 122, .08); border: 1px solid rgba(79, 209, 122, .25); }
.gc-acoes { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.gc-acoes .primary { margin-left: auto; font: inherit; font-weight: 700; padding: 9px 18px; border-radius: 10px; }
.gc-pular { font: inherit; font-size: 12px; background: none; border: none; box-shadow: none; color: var(--dim); text-decoration: underline; padding: 4px; }

.guia-chip {
  position: fixed; top: calc(env(safe-area-inset-top) + 58px); left: 50%; transform: translateX(-50%); z-index: 8000;
  display: flex; align-items: center; gap: 7px; max-width: 92vw; padding: 6px 14px; border-radius: 999px; font: 600 12px var(--ui); color: var(--ink);
  background: rgba(22, 23, 27, .94); border: 1px solid rgba(255, 214, 107, .55); box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
.guia-chip[hidden] { display: none !important; }
/* No duelo de ginásio o placar (#gym-placar) ocupa o alto: o chip desce para baixo dele. */
body.em-ginasio .guia-chip { top: calc(env(safe-area-inset-top) + 88px); }
.guia-chip b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guia-chip small { color: #ffd66b; font-variant-numeric: tabular-nums; }
.guia-chip.pronto { border-color: #6ee7a0; color: #6ee7a0; animation: bf-pulsa 1.4s ease-in-out infinite; }

/* o apontador: o alvo pisca e a mãozinha aponta */
.guia-pisca { position: relative; z-index: 2; animation: guia-pisca 1s ease-in-out infinite !important; outline: 2px solid #ffd66b !important; outline-offset: 2px; }
@keyframes guia-pisca { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 214, 107, .7), 0 0 12px rgba(255, 214, 107, .5); } 50% { box-shadow: 0 0 0 8px rgba(255, 214, 107, 0), 0 0 22px rgba(255, 214, 107, .9); } }
.guia-mao { position: fixed; z-index: 9100; pointer-events: none; transform: translate(-50%, 0); display: flex; flex-direction: column; align-items: center; gap: 2px; transition: left .25s, top .25s; }
.guia-mao[hidden] { display: none !important; }
.guia-mao .gm-mao::before { content: '👆'; font-size: 34px; line-height: 1; display: block; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .6)); animation: gm-cutuca .8s ease-in-out infinite; }
.guia-mao.cima { transform: translate(-50%, -100%); flex-direction: column-reverse; }
.guia-mao.cima .gm-mao::before { content: '👇'; animation-name: gm-cutuca-baixo; }
@keyframes gm-cutuca { 50% { transform: translateY(-7px); } }
@keyframes gm-cutuca-baixo { 50% { transform: translateY(7px); } }
.guia-mao .gm-dica { font: 700 11.5px var(--ui); color: #2b1a00; background: #ffd66b; padding: 3px 9px; border-radius: 8px; white-space: nowrap; box-shadow: 0 4px 10px rgba(0, 0, 0, .45); }
@media (max-width: 720px) { .guia-chip { top: calc(env(safe-area-inset-top) + 100px); font-size: 11.5px; } .guia-card h3 { font-size: 18px; } }
.gc-acoes .gc-alt { margin-left: auto; font: inherit; font-weight: 700; padding: 9px 14px; border-radius: 10px; }
.gc-acoes .gc-alt + .primary { margin-left: 0; }
@media (max-width: 720px) { .gc-acoes { flex-wrap: wrap; } .gc-acoes .gc-alt, .gc-acoes .primary { flex: 1 1 140px; } }
/* Guia: caçadas fortes contra Pedra (passo "Capture um pokémon forte contra Pedra") */
.hp-card.guia-forte { position: relative; border-color: #4ade80 !important; box-shadow: 0 0 0 1px #4ade80, 0 0 16px rgba(74, 222, 128, .35) !important; }
.hp-card.guia-forte::after { content: '💪 Forte contra Pedra'; position: absolute; top: -9px; left: 10px; padding: 1px 8px; border-radius: 99px; font: 800 10px var(--ui); color: #052e14; background: #4ade80; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); pointer-events: none; }

/* Fim do guia do iniciante (guiaFim.ts): a caixa de parabéns. */
.guia-fim .guia-card { text-align: center; max-width: 420px; }
.guia-fim .gf-medalha { font-size: 46px; line-height: 1; margin: 2px 0 6px; animation: bf-pulsa 1.6s ease-in-out infinite; }
.guia-fim h3 { color: #ffd66b; margin: 0 0 8px; }
.guia-fim p { margin: 6px 0; line-height: 1.45; }
.guia-fim .gf-wiki { padding: 8px 10px; border-radius: 10px; background: rgba(90, 169, 240, .12); border: 1px solid rgba(90, 169, 240, .35); }
.guia-fim .gf-boa { font-weight: 700; color: #6ee7a0; font-size: 15px; }
.guia-fim .gc-acoes { justify-content: center; }
.guia-fim .gc-acoes .gc-alt { margin-left: 0; }

/* 20/10/2026 ("os módulos com letras pequenas no PC"): no computador todos os
   módulos que abrem pela barra crescem juntos (texto, cartões, botões), por
   --modulo-zoom. O teto de largura/altura é dividido pelo zoom para o módulo
   continuar cabendo na tela. Celular não muda. Arrastar: paineis.ts compensa. */
:root { --modulo-zoom: 1.15; }
@media (min-width: 900px) {
  #market, #gyms, #prof, #depot, #diamond, #macro, #shop, #bag, #dex, #ranking, #browser, #analisador,
  #jornada, #prey, #calendario, #wiki {
    zoom: var(--modulo-zoom);
    max-width: calc(96vw / var(--modulo-zoom)) !important;
    max-height: calc(78vh / var(--modulo-zoom)) !important;
  }
  #jornada { width: min(740px, 80vw); height: min(70vh, 620px); }
  /* O HUD dos cantos também (20/10/2026: "exp analyzer, captura, tracker…"):
     as colunas inteiras (equipe, buffs, tracker, sessão, captura, combate) e o chat. */
  #col-esq, #col-dir, #cidade-chat { zoom: var(--modulo-zoom); }
  .coluna { max-height: calc((100vh - 112px) / var(--modulo-zoom)) !important; }
  /* Coluna da direita cheia (sessão + captura + combate): o Combate encolhe e rola. */
  #col-dir > #log { flex: 0 1 auto; min-height: 70px; overflow: hidden; }
  #col-dir > #log > #log-lines { flex: 1 1 auto; }
}

/* Idioma na tela de login (idiomaTela.ts). */
#gate-idioma { position: fixed; top: calc(env(safe-area-inset-top) + 12px); right: 14px; display: flex; gap: 6px; z-index: 2; }
#gate-idioma button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font: 700 12px var(--ui); color: var(--dim); background: rgba(22, 23, 27, .8); border: 1px solid var(--edge); cursor: pointer; }
#gate-idioma button.on { color: var(--ink); border-color: rgba(255, 214, 107, .6); background: rgba(255, 214, 107, .12); }
#gate-idioma button span { font-size: 15px; line-height: 1; }

/* Caçadas ferozes (feroz.ts): o cartão com a borda e o brilho vermelhos. */
.hp-card.feroz { border-color: rgba(255, 48, 40, .55); box-shadow: inset 0 0 0 1px rgba(255, 48, 40, .25), 0 0 14px rgba(210, 0, 20, .18); background: linear-gradient(180deg, rgba(120, 10, 20, .28), rgba(255, 255, 255, .02)); }
.hp-card.feroz .hp-info > b { color: #ff8a80; }
/* Dungeons (dungeons.ts): pedra antiga, e a lista de quem nasce. */
.hp-card.dungeon { border-color: rgba(176, 148, 255, .5); background: linear-gradient(180deg, rgba(70, 50, 130, .28), rgba(255, 255, 255, .02)); }
.hp-card.dungeon .hp-info > b { color: #cdb8ff; }
.hp-mix { flex-basis: 100%; font-style: normal; font-size: 11px; opacity: .85; white-space: normal; line-height: 1.3; }

/* Tamanho da barra de baixo (dockTamanho.ts): só no PC; o celular tem a barra própria. */
@media (min-width: 721px) {
  html body #dock { transform: translateX(-50%) scale(calc(var(--dock-esc, 1) * var(--ui-rel, 1))); transform-origin: 50% 100%; }
  html body #golpes { transform: translateX(-50%) scale(calc(var(--dock-esc, 1) * var(--ui-rel, 1))); transform-origin: 50% 100%; bottom: calc(var(--dock-h, 74px) * var(--dock-esc, 1) * var(--ui-rel, 1) + 18px); }
}

/* BUFFS AO LADO (21/10/2026 - "minimalista, ícone e o número, pro lado do
   cartão, fora do módulo"): uma coluna de pílulas pequenas encostada à direita
   do cartão do treinador. O detalhe (até nível X, restante, hoje) fica no title. */
#party { overflow: visible !important; }
#party .mon.trainer { position: relative; overflow: visible; }
#party .trainer #buffs { position: absolute; left: calc(100% + 10px); top: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 0; z-index: 2; pointer-events: auto; grid-template-columns: none; }
#party .trainer #buffs[hidden] { display: none; }
#party .trainer #buffs .buff { width: auto; height: 20px; min-width: 0; padding: 0 7px 0 3px !important; gap: 4px; border-radius: 999px;
  background: rgba(14, 15, 18, .78) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); }
#party .trainer #buffs .buff img, #party .trainer #buffs .bf-prey-ic, #party .trainer #buffs .bf-prey-ic > :first-child { width: 15px; height: 15px; }
#party .trainer #buffs .bf-cal-ic { font-size: 11px; padding: 0; }
#party .trainer #buffs .bf-txt small, #party .trainer #buffs .bf-selo, #party .trainer #buffs .bf-coroa { display: none; }
#party .trainer #buffs .bf-txt b { font-size: 10.5px; line-height: 1; text-shadow: 0 1px 2px #000; }
#party .trainer #buffs .bf-bar { height: 2px; }
#party .trainer .nums { display: none; }

/* Equipe em grade (timeTela.ts › bt-grade): só as fotos, lado a lado. */
#party .bt-grade { display: flex; align-items: center; justify-content: center; width: 100%; height: 16px; margin: 4px 0 0; padding: 0; border: 0; border-radius: 6px;
  background: rgba(255, 255, 255, .04); box-shadow: none; color: var(--faint); font-size: 9px; line-height: 1; cursor: pointer; }
#party .bt-grade:hover { color: var(--ink); background: rgba(255, 255, 255, .1); }
#party.grade #p-mons { flex-direction: row; flex-wrap: nowrap; gap: 3px; padding-top: 2px; justify-content: space-between; }
#party.grade #p-mons .mon { display: flex; flex-direction: column; align-items: center; flex: 1 1 0; min-width: 0; max-width: 44px; padding: 3px 2px 4px !important; gap: 3px; margin-top: 0 !important; }
#party.grade #p-mons .mon canvas, #party.grade #p-mons .mon img { width: 30px; height: 30px; }
#party.grade #p-mons .mon .info { width: 100%; gap: 0; }
#party.grade #p-mons .mon .info .top, #party.grade #p-mons .mon .bar.exp, #party.grade #p-mons .mon .nums { display: none; }
#party.grade #p-mons .mon .bar.hp { height: 3px; width: 100%; }

/* Selo do beta (aberturaTela.ts, 21/10/2026): discreto, colado em cima da barra de baixo. */
#faixa-beta { position: fixed; right: 8px; bottom: 8px; z-index: 12; display: flex; align-items: center; gap: 2px; padding: 2px 4px 2px 2px; border-radius: 999px; background: rgba(18, 19, 23, .78); border: 1px solid rgba(110, 231, 160, .35); box-shadow: 0 3px 10px rgba(0, 0, 0, .35); font: 600 11px var(--ui); color: var(--dim); opacity: .9; transition: opacity .2s; }
#faixa-beta:hover { opacity: 1; }
#faixa-beta button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 3px 6px; border-radius: 999px; white-space: nowrap; }
#faixa-beta .fb-txt b { color: #6ee7a0; letter-spacing: .04em; }
#faixa-beta .fb-txt:hover { color: var(--ink); }
#faixa-beta .fb-x { padding: 3px 5px; opacity: .6; }
#faixa-beta .fb-x:hover { opacity: 1; }
@media (max-width: 700px) { #faixa-beta { font-size: 10px; } }
.abertura-card .guia-card { max-width: 440px; }

/* Buffs (21/10/2026 — "um pouco maior no PC; no celular fica coberto"):
   PC: pílulas maiores ao lado do cartão. Celular (mobile first): viram uma
   linha DENTRO do cartão, embaixo do nível, na largura toda — nada cobre. */
#party .trainer #buffs { gap: 4px; }
#party .trainer #buffs .buff { height: 25px; padding: 0 9px 0 4px !important; gap: 5px; }
#party .trainer #buffs .buff img, #party .trainer #buffs .bf-prey-ic, #party .trainer #buffs .bf-prey-ic > :first-child { width: 19px; height: 19px; }
#party .trainer #buffs .bf-cal-ic { font-size: 14px; }
#party .trainer #buffs .bf-txt b { font-size: 12.5px; }
@media (max-width: 720px) {
  #party .mon.trainer { row-gap: 2px; }
  #party .mon.trainer .info { display: contents; }
  #party .mon.trainer .info > * { grid-column: 2; min-width: 0; }
  #party .mon.trainer .nv-badge { grid-row: 1 / span 3; align-self: center; }
  #party .trainer #buffs { position: static; grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
  /* A coluna da direita encosta no cartão: a linha quebra antes dela. */
  #party .trainer #buffs { max-width: calc(41vw - 26px); }
  #party .trainer #buffs .buff { height: 22px; min-height: 0; padding: 0 7px 0 3px !important; gap: 3px; box-shadow: none; }
  #party .trainer #buffs .buff img, #party .trainer #buffs .bf-prey-ic, #party .trainer #buffs .bf-prey-ic > :first-child { width: 14px; height: 14px; }
  #party .trainer #buffs .bf-cal-ic { font-size: 10px; }
  #party .trainer #buffs .bf-txt b { font-size: 10px; }
}

/* Captura e Combate com ALTURA FIXA (21/10/2026 — "ficam crescendo e
   diminuindo conforme mata monstro; o certo é fixo, e o jogador estende se
   quiser"). O conteúdo rola por dentro; no PC a alça do canto de baixo estica
   (alturaPaineis.ts lembra). Minimizado volta ao tamanho do título. */
/* Não encolhem para dar lugar ao vizinho: esticar um não empurra o outro
   (21/10/2026 — "expando para baixo e a parte de cima vai para cima"). */
#col-dir > #capture, #col-dir > #log { flex: 0 0 auto; min-height: 92px; max-height: none; overflow: hidden; }
#col-dir > #capture { height: var(--cap-h, min(210px, 24vh)); grid-template-rows: auto auto minmax(0, 1fr); }
#col-dir > #log { height: var(--log-h, min(150px, 17vh)); display: flex; flex-direction: column; }
#col-dir > #log > #log-lines { flex: 1 1 0; min-height: 0; overflow-y: auto; }
#cap-rows { min-height: 0; overflow-y: auto; }
@media (min-width: 721px) {
  #col-dir > #capture, #col-dir > #log { resize: vertical; }
}
@media (max-width: 720px) {
  #col-dir > #capture { height: var(--cap-h, 170px); min-height: 80px; }
  #col-dir > #log { height: var(--log-h, 120px); min-height: 70px; }
}
#col-dir > #capture.minimizado, #col-dir > #log.minimizado { height: auto !important; min-height: 0; resize: none; }

/* CELULAR (21/10/2026 — "tá tudo muito amontoado"): as duas colunas lado a
   lado SEM encavalar — cada uma com metade da tela (o "compacto" dos ajustes
   não alarga mais no celular). */
@media (max-width: 720px) {
  html body, html body.hud-compacto { --col-w: min(200px, calc(50vw - 9px)); }
  #party .trainer #buffs { max-width: none; }
}
@media (max-width: 720px) {
  /* Analyzer na meia tela: some o "/h" e os botões da sessão encolhem. */
  #run .an-l small { display: none; }
  #run .an-l { gap: 5px; }
  #run .an-ctrl { gap: 2px; }
  #run .an-ctrl button { width: 20px; height: 20px; min-height: 0; padding: 0; }
  #run .an-ctrl button svg { width: 10px; height: 10px; }
}

/* Ranking (21/10/2026 — "a XP está passando para baixo", em todas as abas):
   as linhas encolhiam para caber e a segunda linha vazava. Agora não encolhem;
   a lista rola. */
#rk-lista > .rk, #rk-eu > .rk { flex: 0 0 auto; min-height: 0; }
.rk-nm small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.rk-nm b { line-height: 1.25; }
@media (max-width: 720px) { #run .an-sessao > span:not(.an-ctrl) { display: none; } }
/* O Combate (o último da coluna) é quem cede quando falta tela: esticar a
   Captura come o espaço dele por baixo, nunca passa da barra de baixo. */
#col-dir > #log { flex-shrink: 1; min-height: 70px; }

/* Caminhada manual × automática no cartão do treinador (modoCaminhadaTela.ts). */
.p-caminhada { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-top: 3px; padding: 2px 9px 2px 6px; min-height: 0; border-radius: 999px; font: 700 10.5px var(--ui); color: var(--dim); background: rgba(255, 255, 255, .05); border: 1px solid var(--edge); cursor: pointer; white-space: nowrap; box-shadow: none; }
.p-caminhada span { font-size: 12px; line-height: 1; }
.p-caminhada:hover { color: var(--ink); border-color: var(--edge-hi); }
.p-caminhada.auto { color: #9fe3ff; border-color: rgba(90, 190, 240, .55); background: rgba(90, 190, 240, .14); }
.p-caminhada[hidden] { display: none; }
@media (max-width: 720px) {
  #party .mon.trainer .info > .p-caminhada { grid-column: 1 / -1; justify-self: start; font-size: 10px; padding: 0 8px 0 5px; min-height: 0; height: 22px; margin-top: 4px; }
}
/* Nunca sai do cartão: encolhe e corta com reticências. */
.p-caminhada { max-width: 100%; min-width: 0; overflow: hidden; }
.p-caminhada i { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* A setinha da equipe não ganha a altura de botão de toque (36px) no celular. */
#party .bt-grade { min-height: 0; }

/* Sequência da box (Macro › Lure). */
.mx-seq { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 4px; }
.mx-seq-tit { font-weight: 700; font-size: 12px; }
.mx-seq-sub { color: var(--faint); font-size: 10.5px; line-height: 1.35; }
.mx-seq-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 2px; }
.mx-seq-mon { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 3px 4px; min-height: 0; border-radius: 9px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .03); color: var(--dim); cursor: pointer; box-shadow: none; }
.mx-seq-mon img, .mx-seq-mon canvas { width: 30px; height: 30px; image-rendering: pixelated; }
.mx-seq-nm { font-size: 10.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-seq-mon.on { border-color: rgba(255, 179, 107, .7); background: rgba(255, 179, 107, .12); color: var(--ink); }
.mx-seq-n { font-size: 9.5px; color: #ffb36b; white-space: nowrap; }

/* Perfis do Macro (macroPainel.ts › mc-perfis). */
.mc-perfis { display: flex; flex-direction: column; gap: 5px; padding: 0 12px 8px; }
.mcp-linha { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mcp-rot { font: 800 10px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); flex: 0 0 auto; }
.mcp-sel, .mcp-nome { flex: 1 1 auto; min-width: 0; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--edge); background: rgba(0, 0, 0, .3); color: var(--ink); font: 600 12px var(--ui); }
.mcp-bt { flex: 0 0 auto; padding: 5px 9px; min-height: 0; border-radius: 8px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .05); color: var(--ink); font: 700 11.5px var(--ui); cursor: pointer; box-shadow: none; white-space: nowrap; }
.mcp-bt:hover { border-color: var(--edge-hi); }
.mcp-bt.perigo { border-color: rgba(255, 90, 90, .7); color: #ff9a9a; background: rgba(255, 70, 70, .12); }
.mcp-caca { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--dim); cursor: pointer; }
.mcp-caca input { accent-color: var(--accent); }
.mcp-sub { font-size: 11px; color: var(--faint); }

/* Analyzer › Estratégia (analyzerPainel.ts). */
.ae-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 720px) { .ae-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ae-card { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .03); min-width: 0; }
.ae-card small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.ae-card b { font-size: 17px; font-variant-numeric: tabular-nums; }
.ae-card span { font-size: 10.5px; color: var(--dim); }
.an-golpes { width: 100%; }
.an-golpes th:first-child, .an-golpes td.nm { text-align: left; width: 46%; }
.an-golpes td.nm { position: relative; }
.an-golpes td.nm small { color: #ffb36b; font-size: 9.5px; margin-left: 4px; }
.an-golpes .an-barra { position: absolute; left: 0; bottom: 1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #ffb36b, #ff6b5e); }
.an-dica { font-size: 11px; color: var(--faint); line-height: 1.4; margin: 0; }

/* Boneco de treino (treinoTela.ts). */
.treino-card .guia-card { max-width: 520px; width: min(520px, 94vw); text-align: center; }
.tr-sub { color: var(--dim); font-size: 12px; margin: 4px 0 10px; }
.tr-op { display: flex; align-items: center; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 6px 0; }
.tr-op span { font: 800 10px var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-right: 4px; }
.tr-op button { padding: 5px 10px; min-height: 0; border-radius: 999px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .04); color: var(--dim); font: 700 11.5px var(--ui); cursor: pointer; box-shadow: none; }
.tr-op button.on { color: var(--ink); border-color: rgba(255, 179, 107, .7); background: rgba(255, 179, 107, .14); }
.tr-res { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; max-height: 42vh; overflow-y: auto; }
.tr-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tr-cards div { display: flex; flex-direction: column; padding: 7px; border-radius: 10px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .03); }
.tr-cards small { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.tr-cards b { font-size: 18px; color: #ffd66b; }
.tr-mons { font-size: 11.5px; color: var(--dim); margin: 0; }
.tr-tab { width: 100%; }
.tr-tab td.nm { text-align: left; position: relative; }
.tr-tab td.nm small { color: #ffb36b; font-size: 9.5px; }
.tr-tab td.nm i { position: absolute; left: 0; bottom: 1px; height: 2px; background: linear-gradient(90deg, #ffb36b, #ff6b5e); border-radius: 2px; }
.tr-erro { color: #ff9a9a; font-size: 12px; }
.mx-ic-emoji { font-size: 24px; width: 28px; text-align: center; }
.tr-tab th:first-child, .tr-tab td.nm { width: 58%; white-space: normal; text-align: left; }
.tr-tab td, .tr-tab th { padding: 5px 6px; }

/* A arena do boneco de treino (treinoTela.ts › assistir). */
.tr-arena { position: relative; width: 100%; aspect-ratio: 480 / 250; border-radius: 12px; overflow: hidden; border: 1px solid rgba(201, 164, 90, .4);
  background: radial-gradient(ellipse at 65% 60%, rgba(255, 200, 120, .12), transparent 60%), repeating-linear-gradient(45deg, #2a3a22 0 14px, #2e4026 14px 28px); box-shadow: inset 0 0 40px rgba(0, 0, 0, .65); }
.tr-arena canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.tr-boneco { position: absolute; width: 15%; transform: translate(-50%, -78%); image-rendering: pixelated; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .5)); z-index: 2; }
.tr-boneco.apanha { animation: tr-apanha .22s ease-out; }
@keyframes tr-apanha { 30% { transform: translate(-46%, -78%) rotate(7deg); filter: brightness(1.8) drop-shadow(0 4px 3px rgba(0, 0, 0, .5)); } 70% { transform: translate(-53%, -78%) rotate(-4deg); } }
.tr-mon { position: absolute; left: 20%; top: 55%; transform: translate(-50%, -60%); display: flex; flex-direction: column; align-items: center; z-index: 2; }
.tr-mon img { width: 110px; height: 110px; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .55)); animation: tr-respira 2.4s ease-in-out infinite; }
.tr-mon span { margin-top: -6px; font: 800 11px var(--ui); color: #fff; text-shadow: 0 1px 3px #000; }
.tr-mon.entra img { animation: tr-entra .45s ease-out, tr-respira 2.4s ease-in-out .45s infinite; }
.tr-mon.bate img { animation: tr-bate .22s ease-out; }
@keyframes tr-respira { 50% { transform: translateY(-4px) scale(1.02); } }
@keyframes tr-entra { from { transform: scale(.2); opacity: 0; filter: brightness(3); } }
@keyframes tr-bate { 40% { transform: translateX(14px) scale(1.06); } }
.tr-banner { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font: 900 14px var(--ui); letter-spacing: .04em; text-shadow: 0 2px 6px #000, 0 0 12px currentColor; z-index: 4; white-space: nowrap; }
.tr-banner.vem { animation: tr-banner .5s ease-out; }
@keyframes tr-banner { from { transform: translateX(-50%) scale(1.5); opacity: 0; } }
.tr-hud { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; justify-content: space-between; font: 600 11px var(--ui); color: #e9e2cf; text-shadow: 0 1px 3px #000; z-index: 4; }
.tr-hud b { color: #ffd66b; }
.tr-tempo { position: absolute; left: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #ffb36b, #ff6b5e); z-index: 4; }
.tr-num { position: absolute; transform: translate(-50%, 0); font: 900 14px var(--ui); color: #fff3cf; -webkit-text-stroke: 3px rgba(8, 6, 10, .95); paint-order: stroke fill; z-index: 5; pointer-events: none; animation: tr-num .9s ease-out forwards; display: flex; flex-direction: column; align-items: center; }
.tr-num.crit { font-size: 19px; color: #ffb347; text-shadow: 0 0 10px rgba(255, 140, 40, .9); animation-duration: 1.1s; }
.tr-num.crit b { font-size: 9px; color: #ffe28a; letter-spacing: .1em; }
.tr-num.crit::before { content: ''; position: absolute; left: 50%; top: 60%; width: 54px; height: 54px; transform: translate(-50%, -50%); z-index: -1;
  background: radial-gradient(circle, rgba(255, 250, 200, .95), rgba(255, 170, 60, .7) 45%, transparent 70%);
  clip-path: polygon(50% 0, 60% 38%, 100% 30%, 66% 55%, 90% 100%, 50% 70%, 10% 100%, 34% 55%, 0 30%, 40% 38%); animation: tr-estrela .4s ease-out forwards; }
.tr-num.errou { color: #aeb8c8; font-size: 12px; }
@keyframes tr-num { 0% { transform: translate(-50%, 6px) scale(.5); opacity: 0; } 15% { transform: translate(-50%, -4px) scale(1.25); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), -34px) scale(1); opacity: 0; } }
@keyframes tr-estrela { from { transform: translate(-50%, -50%) scale(.3) rotate(0); opacity: 1; } to { transform: translate(-50%, -50%) scale(1.3) rotate(25deg); opacity: 0; } }
.tr-pular { align-self: center; margin-top: 4px; padding: 5px 12px; min-height: 0; border-radius: 999px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .05); color: var(--dim); font: 700 11.5px var(--ui); cursor: pointer; box-shadow: none; }
.tr-res { max-height: none; overflow: visible; }
.treino-card .guia-card { max-height: 92vh; overflow-y: auto; }
/* O treino no CP: a etiqueta em cima do teleporte, destacada. */
.label.lb-treino .tag { color: #ffd66b; border-color: rgba(255, 214, 107, .5); }
.label.lb-treino button { background: linear-gradient(180deg, #ffb36b, #f08a3c); color: #1a1205; font-weight: 800; }

.treino-card .tr-res { max-height: 48vh; overflow-y: auto; }

/* Inventário na tela (inventarioHud.ts). */
#col-dir > #inventario { display: flex; flex-direction: column; gap: 6px; padding: 8px 9px; flex: 0 1 auto; min-height: 0; }
#inventario header { display: flex; align-items: center; gap: 8px; padding-right: 26px; }
#inventario .inv-valor { margin-left: auto; font: 700 10.5px var(--ui); color: #ffd66b; }
#inv-grade { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; overflow-y: auto; min-height: 0; max-height: 200px; padding-right: 3px; scrollbar-width: thin; scrollbar-color: rgba(255, 214, 107, .55) rgba(0, 0, 0, .25); overscroll-behavior: contain; }
#inv-grade::-webkit-scrollbar { width: 6px; }
#inv-grade::-webkit-scrollbar-thumb { background: rgba(255, 214, 107, .55); border-radius: 6px; }
#inv-grade::-webkit-scrollbar-track { background: rgba(0, 0, 0, .25); border-radius: 6px; }
#inv-grade.tem-mais { -webkit-mask-image: linear-gradient(180deg, #000 82%, rgba(0, 0, 0, .35)); mask-image: linear-gradient(180deg, #000 82%, rgba(0, 0, 0, .35)); }
.inv-mais { align-self: center; margin-top: -2px; padding: 2px 10px; min-height: 0; border-radius: 999px; border: 1px solid rgba(255, 214, 107, .35); background: rgba(0, 0, 0, .35); color: #ffd66b; font: 700 10.5px var(--ui); cursor: pointer; box-shadow: none; }
.inv-mais:hover { background: rgba(255, 214, 107, .12); }
.inv-mais[hidden] { display: none; }
.inv-slot { position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 0; min-height: 0; border-radius: 7px; border: 1px solid var(--edge); background: rgba(0, 0, 0, .32); cursor: pointer; box-shadow: none; }
.inv-slot:hover { border-color: rgba(var(--accent-rgb), .6); background: rgba(255, 255, 255, .05); }
.inv-slot.vazio { cursor: default; background: rgba(0, 0, 0, .18); border-color: rgba(255, 255, 255, .04); }
.inv-slot canvas, .inv-slot img { width: 78%; height: 78%; image-rendering: pixelated; }
.inv-slot .inv-q { position: absolute; right: 2px; bottom: 0; font: 800 10px var(--ui); color: #fff; text-shadow: 0 1px 2px #000, 0 0 2px #000; font-variant-numeric: tabular-nums; }
.inv-slot.is-loot { border-color: rgba(255, 214, 107, .22); }
.inv-slot.travado::after { content: '🔒'; position: absolute; left: 1px; top: -1px; font-size: 9px; }
.inv-vender { width: 100%; padding: 6px 8px; min-height: 0; border-radius: 8px; border: 1px solid rgba(255, 214, 107, .45); background: rgba(255, 214, 107, .12); color: var(--ink); font: 700 11.5px var(--ui); cursor: pointer; box-shadow: none; }
.inv-vender b { color: #ffd66b; }
.inv-vender:disabled { opacity: .5; cursor: default; border-color: var(--edge); background: none; }
.inv-menu { position: fixed; z-index: 70; width: 190px; display: flex; flex-direction: column; gap: 4px; padding: 9px; border-radius: 11px; background: rgba(16, 18, 26, .97); border: 1px solid var(--edge-hi); box-shadow: 0 12px 30px rgba(0, 0, 0, .6); }
.inv-menu b { font-size: 12.5px; }
.inv-menu small { color: var(--dim); font-size: 10.5px; margin-bottom: 3px; }
.inv-menu button { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 6px 8px; min-height: 0; border-radius: 7px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .04); color: var(--ink); font: 600 11.5px var(--ui); text-align: left; cursor: pointer; box-shadow: none; }
.inv-menu button:hover { border-color: var(--edge-hi); background: rgba(255, 255, 255, .08); }
.inv-menu button i { font-style: normal; color: #ffd66b; font-weight: 700; }
.inv-menu button.forte { border-color: rgba(255, 214, 107, .5); background: rgba(255, 214, 107, .12); }
.bag-fixar { margin-left: auto; margin-right: 8px; padding: 3px 9px; min-height: 0; border-radius: 999px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .04); color: var(--dim); font: 700 11px var(--ui); cursor: pointer; box-shadow: none; }
.bag-fixar[aria-pressed="true"] { color: var(--ink); border-color: rgba(255, 214, 107, .5); }
.inv-slot .inv-sem { font: 800 11px var(--ui); color: var(--dim); }
@media (max-width: 720px) { #inventario .inv-valor { display: none; } #inv-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Coordenadas do mapa, só admin (coordsAdmin.ts). */
#coords-admin { position: fixed; top: 10px; left: 292px; z-index: 25; display: flex; gap: 8px; align-items: center; padding: 3px 10px; border-radius: 999px; background: rgba(10, 12, 18, .82); border: 1px solid rgba(255, 214, 107, .45); color: #ffe7a6; font: 700 11px var(--ui); font-variant-numeric: tabular-nums; cursor: copy; user-select: none; white-space: nowrap; }
#coords-admin.copiou { border-color: #7dff9b; color: #b8ffc8; }
#coords-admin .ca-1x1.on { background: rgba(255, 90, 90, .25); border-color: #ff6b6b; color: #ffb3b3; }
#coords-admin .ca-mouse { color: #cfd6e6; }
@media (max-width: 720px) { #coords-admin { top: auto; bottom: calc(var(--dock-h, 110px) + 120px); font-size: 10px; } }

/* Editor da rota da caminhada, só admin (rotaEditor.ts). */
#coords-admin .ca-rota { padding: 1px 8px; min-height: 0; border-radius: 999px; border: 1px solid rgba(255, 214, 107, .45); background: rgba(255, 214, 107, .1); color: #ffd66b; font: 700 10.5px var(--ui); cursor: pointer; box-shadow: none; }
#coords-admin .ca-rota.on { background: #ffd66b; color: #14161d; }
#rota-tela { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 3; }
#rota-tela[hidden], #rota-editor[hidden] { display: none; }
#rota-editor { position: fixed; top: 44px; left: 292px; z-index: 26; width: 270px; display: flex; flex-direction: column; gap: 6px; padding: 10px 11px; border-radius: 12px; background: rgba(14, 16, 24, .95); border: 1px solid rgba(255, 214, 107, .45); box-shadow: 0 10px 28px rgba(0, 0, 0, .55); color: var(--ink); font: 500 11.5px var(--ui); }
#rota-editor .re-topo { display: flex; align-items: center; justify-content: space-between; }
#rota-editor .re-topo b { color: #ffd66b; font-size: 12.5px; }
#rota-editor .re-x { padding: 0 6px; min-height: 0; background: none; border: 0; color: var(--dim); box-shadow: none; cursor: pointer; }
#rota-editor .re-caca { font-weight: 800; font-size: 12.5px; }
#rota-editor .re-id { color: var(--dim); font-size: 10.5px; font-family: ui-monospace, monospace; margin-top: -4px; }
#rota-editor .re-info { color: #b8ffc8; font-size: 11px; }
#rota-editor .re-dica { margin: 0; color: var(--dim); font-size: 11px; }
#rota-editor .re-cont { font-weight: 700; }
#rota-editor .re-erros { margin: 0; padding-left: 16px; color: #ff8a92; font-size: 11px; }
#rota-editor .re-acoes { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 5px; }
#rota-editor button { padding: 5px 6px; min-height: 0; border-radius: 8px; font: 700 11px var(--ui); cursor: pointer; }
#rota-editor .re-apagar { background: none; border: 1px solid rgba(255, 120, 130, .4); color: #ff9aa2; box-shadow: none; }
@media (max-width: 720px) { #rota-editor { left: 8px; right: 8px; width: auto; top: 8px; } }

/* ── NATAL (natalTela.ts) ───────────────────────────────────────────────── */
.buff-natal { --cl: 239, 68, 68; border-color: rgba(239, 68, 68, .55) !important; background: linear-gradient(135deg, rgba(220, 38, 38, .35), rgba(22, 101, 52, .35)) !important; }
#natal { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(640px, 96vw); max-height: min(88vh, 760px); padding: 13px; display: flex; flex-direction: column; gap: 9px; z-index: 26; font-family: var(--ui);
  background: linear-gradient(180deg, rgba(60, 12, 16, .97), rgba(14, 30, 22, .97)) !important; border-color: rgba(239, 68, 68, .5) !important; }
#natal[hidden] { display: none !important; }
#natal > header { display: flex; align-items: center; gap: 10px; }
#natal > header .lead { font-size: 15px; font-weight: 800; color: #fff3d6; }
#natal > header .close { margin-left: auto; }
.nt-corpo { overflow: auto; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.nt-topo { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid rgba(255, 214, 107, .35); background: rgba(0, 0, 0, .25); }
.nt-topo b { color: #ffd66b; font-size: 14px; }
.nt-topo p { margin: 4px 0 0; font-size: 12px; color: var(--ink); line-height: 1.4; }
.nt-moedas { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 214, 107, .12); border: 1px solid rgba(255, 214, 107, .4); }
.nt-moedas b { font-size: 20px; color: #ffd66b; }
.nt-moedas small { font-size: 10px; color: var(--dim); }
.nt-colecao h4, .nt-loja h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #fca5a5; }
.nt-grade { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 5px; }
.nt-mon { aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .06); filter: grayscale(1) brightness(.45); }
.nt-mon.tem { filter: none; border-color: rgba(74, 222, 128, .6); background: rgba(22, 101, 52, .35); }
.nt-mon canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.nt-itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.nt-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 11px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .08); }
.nt-item.nt-garantido { border-color: rgba(255, 214, 107, .45); background: rgba(255, 214, 107, .08); }
.nt-fig { height: 60px; display: grid; place-items: center; }
.nt-fig canvas { image-rendering: pixelated; }
.nt-nome { font-size: 11px; text-align: center; color: var(--ink); min-height: 28px; text-transform: capitalize; }
.nt-item button { width: 100%; padding: 4px 6px; min-height: 0; border-radius: 8px; font: 700 11px var(--ui); }
.nt-nota { margin: 6px 0 0; font-size: 11px; color: var(--dim); }
@media (max-width: 720px) { .nt-grade { grid-template-columns: repeat(6, minmax(0, 1fr)); } .nt-topo { flex-direction: column; align-items: stretch; } }
.jr-dex-link { cursor: pointer; } .jr-dex-link:hover { filter: brightness(1.25); }
/* Coluna da direita em tela baixa (22/10/2026): Captura e Combate encolhem
   (rolando por dentro) e o Inventário guarda sempre 2 fileiras + "Vender loot". */
#col-dir > #capture { flex: 0 1 auto; min-height: 92px; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; }
#col-dir > #log { flex: 0 1 auto; min-height: 58px; overflow: hidden; }
#col-dir > #inventario { min-height: 156px; }
#col-dir > #inventario #inv-grade { flex: 1 1 auto; min-height: 76px; grid-auto-rows: max-content; align-content: start; }
#col-dir > #inventario #inv-pe { flex: 0 0 auto; }

/* Inventário estica pela alça do canto, igual Captura e Combate (22/10/2026;
   alturaPaineis.ts guarda --inv-h). Sem altura escolhida, fica no automático. */
#col-dir > #inventario { height: var(--inv-h, auto); overflow: hidden; }
@media (min-width: 721px) { #col-dir > #inventario { resize: vertical; } }
#col-dir > #inventario[style*="--inv-h"] #inv-grade { max-height: none; }
#col-dir > #inventario.minimizado { height: auto !important; min-height: 0; resize: none; }
#inventario .inv-valor { white-space: nowrap; }

/* Cofre na Jornada (27/10/2026): proteger item antes de ter na mochila. */
.it-topo { gap: 6px; align-items: center; }
.it-filtro { flex: none; padding: 5px 9px; min-height: 0; border-radius: 999px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .04); color: var(--dim); font: 700 11px var(--ui); box-shadow: none; white-space: nowrap; }
.it-filtro.on { color: #ffd66b; border-color: rgba(255, 214, 107, .55); background: rgba(255, 214, 107, .12); }
.it-item { position: relative; }
.it-item.protegido { border-color: rgba(255, 214, 107, .45); }
.it-cad { position: absolute; top: 2px; right: 4px; font-style: normal; font-size: 10px; }
.it-trava { align-self: flex-start; margin: 6px 0 4px; padding: 6px 11px; min-height: 0; border-radius: 8px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .05); color: var(--ink); font: 700 12px var(--ui); box-shadow: none; }
.it-trava.on { color: #ffd66b; border-color: rgba(255, 214, 107, .55); background: rgba(255, 214, 107, .12); }
.cx-cad { flex: none; width: 26px; height: 24px; min-height: 0; padding: 0; border-radius: 6px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .04); font-size: 12px; line-height: 1; box-shadow: none; cursor: pointer; opacity: .65; }
.cx-cad.on { opacity: 1; border-color: rgba(255, 214, 107, .55); background: rgba(255, 214, 107, .14); }
.it-topo .it-busca { min-width: 0; }
/* Aba Itens: materiais e vitaminas (não caem de pokémon). */
.it-origem, .it-pra { margin: 4px 0; font-size: 12px; line-height: 1.35; color: var(--ink); }
.it-origem { color: #ffd66b; }