/* Ajustes finos do SPA (o que o CSS scoped do hub não cobre). */

#session {
  display: none;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 20;
  background: rgba(10, 10, 16, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 10px;
}

#log {
  position: absolute;
  left: 10px;
  bottom: 10px;
  max-width: 46%;
  max-height: 30%;
  overflow: auto;
  z-index: 20;
  font-size: 11.5px;
  color: var(--ot-muted, #9aa);
}

#log-lines > div {
  padding: 1px 0;
}

.team-avatar-canvas {
  image-rendering: pixelated;
  width: 48px;
  height: 48px;
}

#floating-skill-bar {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
}
/* O seletor do modo das magias (AUTO/MANUAL) na barra de skill. */
.skill-mode-btn {
  flex: 0 0 auto;
  align-self: center;
  margin: 0 6px;
  padding: 4px 10px;
  min-height: 26px;
  background: rgba(18, 24, 36, 0.85);
  border: 1px solid rgba(120, 170, 255, 0.35);
  border-radius: 6px;
  color: #9fb6cc;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  user-select: none;
}
.skill-mode-btn:hover { border-color: #06b6d4; color: #d7ecf5; }
.skill-mode-btn.manual {
  border-color: #f59e0b;
  color: #ffd166;
  background: rgba(60, 42, 10, 0.85);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.25);
}
/* No modo manual as skills viram botões: clique pra soltar. */
#floating-skill-bar.skills-manual .skill-slot { cursor: pointer; }
#floating-skill-bar.skills-manual .skill-slot:hover {
  border-color: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.35);
}
/* Sem summon não há golpes: a barra some (o display vencia o [hidden]). */
#floating-skill-bar[hidden] {
  display: none;
}

/* O card do treinador: o dano nele aparece aqui (como o vigor do hub). */
#trainer-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  grid-template-areas: "map map map" "avatar name level" "avatar hp hp" "avatar text text" "xp xp xp";
  gap: 3px 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}
/* O minimap no topo do card: o mapa em volta + a posicao x,y,z. */
#tr-map-wrap {
  grid-area: map;
  position: relative;
  margin-bottom: 4px;
}
#tr-minimap {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #05060a;
}
#tr-pos {
  position: absolute;
  right: 4px;
  bottom: 3px;
  font-size: 9.5px;
  font-weight: 700;
  color: #e8e8f0;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
  pointer-events: none;
}
#tr-avatar {
  grid-area: avatar;
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
}
#tr-xp-wrap {
  grid-area: xp;
  height: 5px;
  border-radius: 999px;
  background: #0a0a0e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-top: 3px;
}
#tr-xp {
  display: block;
  height: 100%;
  width: 0%;
  background: #3aa0ff;
}
#tr-xp-line {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  max-width: 100%;
}
.tr-xp-bonus {
  flex: 0 0 auto;
  border: 1px solid rgba(90, 220, 240, 0.4);
  border-radius: 999px;
  padding: 1px 6px;
  background: rgba(40, 145, 165, 0.18);
  color: #7fe9f7;
  font: inherit;
  font-size: 9.5px;
  font-weight: 900;
  line-height: 1.35;
  cursor: pointer;
}
.tr-xp-bonus:hover, .tr-xp-bonus:focus-visible {
  border-color: #7fe9f7;
  background: rgba(60, 190, 210, 0.28);
  outline: none;
}
.tr-xp-bonus.negative { color: #ff9b9b; border-color: rgba(255, 120, 120, 0.4); background: rgba(160, 40, 40, 0.18); }
.tr-xp-tip {
  position: absolute;
  right: 8px;
  top: calc(100% - 2px);
  z-index: 80;
  width: 230px;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid rgba(90, 220, 240, 0.35);
  background: rgba(7, 16, 22, 0.98);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  color: #cfe6ee;
  font-size: 10.5px;
  line-height: 1.5;
}
.tr-xp-tip[hidden] { display: none; }
.tr-xp-tip-title { margin-bottom: 6px; font-size: 9.5px; font-weight: 900; letter-spacing: 0.1em; color: #7fe9f7; }
.tr-xp-tip-row { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.tr-xp-tip-row b { color: #eaf7fb; }
.tr-xp-tip-row-muted { color: #7d929e; }
.tr-xp-tip-row-muted b { color: #9fb8c4; font-weight: 700; }
.tr-xp-tip-total { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; font-weight: 900; color: #7fe9f7; }
.tr-xp-tip-note {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  color: #7d929e;
  font-size: 9.5px;
  line-height: 1.45;
}

.tr-xp-boost-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  padding: 6px 7px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.tr-xp-boost-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: #dfeef4;
}
.tr-xp-boost-star { color: #ffd34d; font-size: 14px; line-height: 1; }
.tr-xp-boost-time {
  margin-left: 2px;
  color: #7fe9f7;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.tr-xp-boost-time[hidden] { display: none; }
.tr-xp-boost-actions { display: inline-flex; align-items: center; gap: 5px; }
.tr-xp-boost-buy,
.tr-xp-boost-toggle {
  border: 0;
  border-radius: 6px;
  padding: 5px 11px;
  background: #35c7dc;
  color: #041014;
  font: inherit;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.tr-xp-boost-toggle {
  width: 26px;
  min-width: 26px;
  padding: 5px 0;
  text-align: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #cfe6ee;
  font-size: 11px;
}
.tr-xp-boost-toggle[hidden] { display: none; }
.tr-xp-boost-buy:hover { background: #63e4f2; }
.tr-xp-boost-toggle:hover { border-color: #7fe9f7; color: #fff; }

#tr-xptext {
  grid-area: xp;
  font-size: 9.5px;
  color: var(--ot-muted, #9aa);
  text-align: right;
  margin-top: 9px;
}
#tr-name {
  grid-area: name;
  font-weight: 800;
  font-size: 12.5px;
  color: #e8e8f0;
}
#tr-level {
  grid-area: level;
  font-size: 11px;
  color: var(--ot-muted, #9aa);
}
#tr-hp-wrap {
  grid-area: hp;
  height: 8px;
  border-radius: 999px;
  background: #0a0a0e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-top: 4px;
}
#tr-hp {
  display: block;
  height: 100%;
  width: 100%;
  background: #3d9e4a;
  transition: width 0.2s;
}
#tr-hp-text {
  grid-area: text;
  font-size: 10.5px;
  color: var(--ot-muted, #9aa);
  text-align: right;
}

/* Os painéis (hunts/pokédex/mochila/loja/depot) são overlays centrais —
   sem isso eles nascem no fim do documento, fora da tela. */
#dex,
#bag,
#shop,
#depot,
#hunts,
#capture {
  position: fixed;
  top: 9%;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 88vw);
  max-height: 76vh;
  overflow: auto;
  z-index: 1200;
  background: rgba(12, 12, 18, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.dock {
  /* À esquerda, logo ACIMA do chat (o botão das Hunts, no estilo da
     Automação). O `bottom` vem da ALTURA REAL do chat (`--chat-h`, medida no
     JS): o chat cresce com as mensagens e um offset fixo não serve — em Full
     HD o botão ficava atrás dele. */
  position: fixed;
  left: 12px;
  bottom: calc(20px + var(--chat-h, 150px));
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 40;
  width: 200px;
}
/* O botão das Hunts com fundo sólido (no estilo da Automação). */
#hunt-btn {
  background: linear-gradient(180deg, #1f3d54, #14283a);
  border: 1px solid rgba(143, 238, 255, 0.55);
  color: #cfefff;
}
#hunt-btn:hover {
  filter: brightness(1.15);
}

.dock-btn,
.idle-config-launcher {
  pointer-events: auto;
  cursor: pointer;
}
/* Hover bem fraco nos botões do dock. */
.dock-btn:hover,
.idle-config-launcher:hover {
  filter: brightness(1.18);
}

/* O painel da sessão (esquerda, como o hub) — o card da referência
   (`card_sessao.png`): o nome da hunt no cabeçalho, os stats, o divisor da
   AUTOMAÇÃO com os chips (ícone + check) e os botões. */
#session-side-root {
  position: fixed;
  left: 12px;
  top: 90px;
  width: 210px;
  z-index: 60;
  /* O card nunca invade o botão das HUNTS (que fica logo acima do chat):
     o limite usa a altura REAL do chat (`--chat-h`). */
  max-height: calc(100vh - 156px - var(--chat-h, 150px));
  overflow-y: auto;
  scrollbar-width: thin;
}
.session-side {
  background: rgba(10, 10, 16, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 2px solid rgba(79, 195, 232, 0.55);
  border-radius: 10px;
  padding: 8px 10px 10px;
  color: #dde;
  font-size: 12px;
}
.session-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 0 0 6px;
  border: 0;
  background: none;
  cursor: pointer;
}
.session-chev {
  color: #4fc3e8;
  font-weight: 800;
}
.session-title {
  flex: 1 1 auto;
  text-align: left;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #4fc3e8;
  font-size: 12px;
  text-transform: uppercase;
}
.session-collapse {
  color: #4fc3e8;
  font-size: 11px;
  opacity: 0.85;
}
.session-side.collapsed .session-body {
  display: none;
}
/* Telas baixas (HD pra baixo): o card da sessão compacta — perde as linhas
   secundárias (XP/H, LUCRO/H, KILLS/H, PRÓXIMO LEVEL) e os controles
   encolhem, pra caber com os botões e o "HUNTS" sem sobreposição. */
@media (max-height: 700px) {
  .session-stats .session-row:nth-child(3),
  .session-stats .session-row:nth-child(4),
  .session-stats .session-row:nth-child(6),
  .session-stats .session-row:nth-child(7) {
    display: none;
  }
  .session-row {
    padding: 1px 0;
  }
  .session-chip img {
    width: 18px;
    height: 18px;
  }
  .session-stop {
    margin-top: 6px;
    padding: 5px;
  }
}
.session-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.session-row .k {
  color: var(--ot-muted, #9aa);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.session-row .v {
  font-weight: 700;
}
.session-row .v.muted {
  color: #8a93a5;
  font-weight: 600;
}
.session-row .v.cyan {
  color: #4fc3e8;
}
/* A barra da próxima wave: enche até o spawn da leva (dentro da row dela). */
.session-wave-bar {
  flex: 1 1 auto;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.session-wave-bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3da0c8, #8fe);
  transition: width 0.9s linear;
}
/* O divisor da AUTOMAÇÃO + os chips (ícone + check + o "Fora" da cura). */
.session-auto-div {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 6px;
}
.session-auto-line {
  flex: 1 1 auto;
  height: 1px;
  background: rgba(79, 195, 232, 0.35);
}
.session-auto-label {
  color: #4fc3e8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.session-auto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;
  padding: 0 6px;
}
.session-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.session-chip img {
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
}
.session-check {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #2b3440;
  color: #6b7688;
  font-size: 10px;
  font-weight: 900;
  line-height: 15px;
  text-align: center;
}
.session-chip.on .session-check {
  background: #35d07f;
  color: #0b1218;
}
.session-chip-tag {
  color: #4fc3e8;
  font-weight: 800;
  font-size: 11px;
}
/* O chip do Revive no limite da wave (2/2): o "spent" em vermelho + o ícone
   apagado — o sinal de que os revives da wave acabaram. */
.session-chip-tag.spent {
  color: #ef4444;
}
.session-chip.spent img {
  filter: grayscale(1) opacity(0.55);
}
/* O ALERTA do Revive PISCA no card da sessão:
   - `warn` (âmbar): automação ligada e SEM item no inventário (tag "0");
   - `spent` (vermelho): limite de 2 usos da wave atingido.
   O chip inteiro pulsa pra chamar o olho sem tapar o resto do card. */
@keyframes session-chip-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.session-chip.warn,
.session-chip.spent {
  animation: session-chip-blink 1.1s ease-in-out infinite;
}
.session-chip.warn .session-chip-tag {
  color: #f59e0b;
}
.session-chip.warn img {
  filter: grayscale(0.6) opacity(0.7);
}
@media (prefers-reduced-motion: reduce) {
  .session-chip.warn,
  .session-chip.spent {
    animation: none;
  }
  .session-chip.warn img {
    outline: 2px solid #f59e0b;
    outline-offset: 1px;
    border-radius: 50%;
  }
  .session-chip.spent img {
    outline: 2px solid #ef4444;
    outline-offset: 1px;
    border-radius: 50%;
  }
}
/* O chevron do "DETALHES DA HUNT" com um respiro do texto. */
.session-body .session-details {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.session-stop {
  margin-top: 8px;
  width: 100%;
  padding: 7px;
  border: 0;
  border-radius: 8px;
  background: #c0392b;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.05em;
  cursor: pointer;
}

/* O chat (embaixo à esquerda, como o hub). */
#chat {
  position: fixed;
  left: 12px;
  bottom: 12px;
  width: 380px;
  max-width: 42vw;
  z-index: 70;
  background: rgba(8, 8, 12, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 11.5px;
  color: #ccd;
  /* O chat crescia com as mensagens (em Full HD cobria o botão das HUNTS):
     agora tem teto e o corpo rola por dentro. */
  display: flex;
  flex-direction: column;
  max-height: min(32vh, 260px);
}
#chat .phw-chat-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* Telas médias (até 780px de altura): o chat encolhe um pouco e as linhas do
   card ficam mais justas — o card da sessão cabe inteiro mesmo com o chat
   cheio (o dock usa a altura real do chat). */
@media (max-height: 780px) {
  #chat {
    max-height: min(24vh, 180px);
  }
  .session-row {
    padding: 1px 0;
  }
}
.chat-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}
.chat-tab {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ot-muted, #9aa);
  cursor: default;
}
.chat-tab:first-child {
  color: #8fe;
  font-weight: 800;
}
.chat-lines {
  max-height: 110px;
  overflow: auto;
}
.chat-line {
  padding: 1px 0;
}
.chat-input-row {
  display: flex;
  gap: 6px;
  margin-top: 5px;
}
.chat-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #dde;
  padding: 5px 8px;
  font-size: 11.5px;
}
.chat-send {
  border: 0;
  border-radius: 6px;
  padding: 0 12px;
  background: #1d6fa5;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

/* O modal da Automação (o hub usa .idle-modal-overlay/.idle-modal). */
/* A modal de aviso (o erro do depot etc.). */
.idle-modal.idle-alert {
  max-width: 340px;
}
.idle-alert-text {
  padding: 10px 16px 6px;
  color: #cfe0ee;
  font-size: 12px;
  line-height: 1.5;
}
/* A confirmação de compra da Loja de Diamantes (mesmo padrão do pokeshop). */
.shop-confirm-note {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.5;
  color: #8fa8b4;
}
.shop-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}
.idle-modal-overlay {
  position: fixed;
  inset: 0;
  /* Acima da modal de hunts (4000): a Automação abre a partir dela. */
  z-index: 5000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.idle-modal-overlay[hidden] {
  display: none;
}
.idle-modal {
  width: min(560px, 92vw);
  max-height: 80vh;
  overflow: auto;
  background: #12121a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 14px;
  color: #dde;
}
.idle-config-tabs {
  display: flex;
  gap: 6px;
  margin: 8px 0;
  flex-wrap: wrap;
}
.idle-config-btn {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: #dde;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
}
.idle-config-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.idle-config-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
/* A dica e os controles da aba HUNT da Automação. */
.idle-config-hint {
  font-size: 11px;
  color: #9aa;
  line-height: 1.35;
}
.idle-wave-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.idle-wave-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: #dde;
  cursor: pointer;
  font-size: 12px;
}
.idle-wave-btn.active {
  background: rgba(58, 160, 255, 0.35);
  border-color: #3aa0ff;
  font-weight: 800;
}
.idle-wave-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.idle-done-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.idle-done-name {
  flex: 1 1 auto;
}

/* A party em cartões quadrados (o hub): coluna vertical flutuante. */
#party-squares-root {
  position: fixed;
  /* Ancorado logo à esquerda da sidebar (que encolhe com o --ui-zoom): nunca
     fica por cima do card da direita nem some em telas menores. */
  right: calc(var(--sidebar-w, 272px) + 12px);
  top: calc(var(--topbar-h, 62px) + 30px);
  z-index: 55;
}
.party-squares {
  /* Flui dentro do #party-squares-root (que é quem ancora à direita). */
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 6px;
  cursor: grab;
}
/* Os cartões continuam numa coluna; os controles ficam à esquerda. */
.party-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Os controles do summon (mover/fixar), à esquerda do card do time. */
.party-ctrl-strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 2px;
}
.party-ctrl {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 10, 16, 0.8);
  color: #cfe;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.party-ctrl:hover {
  background: rgba(40, 60, 90, 0.9);
  border-color: rgba(120, 190, 255, 0.6);
}
.party-ctrl.active {
  background: rgba(58, 160, 255, 0.35);
  border-color: #3aa0ff;
  box-shadow: 0 0 8px rgba(58, 160, 255, 0.5);
}
/* O cadeado do summon ativo dentro da hunt. */
.ps-lock {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: 11px;
  display: none;
  filter: drop-shadow(0 1px 1px #000);
}
.party-square.locked .ps-lock {
  display: block;
}
.party-square.locked {
  cursor: not-allowed;
}
.party-square {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 10px;
  background: rgba(10, 10, 16, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
  cursor: pointer;
}
.party-square.active {
  border-color: #3aa0ff;
  box-shadow: 0 0 10px rgba(58, 160, 255, 0.5);
}
/* O sprite grande cobrindo o card. */
.party-square .ps-sprite {
  position: absolute;
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  object-fit: contain;
  image-rendering: pixelated;
}
/* Os icones dos TIPOS no canto inferior esquerdo. */
.party-square .ps-types {
  position: absolute;
  left: 3px;
  bottom: 15px;
  display: flex;
  gap: 1px;
  z-index: 3;
}
.party-square .ps-types img {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 2px #000);
}
/* O badge de boost no canto superior direito. */
.party-square .ps-boost {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  background: #3aa0ff;
  border-radius: 9px;
  padding: 0 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  z-index: 3;
}
.party-square .ps-hp {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px #000;
  z-index: 3;
}
.party-square .ps-bar {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 11px;
  height: 4px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 2px;
  overflow: hidden;
  z-index: 3;
}
.party-square.fainted {
  opacity: 0.45;
  filter: grayscale(0.8);
}
/* Telas estreitas: a party vai pro rodapé (horizontal), sem cobrir o card. */
/* O tooltip do hover: as infos completas do Pokémon. */
.party-tip {
  position: fixed;
  z-index: 200;
  min-width: 168px;
  background: rgba(10, 10, 16, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 8px 10px;
  color: #dde;
  font-size: 11.5px;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.party-tip-name {
  font-weight: 800;
  color: #8fe;
  margin-bottom: 4px;
}
.party-tip-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 1px 0;
}
.party-tip-row .k {
  color: #9aa;
  font-size: 10.5px;
  letter-spacing: 0.03em;
}
.party-tip-row .v {
  font-weight: 700;
}

/* O ícone e o cabeçalho da Pokédex. */
.dex-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  image-rendering: pixelated;
}
.dex-icon-lg {
  width: 64px;
  height: 64px;
}
.dex-name-col {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  gap: 1px;
}
.dex-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.dex-detail-name {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--phw-text-primary, #dde);
}
/* O toggle do shiny no detalhe da pokédex. */
.dex-shiny-toggle {
  flex: 0 0 auto;
  align-self: center;
  margin-left: auto;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(250, 204, 21, 0.45);
  background: rgba(250, 204, 21, 0.12);
  color: #facc15;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.dex-shiny-toggle:hover {
  background: rgba(250, 204, 21, 0.22);
}
.ps-sprite {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.ps-name {
  display: block;
  font-size: 8px;
  text-align: center;
  padding-top: 18px;
  color: #dde;
}
.ps-boost {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 9px;
  font-weight: 800;
  color: #6cf;
  text-shadow: 0 1px 2px #000;
}
.ps-hp {
  position: absolute;
  bottom: 3px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}
.ps-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(0, 0, 0, 0.6);
}
.ps-bar i {
  display: block;
  height: 100%;
}

/* O XP boost no card do treinador. */
#tr-boost-wrap {
  grid-area: hp;
  display: none;
}
#tr-boost-wrap i {
  display: block;
  height: 3px;
  width: 20%;
  background: #6cf;
  border-radius: 999px;
}
#tr-boost-text {
  font-size: 9px;
  color: #6cf;
}

/* O inventário (grid de ícones, como o hub). */
#inventory {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 10px;
}
.inv-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
}
.inv-tab {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ot-muted, #9aa);
}
.inv-tab.active {
  color: #8fe;
  font-weight: 800;
}
#inv-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  max-height: 190px;
  overflow: auto;
}
.inv-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* O SHINY é um recolor sutil no sprite: a estrelinha deixa claro na célula
   (o nome "Shiny X" também aparece no title/tooltip). */
.inv-shiny {
  position: absolute;
  top: 1px;
  right: 2px;
  font-size: 9px;
  line-height: 1;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
  pointer-events: none;
}
.party-square .ps-shiny {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 11px;
  line-height: 1;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
  pointer-events: none;
  display: none;
  z-index: 2;
}
.party-square.shiny .ps-shiny {
  display: block;
}
.inv-cell img {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
}
.inv-cell .cnt {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: 8.5px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}
/* O item que tem menu de contexto (starter stone). */
.inv-cell.inv-has-menu {
  cursor: pointer;
  border-color: rgba(250, 204, 21, 0.5);
}
.inv-cell.inv-has-menu:hover {
  box-shadow: 0 0 6px rgba(250, 204, 21, 0.5);
}
/* O menu de contexto dos itens. */
.inv-menu {
  position: fixed;
  z-index: 400;
  min-width: 110px;
  background: rgba(10, 10, 16, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
}
.inv-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #dde;
  font-size: 12px;
  cursor: pointer;
}
.inv-menu-item:hover {
  background: rgba(58, 160, 255, 0.25);
}

/* Os ícones do topbar. */
.top-icon-btn img {
  width: 22px;
  height: 22px;
  display: block;
  margin: 0 auto 1px;
  image-rendering: pixelated;
}
/* Os ícones novos são SVG inline (os PNG do jogo eram fatias erradas das
   sheets — a "analytics" mostrava uma cara de macaco). */
.top-ico {
  width: 22px;
  height: 22px;
  display: block;
  margin: 0 auto 1px;
  opacity: 0.85;
}
.top-icon-btn:hover .top-ico {
  color: var(--phw-accent);
  opacity: 1;
}

/* ── O RANKING (nível/capturas — lê a `ranking_mv` do servidor) ─────────── */
.ranking-box {
  width: min(560px, 94vw);
}
.ranking-me {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 16px 2px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--phw-text-muted);
}
.ranking-me-label {
  font-weight: 700;
}
.ranking-me-pos {
  font-size: 15px;
  font-weight: 800;
  color: var(--phw-accent);
  font-variant-numeric: tabular-nums;
}
.ranking-me-val {
  color: var(--phw-text-secondary);
}
.ranking-updated {
  padding: 0 16px 6px;
  font-size: 10px;
  color: var(--phw-text-muted);
}
.ranking-table {
  display: flex;
  flex-direction: column;
  margin: 4px 12px 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  overflow: hidden;
}
.ranking-thead,
.ranking-row {
  display: grid;
  grid-template-columns: 52px 1fr 64px 110px;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
}
.ranking-thead {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--phw-text-muted);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.03);
}
.ranking-row {
  font-size: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.ranking-row:nth-child(2n) {
  background: #ffffff05;
}
.ranking-pos {
  font-weight: 800;
  color: var(--phw-text-muted);
  font-variant-numeric: tabular-nums;
}
.ranking-pos-1 {
  color: #ffd75e;
}
.ranking-pos-2 {
  color: #d7dde8;
}
.ranking-pos-3 {
  color: #e8a15a;
}
.ranking-c-lv,
.ranking-c-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ranking-c-val {
  color: var(--phw-accent);
  font-weight: 600;
}

/* ── A POKÉPEDIA / GUILDA / CONFIG ─────────────────────────────────────── */
.pedia-box {
  width: min(620px, 94vw);
}
.pedia-tabs {
  flex-wrap: wrap;
}
.pedia-body {
  max-height: min(62vh, 620px);
  overflow-y: auto;
  padding: 0 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pedia-note {
  font-size: 11px;
  color: var(--phw-text-muted);
  padding: 6px 4px 0;
}
.pedia-balls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pedia-ball {
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid rgba(6, 182, 212, 0.35);
  border-radius: 999px;
  color: var(--phw-accent);
  background: rgba(6, 182, 212, 0.08);
}
.pedia-search {
  min-height: 32px;
  padding: 6px 10px;
  background: var(--phw-bg-dark);
  border: var(--phw-border-secondary);
  border-radius: var(--phw-radius-sm);
  color: var(--phw-text-primary);
  font-size: 12px;
}
.pedia-search::placeholder {
  color: var(--phw-text-muted);
}
.pedia-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 6px;
  padding: 4px 0;
}
.pedia-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
  min-width: 0;
}
.pedia-sprite {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.pedia-cell-name {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pedia-cell-tag {
  font-size: 10px;
  color: var(--phw-text-muted);
  line-height: 1.3;
}
.pedia-cell-click {
  cursor: pointer;
}
.pedia-cell-click:hover {
  border-color: rgba(6, 182, 212, 0.55);
  background: rgba(6, 182, 212, 0.08);
}
.pedia-stone-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  padding: 4px 0;
}
.pedia-stone-card {
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(6, 182, 212, 0.06);
  cursor: pointer;
  transition:
    border-color 0.12s,
    background 0.12s;
}
.pedia-stone-card:hover {
  border-color: var(--phw-accent);
  background: rgba(6, 182, 212, 0.12);
}
.pedia-stone-name {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.pedia-stone-count {
  font-size: 10px;
  color: var(--phw-text-muted);
  margin-top: 2px;
}
.pedia-table {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  overflow: hidden;
}
.pedia-thead,
.pedia-row {
  display: grid;
  grid-template-columns: 1fr 90px 90px 110px;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
}
.pedia-thead {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--phw-text-muted);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.03);
}
.pedia-thead span:not(:first-child),
.pedia-row span:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pedia-row {
  font-size: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.pedia-row:nth-child(2n) {
  background: #ffffff05;
}
.pedia-name {
  font-weight: 600;
  color: #fff;
  text-align: left !important;
}
.pedia-avg {
  color: var(--phw-accent);
  font-weight: 700;
}
.pedia-sec {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pedia-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pedia-chip {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--phw-text-secondary);
}
.pedia-chip-hard {
  border: 1px solid rgba(255, 90, 90, 0.5);
  color: #ff8a8a;
}
.pedia-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 4px;
}
.pedia-card {
  flex: 1 1 150px;
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 10px;
  padding: 12px;
  background: rgba(6, 182, 212, 0.06);
  text-align: center;
}
.pedia-card-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--phw-accent);
  font-variant-numeric: tabular-nums;
}
.pedia-card-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--phw-text-muted);
  font-weight: 700;
  margin-top: 2px;
}
.pedia-card-sub {
  font-size: 10px;
  color: var(--phw-text-secondary);
  margin-top: 4px;
}
.pedia-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 0;
}
.pedia-select {
  flex: 1;
  min-width: 0;
  min-height: 32px;
  padding: 4px 8px;
  background: var(--phw-bg-dark);
  border: var(--phw-border-secondary);
  border-radius: var(--phw-radius-sm);
  color: var(--phw-text-primary);
  font-size: 12px;
}
.pedia-xp .pedia-thead,
.pedia-xp .pedia-row {
  grid-template-columns: 1fr 110px;
}
/* A GUILDA */
.guild-box {
  width: min(560px, 94vw);
}
.guild-mine {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.guild-info {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--phw-text-secondary);
  padding: 0 4px;
}
.guild-table {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  overflow: hidden;
  margin: 4px 0;
}
.guild-thead,
.guild-row {
  display: grid;
  grid-template-columns: 1fr 70px 130px;
  gap: 6px;
  padding: 6px 10px;
  align-items: center;
}
.guild-thead {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--phw-text-muted);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.03);
}
.guild-row {
  font-size: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.guild-name {
  font-weight: 600;
  color: #fff;
}
.guild-rank {
  color: var(--phw-accent);
  text-align: right;
}
.guild-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.guild-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 12px;
}
.guild-list-row .guild-name {
  flex: 1;
}
.guild-members,
.guild-founded {
  font-size: 11px;
  color: var(--phw-text-muted);
}
/* O CONFIG */
.config-box {
  width: min(420px, 92vw);
}
.config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.config-label {
  font-size: 12px;
  color: var(--phw-text-primary);
  font-weight: 600;
}
.top-icon-btn {
  flex-direction: column;
  gap: 0;
  font-size: 8.5px;
  line-height: 1.1;
}
/* Hover bem fraco nos botões da topbar (feedback do mouse). */
.top-icon-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 8px;
}

/* A tela de loading das transicoes de hunt/CP. */
.idle-loading {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 12, 0.82);
  backdrop-filter: blur(2px);
}
.idle-loading[hidden] {
  display: none;
}
.idle-loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 26px 34px;
  background: rgba(10, 10, 16, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  color: #dde;
}
.idle-loading-spin {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: #8fe;
  animation: idle-loading-spin 0.8s linear infinite;
}
@keyframes idle-loading-spin {
  to { transform: rotate(360deg); }
}
.idle-loading-text {
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
}

/* O botão e o modal de detalhes da hunt. */
.session-details {
  margin-top: 8px;
  width: 100%;
  padding: 7px;
  border: 1px solid rgba(143, 238, 255, 0.55);
  border-radius: 8px;
  background: linear-gradient(180deg, #1f3d54, #14283a);
  color: #cfefff;
  font-weight: 800;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.session-details:hover {
  background: rgba(143, 238, 255, 0.16);
}
/* O botão da Automação fica ACIMA do card da sessão, com fundo sólido. */
.session-automation {
  margin-top: 0;
  margin-bottom: 8px;
  background: linear-gradient(180deg, #1f3d54, #14283a);
  border-color: rgba(143, 238, 255, 0.65);
}
.idle-hunt-modal {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 12, 0.8);
}
.idle-hunt-modal[hidden] {
  display: none;
}
.idle-hunt-box {
  /* Larga de verdade: o resumo (6 cards + as grades de sprites) respira —
     os 680px ainda apertavam as linhas. */
  width: min(960px, 96vw);
  max-height: 82vh;
  overflow-y: auto;
  background: rgba(10, 10, 16, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 14px 16px;
  color: #dde;
  font-size: 12px;
}
.idle-hunt-title {
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #8fe;
  margin-bottom: 8px;
}
/* O aviso de morte no resumo da hunt. */
.idle-hunt-died {
  margin-bottom: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #ff8a8a;
  font-weight: 800;
  font-size: 12px;
  text-align: center;
}
.idle-hunt-section {
  margin: 10px 0 4px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: #9aa;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 3px;
}
.idle-hunt-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}
.idle-hunt-line .n {
  color: #dde;
}
.idle-hunt-line .v {
  font-weight: 700;
  color: #8fe;
  white-space: nowrap;
}
.idle-hunt-total .n {
  color: #9aa;
}
.idle-hunt-total .v {
  color: #dde;
}
.idle-hunt-footer {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.idle-hunt-net .v {
  color: #5fdc72;
}

/* A modal do perfil (clique na foto): abas + histórico de hunts. */
#tr-avatar {
  cursor: pointer;
}
.profile-box {
  width: min(520px, 94vw);
}
.outfit-modal-box {
  width: min(720px, 94vw);
}
/* Na aba HISTÓRICO a tabela é larga (HUNT · DURAÇÃO · DATA · HORÁRIO +
   Detalhes/×), como na referência `historico_hunts.png`. */
.profile-box.profile-box-wide {
  width: min(960px, 96vw);
}
.profile-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.profile-tab {
  flex: 1;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #9aa;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.profile-tab.on {
  border-color: #8fe;
  color: #8fe;
  background: rgba(143, 238, 255, 0.1);
}
/* A tabela do HISTÓRICO de hunts (historico_hunts.png): a nota no topo,
   HUNT · DURAÇÃO · DATA · HORÁRIO e as ações ★ · Detalhes · ×. */
.hunts-note {
  font-size: 10.5px;
  line-height: 1.35;
  color: #98a2b3;
  margin: 2px 0 8px;
}
.hunts-msg {
  font-size: 11px;
  color: #e8c34a;
  margin-bottom: 6px;
}
.hunts-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 54vh;
  overflow-y: auto;
  padding-right: 4px;
}
.hunts-thead,
.hunts-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 62px 78px 54px 84px 24px;
  gap: 8px;
  align-items: center;
}
.hunts-thead {
  padding: 0 10px 2px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #4fc3e8;
}
.hunts-row {
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.hunts-row:hover {
  border-color: rgba(143, 238, 255, 0.35);
}
.hunts-c-dur,
.hunts-c-date,
.hunts-c-time {
  text-align: right;
  font-size: 11px;
  color: #c3ccd8;
}
.hunts-name {
  font-weight: 800;
  font-size: 12px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hunts-name-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.hunts-reason {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  color: #8c98aa;
}
.hunts-star {
  border: none;
  background: none;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  color: #4a5568;
  cursor: pointer;
}
.hunts-star.on {
  color: #4fc3e8;
}
.hunts-star:hover {
  color: #8fe;
}
.hunts-btn-details {
  padding: 5px 0;
  border: none;
  border-radius: 6px;
  background: linear-gradient(180deg, #43c6e8, #2b9cc0);
  color: #06121a;
  font-weight: 800;
  font-size: 11px;
  cursor: pointer;
}
.hunts-btn-details:hover {
  filter: brightness(1.12);
}
.hunts-del {
  border: none;
  background: none;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: #e2564a;
  cursor: pointer;
}
.hunts-del:disabled {
  color: #5a2a26;
  cursor: not-allowed;
}

/* A aba OUTFIT: a grade de roupas do servidor (clica e veste). */
.outfit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 6px;
  max-height: 52vh;
  overflow-y: auto;
  padding-right: 4px;
}
.outfit-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: #cdd;
  cursor: pointer;
}
.outfit-card:hover {
  border-color: rgba(143, 238, 255, 0.45);
}
.outfit-card.on {
  border-color: #8fe;
  background: rgba(143, 238, 255, 0.12);
  color: #eaffff;
}
.outfit-canvas {
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
}
.outfit-name {
  font-size: 9.5px;
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O aviso de "não pode sair da área" da hunt. */
.idle-play-toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%);
  z-index: 250;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(226, 86, 74, 0.92);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.03em;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.idle-play-toast[hidden] {
  display: none;
}

/* O menu de hunts: busca + filtro de região. */
.hunts-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
/* Sem busca/região quando o DETALHE da hunt está aberto. */
.hunts-bar[hidden] { display: none; }
.hunts-search {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 10, 16, 0.9);
  color: #dde;
  font-size: 12px;
}
.hunts-region {
  flex: 0 0 auto;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 10, 16, 0.9);
  color: #dde;
  font-size: 12px;
}
.hunts-count {
  margin-bottom: 6px;
  font-size: 10.5px;
  color: #9aa;
  letter-spacing: 0.04em;
}
.hunts-list {
  max-height: 60vh;
  overflow-y: auto;
}

/* ── Hunts em cards paginados + detalhe ──────────────────────────────────── */
.hunts-body {
  max-height: 66vh;
  overflow-y: auto;
}
.hunt-cards {
  display: grid;
  /* SEMPRE 5 por linha (3 linhas = 15/página), sem rolagem. */
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.hunt-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
  background: #0b0e14;
  cursor: pointer;
  isolation: isolate;
}
.hunt-card:hover {
  border-color: rgba(143, 238, 255, 0.55);
}
.hunt-card:hover .hunt-card-mon {
  transform: translateY(-2px) scale(1.05);
}
/* Fundo: o MAPA da hunt, desfocado. */
.hunt-card-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(160deg, #142033, #0a0d14);
}
.hunt-card-map canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  filter: blur(2px) brightness(0.5) saturate(0.9);
  transform: scale(1.1);
}
.hunt-card-map::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 12, 20, 0.35), rgba(4, 6, 10, 0.65));
}
/* O Pokémon da frente, animado. */
.hunt-card-mon {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 3px 18px;
  transition: transform 0.15s ease;
}
.hunt-sprite {
  image-rendering: pixelated;
}
/* Header (blur mais escuro): nome no centro/embaixo, nível no canto direito. */
.hunt-card-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 5px 2px;
  background: rgba(8, 10, 16, 0.5);
  backdrop-filter: blur(5px) brightness(0.7);
  -webkit-backdrop-filter: blur(5px) brightness(0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hunt-card-head.locked {
  background: rgba(44, 8, 12, 0.55);
}
.hunt-card-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
  font-size: 10.5px;
  line-height: 1.05;
  color: #eaffff;
  text-shadow: 0 1px 3px #000;
}
.hunt-card-lv {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 9px;
  font-weight: 800;
  color: #ffe066;
  text-shadow: 0 1px 2px #000;
}
.hunt-card-lock {
  position: absolute;
  top: 1px;
  left: 4px;
  font-size: 10px;
}
/* Footer (blur mais escuro): as animações de todos os Pokémon da hunt. */
.hunt-card-foot {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 3px;
  overflow: hidden;
  background: rgba(6, 8, 12, 0.6);
  backdrop-filter: blur(5px) brightness(0.65);
  -webkit-backdrop-filter: blur(5px) brightness(0.65);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.hunt-card-foot .poke-art {
  width: 18px;
  height: 18px;
  object-fit: contain;
  image-rendering: pixelated;
}
.mon-anim {
  flex: 0 0 auto;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
@keyframes mon-front {
  from { background-position: var(--mon-x, 0px) 0px; }
  to { background-position: var(--mon-x, 0px) var(--mon-end, 0px); }
}
/* Botões de trocar de página nas LATERAIS da grade (não no rodapé). */
.hunts-page {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hunts-page .hunt-cards {
  flex: 1 1 auto;
  min-width: 0;
}
.hunts-page-btn {
  flex: 0 0 auto;
  width: 30px;
  height: 68px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(15, 20, 28, 0.8);
  color: #cfe8ff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.hunts-page-btn:hover:not(:disabled) {
  border-color: rgba(143, 238, 255, 0.5);
  background: rgba(143, 238, 255, 0.12);
}
.hunts-page-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.hunts-page-info {
  margin-top: 6px;
  text-align: center;
  font-size: 11px;
  color: #9fb3c8;
  font-weight: 700;
}
.hunts-back {
  margin-bottom: 8px;
}
.hunt-detail {
  display: grid;
  /* Mapa à esquerda com ~250px e altura TOTAL da modal. */
  grid-template-columns: 250px 1fr;
  gap: 12px;
  align-items: stretch;
  height: min(54vh, 470px);
}
.hunt-detail-left {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.hunt-map-canvas {
  width: 100%;
  height: 100%;
  /* Cobre a caixa (CORTA o mapa, não comprime). */
  object-fit: cover;
  image-rendering: pixelated;
  border: none;
  border-radius: 0;
  background: #0f0f16;
}
.hunt-detail-access {
  display: none;
}
/* Overlays do mapa: voltar/favoritar (topo) e nome/níveis (embaixo). */
.hunt-map-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hunt-map-overlay > * {
  pointer-events: auto;
}
.hunt-map-btn {
  position: absolute;
  top: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(10, 14, 20, 0.6);
  color: #eaf6ff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hunt-map-btn:hover {
  background: rgba(10, 14, 20, 0.9);
  border-color: #8fe;
}
.hunt-map-back { left: 8px; }
.hunt-map-star { right: 8px; }
.hunt-map-star.on { color: #ffd166; border-color: #ffd166; }
.hunt-map-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 12px 10px;
  background: linear-gradient(180deg, transparent, rgba(4, 6, 10, 0.88));
  pointer-events: none;
}
.hunt-map-name {
  font-weight: 800;
  font-size: 20px;
  color: #fff;
  text-shadow: 0 2px 6px #000;
  margin-bottom: 6px;
}
.hunt-map-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.hunt-map-badge {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #dfe9f2;
  background: rgba(10, 14, 20, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  padding: 3px 8px;
}
/* A coluna da direita: pokémons, loots e elementos. */
.hunt-detail-mid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  overflow-y: auto;
  padding-right: 4px;
}
.hunt-sec {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4fd6e6;
  border-bottom: 1px solid rgba(79, 214, 230, 0.25);
  padding-bottom: 3px;
  margin-bottom: -4px;
}
.hunt-mon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hunt-mon-card {
  width: 78px;
  border: 1px solid rgba(120, 170, 255, 0.35);
  border-radius: 8px;
  background: rgba(20, 26, 38, 0.9);
  padding: 4px 4px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.hunt-mon-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.hunt-mon-name {
  font-size: 10.5px;
  font-weight: 700;
  color: #eaf6ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hunt-mon-ball {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  image-rendering: pixelated;
  opacity: 0.45;
  filter: grayscale(1);
}
.hunt-mon-ball.caught {
  opacity: 1;
  filter: none;
}
.hunt-mon-art {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hunt-mon-types {
  display: flex;
  gap: 2px;
  min-height: 15px;
}
.hunt-mon-type {
  width: 15px;
  height: 15px;
  image-rendering: pixelated;
}
.hunt-loot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hunt-loot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 42px;
}
.hunt-loot {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(30, 36, 48, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hunt-loot-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
}
.hunt-loot-name {
  font-size: 8px;
  color: #cdd;
  text-align: center;
  padding: 0 2px;
}
.hunt-loot-tag {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: 4px;
  padding: 0 4px;
}
.hunt-loot-tag.rare { color: #fff; background: #c0392b; }
.hunt-loot-tag.uncommon { color: #06220f; background: #3fae5a; }
.hunt-elem-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hunt-elem-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 3px 12px 3px 4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}
.hunt-elem-icon {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
}
.hunt-elem-name { color: #fff; }
.hunt-elem {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 2px 9px;
}
/* FOOTER da modal: automação (esquerda) e iniciar (direita). */
.hunt-detail-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.hunt-auto-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(120, 200, 255, 0.5);
  background: rgba(30, 90, 140, 0.45);
  color: #eaf6ff;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 12px;
  cursor: pointer;
}
.hunt-auto-btn:hover {
  background: rgba(40, 120, 180, 0.6);
}
.hunt-auto-dot {
  font-size: 14px;
  color: #8fd6ff;
  animation: hunt-auto-spin 1.4s linear infinite;
}
@keyframes hunt-auto-spin {
  to { transform: rotate(360deg); }
}
.hunt-start-btn {
  padding: 12px 34px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #4fc3f7, #2b8fd6);
  color: #05202e;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(79, 195, 247, 0.35);
}
.hunt-start-btn:hover {
  filter: brightness(1.1);
}

/* O stepper do tamanho da wave no card da sessão. */
.session-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.session-step {
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #dde;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.session-step:hover {
  border-color: #8fe;
  color: #8fe;
}
.session-step-v {
  min-width: 34px;
  text-align: center;
  font-weight: 700;
}

/* A tela de zzz do AFK: o fundo (o mapa) fica em blur e a caçada segue
   rodando no servidor. Ao acordar, vira "Sincronizando…" até o login. */
.afk-overlay {
  background: rgba(4, 8, 8, 0.5);
  backdrop-filter: blur(8px) saturate(0.85);
  -webkit-backdrop-filter: blur(8px) saturate(0.85);
}
.afk-modal {
  width: auto;
  max-width: min(520px, 92vw);
  max-height: none;
  padding: 22px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.afk-zzz {
  height: 52px;
  font: 700 34px/1 ui-monospace, "JetBrains Mono", Consolas, monospace;
  color: #7fd8c8;
  letter-spacing: 10px;
  user-select: none;
}
.afk-z {
  display: inline-block;
  opacity: 0.25;
  animation: afk-float 2.6s ease-in-out infinite;
}
.afk-z:nth-child(2) {
  animation-delay: 0.7s;
}
.afk-z:nth-child(3) {
  animation-delay: 1.4s;
  font-size: 48px;
}
@keyframes afk-float {
  0%, 100% { transform: translateY(8px); opacity: 0.25; }
  50% { transform: translateY(-10px); opacity: 1; }
}
.afk-spin {
  display: none;
  width: 34px;
  height: 34px;
  border: 3px solid rgba(127, 216, 200, 0.25);
  border-top-color: #7fd8c8;
  border-radius: 50%;
  animation: afk-rot 1s linear infinite;
}
@keyframes afk-rot {
  to { transform: rotate(360deg); }
}
.afk-title {
  font-weight: 700;
  font-size: 14px;
  color: #e8fff9;
}
.afk-msg {
  font-size: 12.5px;
  line-height: 1.65;
  color: #bfe3db;
}
.afk-overlay[data-mode="sync"] .afk-zzz,
.afk-overlay[data-mode="error"] .afk-zzz {
  display: none;
}
.afk-overlay[data-mode="sync"] .afk-spin {
  display: block;
}

/* A modal de captura: o avatar do Pokemon + o resumo. */
.catch-modal {
  width: auto;
  max-width: min(420px, 92vw);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 26px;
}
.catch-art {
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

/* O painel Captura: a tabela por espécie (tentativas/máx/capturas) com
   cabeçalho ordenável e filtros (opcode 204/205). */
.capture-status {
  margin-bottom: 6px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: #9aa;
}
.capture-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.capture-search {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 9px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0a0a0e;
  color: #e8e8f0;
  font-size: 12px;
}
/* A busca/filtro do BAU (o mesmo visual da busca do painel Capturas). */
.depot-tools {
  display: flex;
  gap: 6px;
  margin: 2px 0 6px;
}
.depot-search {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 9px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0a0a0e;
  color: #e8e8f0;
  font-size: 12px;
}
.depot-search:focus {
  outline: 0;
  border-color: rgba(58, 160, 255, 0.6);
}
.depot-shiny-filter {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0a0a0e;
  color: #c8c8d4;
  font-size: 12px;
  cursor: pointer;
}
.depot-shiny-filter.on {
  border-color: rgba(255, 208, 80, 0.7);
  color: #ffd050;
  box-shadow: 0 0 8px rgba(255, 208, 80, 0.25);
}
.capture-search:focus {
  outline: 0;
  border-color: rgba(58, 160, 255, 0.6);
}
.capture-only {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0a0a0e;
  color: #9aa;
  font-size: 11px;
  cursor: pointer;
}
.capture-only.on {
  color: #0b0f0e;
  background: linear-gradient(90deg, #d8a12c, #f7e07a);
  border-color: transparent;
  font-weight: 700;
}
.capture-head,
.capture-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px 52px 62px;
  align-items: center;
  gap: 6px;
}
.capture-head {
  padding: 0 2px 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9aa;
}
.capture-head .s {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-align: right;
}
.capture-head .s:first-child {
  text-align: left;
}
.capture-head .s.on {
  color: #f7e07a;
}
.capture-list {
  display: flex;
  flex-direction: column;
  max-height: 62vh;
  overflow-y: auto;
}
.capture-empty {
  padding: 18px 6px;
  font-size: 12px;
  color: #9aa;
  text-align: center;
}
.capture-row {
  padding: 4px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 12px;
}
.capture-row:last-child {
  border-bottom: 0;
}
.capture-name-cell {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.capture-name-cell img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  image-rendering: pixelated;
  flex: 0 0 auto;
}
.capture-name-cell .nw {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.capture-name-cell .nm {
  font-weight: 700;
  font-size: 12px;
  color: #e8e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.capture-name-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.capture-balls-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.capture-ball {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  color: #9fb3c8;
}
.capture-ball img {
  width: 14px;
  height: 14px;
  image-rendering: pixelated;
}
.capture-ball.last {
  color: #f7e07a;
  font-weight: 700;
}
.capture-ball.last img {
  filter: drop-shadow(0 0 3px rgba(247, 224, 122, 0.9));
}
.capture-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #9fb3c8;
}
.capture-num.max {
  color: #8fb89a;
}
.capture-num.cap {
  color: #f7e07a;
  font-weight: 700;
}

/* A landing pública e o modal de login/cadastro vivem em css/landing.css
   (carregado depois deste arquivo). */

/* Boot: sem sessao decidida o HUD fica OCULTO (o login e montado por JS
   depois) -- sem flash do jogo antes da tela de login. O hub marca
   `authed` no body quando entra pelo caminho do jogo. */
body:not(.authed) #app {
  /* visibility (nao display): o layout continua medivel e o canvas do jogo
     nasce no tamanho certo -- display:none zerava o resize (canvas 1x1). */
  visibility: hidden;
}
/* Fora do #app: o dock (Hunts), a party, a barra de skills e os paineis
   tambem ficam ocultos durante o boot (nao podem aparecer no loading). */
body:not(.authed) .dock,
body:not(.authed) #floating-skill-bar,
body:not(.authed) #party-squares-root,
body:not(.authed) .dex {
  visibility: hidden;
}

/* O inventario (ITENS) rola dentro da sidebar quando passa da altura: sem
   flex:1/min-height:0 a sidebar (overflow:hidden) cortava os itens. */
#inventory {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* A aba POKÉMON da sidebar: as balls com o ícone da espécie. */
#inv-grid .inv-poke {
  display: flex;
  align-items: center;
  justify-content: center;
}
#inv-grid .inv-poke-art {
  width: 84%;
  height: 84%;
  object-fit: contain;
  image-rendering: pixelated;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.28);
}
/* Os slots vazios (itens/pokémons) continuam desenhados como caixinhas. */
#inv-grid .inv-cell-empty {
  background: rgba(255, 255, 255, 0.03);
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.07);
}
#inv-grid .inv-poke.fainted {
  filter: grayscale(1);
  opacity: 0.5;
}
#inv-grid .inv-empty {
  grid-column: 1 / -1;
  padding: 12px;
  color: #889;
  font-size: 12px;
  text-align: center;
}

/* O corpo do chat: uma area por aba (SISTEMA + os canais). */
.chat-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.chat-body .chat-lines {
  position: absolute;
  inset: 0;
  overflow-y: auto;
}

/* A Automação no estilo dos prints: cabeçalho, abas com underline e footer. */
.idle-modal.idle-automation {
  width: min(720px, 92vw);
  display: flex;
  flex-direction: column;
  /* Cabeçalho/abas/footer fixos; só o corpo rola (uma barra só). */
  overflow: hidden;
}
.idle-modal.idle-automation .idle-config-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.idle-modal-head {
  display: flex; align-items: center; gap: 8px;
  padding: 0 0 10px; margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.idle-modal-gear { color: #4fc3f7; font-size: 18px; }
.idle-modal-title { flex: 1; font-weight: 700; letter-spacing: 1px; color: #eaf6ff; }
.idle-modal-x {
  border: 0; background: transparent; color: #9fb3c8;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.idle-modal-x:hover { color: #fff; }
.idle-config-tab {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: #9fb3c8;
  padding: 6px 10px; cursor: pointer; font-size: 13px;
}
.idle-config-tab.active { color: #4fc3f7; border-bottom-color: #4fc3f7; }
.idle-config-tab-icon { font-size: 12px; }
.idle-config-tab-img { width: 16px; height: 16px; image-rendering: pixelated; }
/* ── A aba CAPTURAR da automação ───────────────────────────────────────── */
.auto-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
  border-radius: 8px;
  border: 1px solid rgba(160, 110, 240, 0.5);
  background: linear-gradient(90deg, rgba(70, 40, 120, 0.55), rgba(40, 30, 80, 0.4));
  font-size: 12px;
  color: #e9ddff;
}
.auto-banner-text { flex: 1; }
.auto-banner-tag {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #1a0e2e;
  background: #c9a6ff;
  border-radius: 999px;
  padding: 3px 10px;
}
.auto-card {
  border: 1px solid rgba(120, 170, 255, 0.22);
  border-radius: 10px;
  background: rgba(18, 24, 36, 0.6);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.auto-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.auto-row-title { flex: 1; font-weight: 700; color: #eaf6ff; font-size: 13px; }
.auto-sub {
  font-size: 11px;
  font-style: italic;
  color: #8fa8bd;
  margin: 2px 0 12px;
  line-height: 1.35;
}
.auto-hl { font-style: normal; font-weight: 700; color: #4fd6e6; }
.auto-badge {
  font-size: 11px;
  font-weight: 800;
  color: #cfe8ff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  padding: 2px 8px;
}
/* O switch (liga/desliga). */
.auto-switch {
  appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
  flex: 0 0 auto;
}
.auto-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #cdd8e4;
  transition: transform 0.15s ease;
}
.auto-switch:checked {
  background: #2aa9e0;
  border-color: #4fc3f7;
}
.auto-switch:checked::after {
  transform: translateX(18px);
  background: #fff;
}
/* Bloco por espécie. */
.auto-mon {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
  margin-top: 10px;
}
.auto-mon-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.auto-mon-name { flex: 1; font-weight: 700; color: #eaf6ff; font-size: 13px; }
.auto-mon-stop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #b9cad9;
}
.auto-num {
  width: 54px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 14, 20, 0.8);
  color: #eaf6ff;
  text-align: center;
}
.auto-balls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.auto-ball {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 96px;
  padding: 8px 12px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(16, 22, 32, 0.9);
  color: #cfe0ee;
  cursor: pointer;
}
.auto-ball:disabled { opacity: 0.4; cursor: default; }
.auto-ball.empty .auto-ball-label { color: #7f93a6; }
.auto-ball.active { border-color: #2aa9e0; background: rgba(30, 80, 120, 0.5); }
.auto-ball.auto-ignore.active { border-color: #e05555; background: rgba(90, 24, 24, 0.5); }
.auto-ball-ign { font-size: 20px; line-height: 1.2; }
.auto-ball-icon { width: 22px; height: 22px; image-rendering: pixelated; }
.auto-ball-label { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.auto-ball-count { font-size: 10px; color: #9fb3c8; }
.auto-ball-prio {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #cfe8ff;
  color: #0a1520;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #2aa9e0;
}
/* ── A aba CURAR da automação ──────────────────────────────────────────── */
.cure-sub {
  font-size: 11px;
  font-style: italic;
  color: #8fa8bd;
  margin: 0 0 12px;
  line-height: 1.35;
}
.cure-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.cure-card {
  border: 1px solid rgba(120, 170, 255, 0.3);
  border-radius: 8px;
  background: rgba(18, 26, 40, 0.7);
  padding: 10px 12px;
}
.cure-card-title { font-weight: 700; color: #eaf6ff; font-size: 13px; }
.cure-card-title.cyan { color: #4fd6e6; }
.cure-card-sub {
  margin-top: 6px;
  font-size: 12px;
  color: #cfe0ee;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cure-card-sub.muted { color: #7f93a6; font-style: italic; }
.cure-drop { font-size: 14px; }
.cure-toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.cure-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(16, 22, 32, 0.7);
  padding: 10px 12px;
}
.cure-toggle-label { font-size: 13px; color: #eaf6ff; }
.cure-slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.cure-slider-label { font-weight: 700; color: #eaf6ff; font-size: 13px; flex: 0 0 auto; }
.cure-range {
  flex: 1 1 auto;
  appearance: none;
  -webkit-appearance: none;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  outline: none;
  cursor: pointer;
}
.cure-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2aa9e0;
  border: 2px solid #cfe8ff;
}
.cure-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2aa9e0;
  border: 2px solid #cfe8ff;
}
.cure-pct { flex: 0 0 auto; font-weight: 800; color: #4fd6e6; font-size: 13px; }
.cure-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.cure-potion-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(16, 22, 32, 0.85);
  padding: 10px 12px;
  cursor: pointer;
  text-align: center;
}
.cure-potion-card.active { border-color: #2aa9e0; background: rgba(30, 70, 105, 0.5); }
.cure-potion-card.empty { opacity: 0.5; }
.cure-potion-top {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-bottom: 4px;
}
.cure-potion-icon { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; }
.cure-potion-count { font-size: 12px; color: #cfe0ee; font-weight: 700; }
.cure-potion-prio {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #cfe8ff;
  color: #0a1520;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #2aa9e0;
}
.cure-potion-name { font-size: 12.5px; font-weight: 700; color: #eaf6ff; }
.cure-potion-note {
  margin-top: 2px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #ffd166;
}
/* ── A aba REVIVE da automação ─────────────────────────────────────────── */
.cure-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffb14d;
  font-weight: 700;
  font-size: 12px;
  margin: 2px 0 12px;
}
.revive-trigger-card {
  flex: 0 0 auto;
  border: 1px solid rgba(120, 170, 255, 0.25);
  border-radius: 10px;
  background: rgba(18, 24, 36, 0.6);
  margin-bottom: 14px;
  overflow: hidden;
}
.revive-trigger-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-weight: 700;
  color: #eaf6ff;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.revive-trigger-arrow { color: #7fa6c9; font-size: 11px; transition: transform 0.15s ease; }
.revive-trigger-card.collapsed .revive-trigger-arrow { transform: rotate(-90deg); }
.revive-trigger-card.collapsed .revive-trigger-body { display: none; }
.revive-trigger-body { padding: 0 12px 12px; }
.revive-trigger-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(14, 20, 30, 0.8);
  cursor: pointer;
}
.revive-trigger-opt.active { border-color: #2aa9e0; background: rgba(30, 70, 105, 0.4); }
.revive-trigger-opt input { width: 16px; height: 16px; accent-color: #2aa9e0; }
.revive-trigger-label { font-size: 12.5px; color: #dbe8f2; }
.revive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.revive-type-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(16, 22, 32, 0.85);
  padding: 10px 12px;
  text-align: center;
  cursor: pointer;
}
.revive-type-card.active { border-color: #2aa9e0; background: rgba(30, 70, 105, 0.5); }
.revive-type-card.empty { opacity: 0.55; }
.revive-type-top { display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 4px; }
.revive-icon { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; }
.revive-count { font-size: 12px; font-weight: 700; color: #cfe0ee; }
.revive-name { font-size: 12.5px; font-weight: 700; color: #eaf6ff; }
.revive-note { margin-top: 2px; font-size: 9px; color: #9fb3c8; }
.revive-pref-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.revive-pref-card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(16, 22, 32, 0.85);
  padding: 10px;
  text-align: center;
  cursor: pointer;
}
.revive-pref-card.active { border-color: #2aa9e0; background: rgba(30, 70, 105, 0.5); }
.revive-pref-art { width: 40px; height: 40px; image-rendering: pixelated; }
.revive-pref-name { font-size: 12.5px; font-weight: 700; color: #eaf6ff; margin-top: 2px; }
.revive-pref-hp { font-size: 10.5px; color: #9fb3c8; }
.revive-skill-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.revive-skill-card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(16, 22, 32, 0.85);
  padding: 10px;
  text-align: center;
  cursor: pointer;
}
.revive-skill-card.active { border-color: #2aa9e0; background: rgba(30, 70, 105, 0.5); }
.revive-skill-icon { width: 30px; height: 30px; image-rendering: pixelated; }
.revive-skill-name { font-size: 12px; font-weight: 700; color: #eaf6ff; margin-top: 2px; }
.revive-skill-type { font-size: 9.5px; color: #7f93a6; letter-spacing: 0.04em; }
.revive-skill-cd { font-size: 9.5px; font-weight: 800; color: #ffb14d; margin-top: 1px; }
/* ── A aba HUNT da automação ───────────────────────────────────────────── */
.hunt-wave-info {
  border: 1px solid rgba(120, 170, 255, 0.3);
  border-radius: 8px;
  background: rgba(18, 26, 40, 0.7);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.hunt-wave-limit { color: #eaf6ff; font-weight: 700; font-size: 13px; }
.hunt-wave-next { color: #9fb3c8; font-size: 11px; margin-top: 4px; }
.hunt-wave-max { color: #ffe066; font-weight: 700; font-size: 12px; margin-top: 4px; }
.hunt-wave-buttons { display: flex; gap: 6px; margin-bottom: 8px; }
.hunt-wave-btn {
  flex: 1 1 0;
  height: 40px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(16, 22, 32, 0.85);
  color: #cfe0ee;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}
.hunt-wave-btn.active { background: #2aa9e0; color: #06222f; border-color: #4fd6e6; }
.hunt-wave-btn:disabled { opacity: 0.35; cursor: default; }
.hunt-note { color: #ffd166; font-size: 11px; font-style: italic; margin: 0 0 12px; }
.hunt-lure-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(14, 20, 30, 0.8);
  cursor: pointer;
  margin-bottom: 6px;
}
.hunt-lure-card.active { border-color: #2aa9e0; background: rgba(30, 70, 105, 0.4); }
.hunt-lure-card input { width: 16px; height: 16px; accent-color: #2aa9e0; }
.hunt-lure-label { font-size: 13px; color: #eaf6ff; }
.hunt-done-row2 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hunt-done-name2 { flex: 1; font-weight: 700; color: #eaf6ff; font-size: 12.5px; }
.hunt-done-toggle { display: inline-flex; align-items: center; gap: 8px; }
.hunt-done-label { font-size: 11px; color: #b9cad9; }
.hunt-done-num {
  width: 64px;
  text-align: center;
  padding: 5px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 14, 20, 0.85);
  color: #eaf6ff;
}
.hunt-done-step {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(16, 22, 32, 0.85);
  color: #cfe0ee;
  border-radius: 6px;
  padding: 5px 8px;
  cursor: pointer;
  font-weight: 700;
}
.hunt-done-step:hover { border-color: #8fe; }
.idle-modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding-top: 12px; margin-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.idle-config-primary { background: #4fc3f7; color: #06283a; border-color: #4fc3f7; font-weight: 700; }

/* O Depot como modal central: grade de slots quadrados com os sprites. */
.idle-modal.idle-depot {
  width: min(430px, 92vw);
  display: flex;
  flex-direction: column;
  /* Sem scroll na modal: quem rola é a grade (evita 2 barras). */
  overflow: hidden;
}
/* As grades do time e do depot rolam por conta própria. */
.idle-modal.idle-depot .inv-grid {
  max-height: 30vh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  align-content: start;
  /* Folga pra o ícone da ball transbordar sem cortar na borda. */
  padding: 8px 2px 2px 8px;
}
.depot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 62vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px;
  align-content: start;
}
/* O ícone da pokébola no canto do slot (marca que é Pokémon). */
.depot-slot-ball {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 1px #000);
}
.depot-slot {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}
.depot-slot-art { width: 80%; height: 80%; object-fit: contain; image-rendering: pixelated; }
.depot-slot-lv { position: absolute; bottom: 2px; left: 4px; font-size: 10px; color: #9fb3c8; }
.depot-slot-qty { position: absolute; bottom: 2px; right: 4px; font-size: 10px; color: #eaf6ff; }
.depot-empty { grid-column: 1 / -1; text-align: center; color: #889; padding: 16px; }

/* O alerta do jogo (canto superior direito, ao lado da sidebar). Verde de
   vida/cura como base. */
.game-alert {
  position: fixed;
  top: 60px;
  right: 352px;
  z-index: 1400;
  max-width: 340px;
  padding: 10px 8px 10px 14px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  border-radius: 8px;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
/* O SUCESSO é verde... */
.game-alert.ok {
  background: rgba(18, 40, 26, 0.96);
  border: 1px solid #5fdc72;
  border-left: 4px solid #5fdc72;
  color: #d8ffe0;
}
.game-alert.ok .game-alert-x {
  color: #9fe8ad;
}
/* ...o ERRO é vermelho... */
.game-alert.error {
  background: rgba(44, 16, 18, 0.96);
  border: 1px solid #f87171;
  border-left: 4px solid #f87171;
  color: #ffdada;
}
.game-alert.error .game-alert-x {
  color: #f8a5a5;
}
/* ...e o resto é o neutro azulado. */
.game-alert.info {
  background: rgba(14, 30, 44, 0.96);
  border: 1px solid var(--phw-accent);
  border-left: 4px solid var(--phw-accent);
  color: #d7f2ff;
}
.game-alert.info .game-alert-x {
  color: #9fd8ee;
}
.game-alert-text {
  flex: 1 1 auto;
  min-width: 0;
}
.game-alert-x {
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: #9fe8ad;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.game-alert-x:hover {
  color: #fff;
}
/* O `display:flex` acima anula o [hidden] do browser: sem esta regra o toast
   nunca fechava (nem no ×, nem no tempo). */
.game-alert[hidden] {
  display: none;
}

/* O chat: as abas rolam na horizontal com uma barra fina visível. */
.phw-chat-tabs {
  scrollbar-width: thin;
  scrollbar-color: rgba(6, 182, 212, 0.5) transparent;
}
.phw-chat-tabs::-webkit-scrollbar { display: block; height: 6px; }
.phw-chat-tabs::-webkit-scrollbar-thumb { background: rgba(6, 182, 212, 0.45); border-radius: 3px; }
.phw-chat-tabs::-webkit-scrollbar-track { background: transparent; }
/* Indicador de "tem chat com mensagem nova fora da rolagem". */
.phw-chat-unread-hint {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(6, 182, 212, 0.2);
  color: #4fd6e6;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  animation: phw-chat-tab-blink 1s infinite;
}
.phw-chat-unread-hint:hover { background: rgba(6, 182, 212, 0.4); }
.phw-chat-unread-hint[hidden] { display: none; }

/* Toast de MENSAGEM PRIVADA: card translúcido no meio da tela. */
.private-toast-root {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.private-toast {
  pointer-events: auto;
  min-width: 200px;
  max-width: min(360px, 82vw);
  padding: 10px 14px;
  background: rgba(12, 16, 22, 0.55);
  border: 1px solid rgba(6, 182, 212, 0.5);
  border-left: 3px solid #06b6d4;
  border-radius: 10px;
  color: #e8ecf5;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  animation: private-toast-in 0.18s ease;
}
.private-toast:hover { background: rgba(12, 16, 22, 0.78); }
.private-toast-head { font-weight: 800; color: #4fd6e6; margin-bottom: 2px; }
.private-toast-text { font-size: 13px; line-height: 1.35; word-break: break-word; }
@keyframes private-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.phw-chat-body { scrollbar-width: thin; scrollbar-color: rgba(6,182,212,.4) transparent; }
.phw-chat-body::-webkit-scrollbar { width: 6px; }
.phw-chat-body::-webkit-scrollbar-thumb { background: rgba(6,182,212,.35); border-radius: 3px; }
.phw-chat-body::-webkit-scrollbar-track { background: transparent; }

/* As abas do chat mais juntas pra caberem sem corte no painel. */
.phw-chat-tab { padding: 4px 7px; font-size: 9.5px; letter-spacing: 0.04em; }

/* Botoes da topbar escondidos (roadmap): o display do .top-icon-btn vencia
   o [hidden] do navegador. */
.top-icon-btn[hidden] { display: none !important; }

/* ── A modal de EVOLUÇÃO ─────────────────────────────────────────────────── */
.evo-box { width: min(760px, 96vw); }
.evo-node-next { min-width: 210px; }
.evo-node-next .evo-info { width: 100%; }
.evo-body { display: flex; flex-direction: column; gap: 12px; }
.evo-chain {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
}
.evo-node {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 84px;
}
.evo-node-next .evo-name { color: #7ef0a0; }
.evo-gif-wrap {
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(79,195,247,.14), rgba(0,0,0,0));
  border: 1px solid rgba(255,255,255,.1); border-radius: 10px;
}
.evo-gif { max-width: 64px; max-height: 64px; image-rendering: pixelated; }
.evo-gif-fallback {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 20px; color: #9fb3c8;
}
.evo-name { font-weight: 700; font-size: 12.5px; text-align: center; }
.evo-sub { font-size: 10px; color: #9aa; }
.evo-arrow { font-size: 22px; color: #4fc3f7; }
.evo-or {
  color: #9fb3c8;
  font-size: 11px;
  text-transform: uppercase;
  align-self: center;
}
.evo-note { color: #9aa; font-size: 11.5px; text-align: center; }
.evo-info {
  border: 1px solid rgba(255,255,255,.1); border-radius: 8px;
  padding: 8px 10px; display: flex; flex-direction: column; gap: 6px;
  background: rgba(255,255,255,.03);
}
.evo-row { display: flex; align-items: center; gap: 10px; }
.evo-row-k { color: #9fb3c8; font-size: 11px; letter-spacing: .06em; min-width: 52px; }
.evo-row-v { font-weight: 700; font-size: 12.5px; }
.evo-stones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.evo-stone {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.06); border-radius: 6px; padding: 3px 7px;
}
.evo-stone-icon { width: 20px; height: 20px; image-rendering: pixelated; }
.evo-stone-name { font-weight: 700; }
.evo-stone-or { color: #9fb3c8; font-size: 11px; text-transform: uppercase; }
.evo-stone-none { color: #9aa; font-weight: 400; }
.evo-section {
  font-size: 10.5px; letter-spacing: .08em; color: #9aa;
  border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 3px;
}
.evo-moves { display: flex; flex-direction: column; gap: 3px; }
.evo-move {
  display: grid;
  grid-template-columns: 26px 1fr 20px 40px 54px;
  align-items: center; gap: 6px; font-size: 11.5px;
}
.evo-move-slot { color: #6fa8c8; font-weight: 700; }
.evo-move-elem { width: 16px; height: 16px; image-rendering: pixelated; }
.evo-move-cd { color: #9fb3c8; text-align: right; }
.evo-move-target { color: #9aa; text-align: right; }
.evo-confirm {
  margin-right: auto;
  background: #3fae5a;
  border-color: #3fae5a;
  color: #062a12;
  font-weight: 700;
}
.evo-confirm:hover { background: #4cc46a; }

/* ── Barra de skills: CD, tipo e área sobre o slot ───────────────────────── */
.skill-draggable {
  position: relative;
  cursor: grab;
  touch-action: none;
  /* O card + o chip da hotkey: na barra VERTICAL é [hotkey][card]; na
     HORIZONTAL o .horizontal vira coluna ([card] em cima, [hotkey] embaixo). */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
#floating-skill-bar.horizontal .skill-draggable {
  flex-direction: column;
}
.skill-draggable:active {
  cursor: grabbing;
}
.skill-draggable.drag-source {
  opacity: 0.35;
}
/* As PASSIVAS ficam no FIM da barra: display-only (sem clique/hotkey/drag). */
.skill-draggable.skill-passive,
.skill-draggable.skill-passive:active {
  cursor: default;
}
.skill-draggable.skill-passive .skill-slot {
  opacity: 0.82;
  border-style: dashed;
}
.skill-draggable.skill-passive .skill-slot-hotkey,
.skill-draggable.skill-passive .skill-slot-overlay,
.skill-draggable.skill-passive .skill-slot-timer {
  display: none;
}
.skill-slot-passive-tag {
  position: absolute;
  top: 1px;
  right: 3px;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffd36b;
  text-shadow: 0 1px 1px #000;
  pointer-events: none;
}
.skill-slot-cd {
  position: absolute;
  top: 1px;
  right: 3px;
  font-size: 7px;
  font-weight: 700;
  color: #bcd4e6;
  text-shadow: 0 1px 1px #000;
  pointer-events: none;
}
.skill-slot-meta {
  display: flex;
  align-items: center;
  gap: 3px;
  max-width: 66px;
  pointer-events: none;
}
.skill-slot-type {
  font-size: 7px;
  font-weight: 700;
  color: #cfe8ff;
  text-transform: capitalize;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skill-slot-area {
  position: absolute;
  top: 1px;
  left: 3px;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #ffe9a8;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 3px;
  padding: 0 2px;
  pointer-events: none;
}
/* A hotkey da skill (padrão F1..F12 pela posição; botão direito customiza):
   um chip GRANDE numa linha/coluna própria, FORA do card — na barra
   VERTICAL fica à ESQUERDA do card; na HORIZONTAL, ABAIXO dele. */
.skill-slot-hotkey {
  flex: 0 0 auto;
  order: -1;
  align-self: center;
  padding: 0 6px;
  border-radius: 4px;
  background: rgba(2, 12, 20, 0.92);
  border: 1px solid rgba(6, 182, 212, 0.6);
  color: #9adcf0;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
}
#floating-skill-bar.horizontal .skill-slot-hotkey {
  order: 0; /* horizontal: DEPOIS do card = embaixo */
}
/* Chips da hotkey + engrenagem: só aparecem no modo MANUAL (no AUTO o tick
   solta sozinho e as teclas ficam bloqueadas). */
#floating-skill-bar:not(.skills-manual) .skill-slot-hotkey,
#floating-skill-bar:not(.skills-manual) .skill-edit-btn {
  display: none;
}
/* O slot em modo "aperte a tecla" (o botão direito na skill). */
.skill-slot.binding {
  outline: 2px dashed #f0c040;
  outline-offset: -2px;
}
/* A ENGRENAGEM de editar hotkeys: fica no lado ESQUERDO da barra. */
.skill-edit-btn {
  order: -1;
  flex: 0 0 auto;
  align-self: center;
  margin: 0 6px;
  padding: 4px 8px;
  min-height: 26px;
  background: rgba(18, 24, 36, 0.85);
  border: 1px solid rgba(120, 170, 255, 0.35);
  border-radius: 6px;
  color: #cfe0ee;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.skill-edit-btn:hover { border-color: #06b6d4; color: #d7ecf5; }
.skill-edit-btn.on { border-color: #f0c040; color: #ffe9a8; }
/* No modo de edição, os slots ficam com contorno e o clique captura a tecla. */
#floating-skill-bar.skills-edit .skill-slot {
  outline: 2px dashed rgba(240, 192, 64, 0.55);
  outline-offset: -2px;
  cursor: crosshair;
}
/* As VERSÕES (shiny/baby) da ficha do dex: botões navegáveis, logo abaixo
   dos tipos. */
.dex2-versions-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.dex2-versions-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #7d93a8;
}
.dex2-versions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dex2-version {
  background: rgba(18, 24, 36, 0.85);
  border: 1px solid rgba(120, 170, 255, 0.35);
  border-radius: 6px;
  color: #cfe0ee;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
}
.dex2-version:hover {
  border-color: #06b6d4;
  color: #d7ecf5;
}
/* O TIER na lista do dex (chip ao lado do nome). */
.dex2-tier {
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(6, 182, 212, 0.45);
  background: rgba(6, 182, 212, 0.12);
  color: #9adcf0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* ── Automação: linhas de Pokémon (capturar/revive/hunt) ─────────────────── */
.idle-poke-icon {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
  flex: 0 0 auto;
}
.idle-poke-row,
.idle-done-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
.idle-poke-name {
  min-width: 92px;
  font-weight: 600;
}
.idle-catch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  flex-wrap: wrap;
}
.idle-catch-balls {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-left: auto;
}
.idle-ball-chip {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  color: #9fb3c8;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 10.5px;
  cursor: pointer;
}
.idle-ball-chip.active {
  background: rgba(58, 160, 255, 0.3);
  border-color: #3aa0ff;
  color: #eaf6ff;
}

/* ── Barra de skills: orientação + redimensionar ─────────────────────────── */
.skillbar-toolbar {
  position: absolute;
  top: 2px;
  right: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 6;
}
.skillbar-btn {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(10, 10, 16, 0.85);
  color: #cfe;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.skillbar-btn:hover {
  background: rgba(40, 60, 90, 0.95);
}
.skillbar-grip {
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  background: linear-gradient(
    135deg,
    transparent 45%,
    rgba(143, 238, 255, 0.75) 45%,
    rgba(143, 238, 255, 0.75) 55%,
    transparent 55%
  );
  border-radius: 3px;
}

/* Os painéis-modais (dex/mochila/hunts/capturas) seguem o padrão do DEPOT:
   a própria seção vira o overlay (fundo escuro + modal central). */
section.dex.dex-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  padding: 0;
  border: none;
}
section.dex.dex-modal[hidden] {
  display: none !important;
}
.dex-modal .idle-modal {
  width: min(680px, 94vw);
  /* Altura mínima: os painéis com conteúdo curto (ex.: Capturas) ficavam
     colapsados e não dava pra ver nada. */
  min-height: min(72vh, 560px);
  display: flex;
  flex-direction: column;
  /* Sem scroll na modal: quem rola é o conteúdo (evita 2 barras). */
  overflow: hidden;
}
.dex-modal .idle-modal > .dex-drops-list,
.dex-modal .idle-modal > .hunts-list,
.dex-modal .idle-modal > .capture-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* ── O menu de ADMINISTRAÇÃO (GOD) ───────────────────────────────────────── */
/* O botão do topbar bem destacado (vermelho) pra não se perder na fileira. */
#admin-btn {
  display: flex !important;
  visibility: visible !important;
  background: #7a1f1f;
  border: 1px solid #e05555;
  color: #ffdede;
  font-weight: 800;
}
#admin-btn:hover { background: #932626; }
#admin-btn[hidden] { display: none !important; }
/* Durante o carregando (a tela de loading cobre o HUD), o admin some junto. */
body.loading #admin-btn { display: none !important; }
.admin-box { width: min(620px, 94vw); }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.admin-tab {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #9fb3c8;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
}
.admin-tab.on { color: #4fc3f7; border-bottom-color: #4fc3f7; }
.admin-player { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.admin-player-name { flex: 1; font-weight: 600; }
.admin-player-lv { color: #9fb3c8; font-size: 11px; }
.admin-player-god { color: #ffd166; font-size: 10px; font-weight: 800; }
.admin-search { width: 100%; margin-bottom: 8px; }
.admin-cmd-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 50vh;
  overflow-y: auto;
}
.admin-cmd { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.admin-cmd-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-cmd-label { font-weight: 600; }
.admin-cmd-desc { font-size: 11px; color: #9aa; }
.admin-cmd-param { width: 150px; }
.admin-cmd-run { flex: 0 0 auto; }
.admin-result {
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.06);
}
.admin-result.ok { background: rgba(63, 174, 90, 0.18); color: #b7f0c4; }
.admin-result.err { background: rgba(239, 68, 68, 0.18); color: #ffb4b4; }

/* As ações embutidas nas linhas/células da aba info do admin. */
.admin-line-actions {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}
.admin-inline {
  padding: 1px 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  color: #cfe8ff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
  cursor: pointer;
}
.admin-inline:hover {
  background: rgba(143, 238, 255, 0.18);
  border-color: #8fe;
}
.admin-inline.del {
  color: #ffb4b4;
  border-color: rgba(239, 68, 68, 0.4);
}
.admin-inline.del:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
}
/* As células do admin (inventário E pokémons) viram COLUNA: ícone em cima,
   botões numa linha EMBAIXO do slot — inventário igual ao depot. */
.admin-box .inv-cell {
  aspect-ratio: auto;
  flex-direction: column;
  justify-content: flex-start;
  gap: 3px;
  padding: 6px 4px 4px;
  overflow: visible;
}
.admin-box .inv-cell > img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
  margin: 0 auto;
}
.admin-box .inv-cell.inv-poke .inv-poke-art {
  width: 40px;
  height: 40px;
  margin: 0 auto;
}
.admin-box .inv-cell .cnt {
  position: static;
  color: #eaf6ff;
  font-size: 10px;
  line-height: 1;
}
.admin-cell-actions {
  position: static;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 8px; /* era 3px: os botões ficavam encostados */
  padding: 6px 0 4px;
  background: transparent;
  z-index: 2;
}
.admin-cell-actions .admin-inline {
  min-width: 28px;
  min-height: 26px;
  padding: 0 8px;
  font-size: 13px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Cabeçalho de seção da aba info com botão de adicionar à direita. */
.admin-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.admin-section-title {
  min-width: 0;
}
.admin-section-add {
  flex: 0 0 auto;
  padding: 2px 9px;
  font-size: 10px;
  color: #b7f0c4;
  border-color: rgba(63, 174, 90, 0.5);
  background: rgba(63, 174, 90, 0.16);
}
.admin-section-add:hover {
  background: rgba(63, 174, 90, 0.3);
  border-color: #3fae5a;
}
/* As células do admin: botões maiores e mais legíveis. */
.admin-cell-actions {
  gap: 3px;
}
.admin-cell-actions .admin-inline {
  min-width: 16px;
  height: 15px;
  line-height: 13px;
  font-size: 11px;
  background: rgba(10, 10, 16, 0.72);
}
/* Grades do detalhe (inventário e depot) com rolagem vertical própria. */
.admin-box .admin-scroll {
  max-height: 32vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 4px 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}
.admin-player-list { max-height: 42vh; overflow-y: auto; }
.admin-player { cursor: pointer; }
.admin-player:hover { background: rgba(255, 255, 255, 0.06); }
.admin-player-on { font-size: 10px; color: #9aa; }
.admin-player-on.on { color: #5fdc72; }
.admin-picker { width: min(420px, 92vw); }
.admin-pick-list { max-height: 50vh; overflow-y: auto; }
.admin-pick-row {
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
}
.admin-pick-row:hover { background: rgba(58, 160, 255, 0.2); }
.admin-item { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.admin-item-icon { width: 22px; height: 22px; image-rendering: pixelated; flex: 0 0 auto; }
.admin-item-name { flex: 1; }
.admin-item-id { color: #7c8ba0; font-size: 11px; }
.admin-poke { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.admin-poke-art { width: 40px; height: 40px; image-rendering: pixelated; flex: 0 0 auto; }
.admin-poke-info { display: flex; flex-direction: column; }
.admin-poke-name { font-weight: 600; }
.admin-poke-sub { color: #9fb3c8; font-size: 11px; }
/* ── O inventário da sidebar (igual à referência) ───────────────────────── */
#inventory {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  min-height: 0;
}
.inv-head { display: flex; align-items: center; justify-content: space-between; }
.inv-title {
  color: #4fd6e6;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 15px;
  text-transform: uppercase;
}
.inv-min {
  border: 0;
  background: transparent;
  color: #4fd6e6;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.inv-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(79, 214, 230, 0.3);
  border-radius: 6px;
  overflow: hidden;
}
.inv-tab {
  text-align: center;
  padding: 7px 0;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #6b7c8f;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
}
.inv-tab.active {
  color: #4fd6e6;
  background: rgba(79, 214, 230, 0.12);
  box-shadow: inset 0 0 0 1px #4fd6e6;
}
#inv-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  align-content: start;
  max-height: 48vh;
  overflow-y: auto;
  /* Folga em cima/esquerda pro ícone da ball transbordar sem cortar. */
  padding: 8px 2px 2px 8px;
}
#inv-grid.poke-grid { grid-template-columns: repeat(3, 1fr); }
.inv-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  background: rgba(20, 24, 32, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.inv-cell img { width: 70%; height: 70%; object-fit: contain; image-rendering: pixelated; }
.inv-cell .cnt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}
.inv-cell.inv-cell-empty { background: rgba(255, 255, 255, 0.03); border-style: dashed; }
/* Os slots de Pokémon: disco vermelho/branco + sprite + nome + boost + cadeado. */
.inv-cell.inv-poke { overflow: visible; }
.inv-cell.inv-poke::before {
  content: '';
  position: absolute;
  inset: 10%;
  background-image: var(--ball);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.inv-cell.inv-poke .inv-poke-art {
  position: relative;
  z-index: 1;
  width: 74%;
  height: 74%;
  object-fit: contain;
}
.inv-cell.inv-poke .inv-name {
  position: absolute;
  left: 3px;
  bottom: 2px;
  z-index: 2;
  font-size: 9px;
  font-weight: 800;
  color: #4fd6e6;
  text-shadow: 0 1px 2px #000;
}
.inv-cell.inv-poke .inv-boost {
  top: auto;
  right: 3px;
  bottom: 2px;
  background: transparent;
  box-shadow: none;
  color: #ffd166;
  font-size: 10px;
  padding: 0;
}
.inv-cell.inv-poke .inv-lock {
  position: absolute;
  top: 1px;
  right: 2px;
  z-index: 3;
  font-size: 11px;
}

/* ── Card do time: 2 cards (externo escuro + interno colorido pelo tipo) ── */
.party-square {
  position: relative;
  width: 90px;
  height: auto;
  border-radius: 12px;
  background: rgba(10, 10, 16, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.14);
  /* Mais espaco entre o card externo e o interno. */
  padding: 15px 15px 24px;
  overflow: visible;
}
/* O Pokemon EM CAMPO (summon) fica com o card um pouco maior. */
.party-square.active {
  border-color: #3aa0ff;
  box-shadow: 0 0 10px rgba(58, 160, 255, 0.5);
  transform: scale(1.08);
  transform-origin: center;
  z-index: 2;
}
.party-square .ps-inner {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.party-square .ps-sprite {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.party-square .ps-boost {
  position: absolute;
  top: -5px;
  right: -5px;
  z-index: 4;
}
/* Os tipos ficam no CANTO INFERIOR ESQUERDO do card interno, na borda. */
.party-square .ps-types {
  position: absolute;
  left: -11px;
  bottom: -6px;
  top: auto;
  transform: none;
  flex-direction: column;
  gap: 0;
  z-index: 4;
}
/* A barra de vida fica ABAIXO do card interno (dentro do externo). */
.party-square .ps-bar {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 12px;
  height: 5px;
}
.party-square .ps-bar > i {
  display: block;
  height: 100%;
}
.party-square .ps-hp {
  bottom: 2px;
}
/* Abaixo de Full HD os cartões do time encolhem junto com o HUD (o card da
   direita e o resto da UI também são menores nessas telas). O padding cai na
   mesma proporção pra o card INTERNO (aspect-ratio 1) seguir quadrado. */
@media (max-width: 1919px) {
  .party-square {
    width: 74px;
    padding: 12px 12px 20px;
    border-radius: 10px;
  }
  .party-square .ps-bar {
    left: 7px;
    right: 7px;
    bottom: 10px;
    height: 4px;
  }
  .party-square .ps-hp {
    font-size: 9px;
  }
  .party-square .ps-types {
    left: -9px;
  }
  .party-square .ps-types img {
    width: 15px;
    height: 15px;
  }
}
@media (max-width: 1365px) {
  .party-square {
    width: 64px;
    padding: 10px 10px 17px;
    border-radius: 9px;
  }
  .party-square .ps-bar {
    left: 6px;
    right: 6px;
    bottom: 8px;
    height: 3px;
  }
  .party-square .ps-hp {
    font-size: 8px;
  }
  .party-square .ps-types {
    left: -8px;
  }
  .party-square .ps-types img {
    width: 13px;
    height: 13px;
  }
  .party-square .ps-boost {
    font-size: 10px;
    padding: 0 4px;
  }
}
/* Telas estreitas: a party vai pro rodapé (horizontal), sem cobrir o card.
   (Vem DEPOIS dos cortes acima: com a mesma especificidade, o último vence.) */
@media (max-width: 900px) {
  #party-squares-root {
    right: 8px;
    left: 8px;
    top: auto;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
  .party-squares {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }
  .party-cards {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .party-square {
    width: 46px;
    padding: 7px 7px 12px;
    border-radius: 7px;
  }
  .party-square .ps-bar {
    left: 5px;
    right: 5px;
    bottom: 6px;
    height: 3px;
  }
  .party-square .ps-hp {
    font-size: 7px;
    bottom: 1px;
  }
  .party-square .ps-types {
    left: -6px;
    bottom: -4px;
  }
  .party-square .ps-types img {
    width: 11px;
    height: 11px;
  }
  .party-square .ps-boost {
    font-size: 9px;
    padding: 0 3px;
  }
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 4px;
  /* Area de drop sempre existente (mesmo vazia): sem isso um grid vazio tem
     altura 0 e nao da pra soltar o Pokemon nele. */
  min-height: 64px;
  padding: 4px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}
.admin-boost { position: absolute; top: 1px; right: 2px; font-size: 9px; font-weight: 700; color: #5fdc72; }
/* O ícone da ball (sempre que for Pokémon): maior e quase FORA do card, no
   canto superior esquerdo, pra não cobrir o avatar. */
.inv-cell .inv-ball {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 26px;
  height: 26px;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 2px #000);
  z-index: 4;
}
.inv-boost {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  background: #3aa0ff;
  border-radius: 9px;
  padding: 0 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  z-index: 3;
}
/* A barra de vida do slot de Pokémon (como no card do time). */
.inv-hp {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  height: 4px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 2px;
  overflow: hidden;
}
.inv-hp > i {
  display: block;
  height: 100%;
  background: #3d9e4a;
  transition: width 0.2s;
}
/* Deixa o ícone da ball transbordar o card (fica "quase fora"). */
.inv-cell.inv-poke { overflow: visible; }
.inv-cell.inv-poke .inv-poke-art { width: 40px; height: 40px; }
.ps-ball {
  position: absolute;
  bottom: 1px;
  left: 2px;
  width: 14px;
  height: 14px;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 1px #000);
}

/* ── Arrastar Pokémon (time <-> depot) ───────────────────────────────────── */
.poke-drag-ghost {
  position: fixed;
  z-index: 5000;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}
.poke-drag-ghost img { width: 44px; height: 44px; image-rendering: pixelated; }
.poke-drag-ghost span { font-size: 20px; margin-top: -8px; }
.poke-drag-src { opacity: 0.4; outline: 2px dashed #4fc3f7; outline-offset: -2px; }
.poke-drop-over { outline: 2px solid #5fdc72; outline-offset: -2px; background: rgba(95, 220, 114, 0.12); }
body.poke-dragging,
body.poke-dragging * { cursor: grabbing !important; }

/* ── A nova Pokédex: lista à esquerda, detalhe à direita ─────────────────── */
.dex2 {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  gap: 12px;
}
.dex2-left {
  flex: 0 0 240px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding-right: 8px;
}
.dex2-search {
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #dde;
}
.dex2-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.dex2-tools .dex2-search {
  flex: 1 1 auto;
  min-width: 0;
}
.dex2-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.dex2-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 6px;
  border-radius: 6px;
  cursor: pointer;
}
.dex2-row:hover { background: rgba(255, 255, 255, 0.07); }
.dex2-row.sel { background: rgba(58, 160, 255, 0.22); }
.dex2-row img { width: 32px; height: 32px; image-rendering: pixelated; flex: 0 0 auto; }
.dex2-id {
  width: 32px;
  flex: 0 0 auto;
  text-align: center;
  color: var(--phw-text-muted, #889);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.dex2-row .nw { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; min-width: 0; }
.dex2-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dex2-caught { width: 15px; height: 15px; image-rendering: pixelated; flex: 0 0 auto; }
.dex2-row .lv { color: #9fb3c8; font-size: 11px; }
.dex2-right {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}
.dex2-detail { display: flex; flex-direction: column; gap: 8px; }
.dex2-head { display: flex; align-items: center; gap: 14px; }
.dex2-big { width: 120px; height: 120px; image-rendering: pixelated; flex: 0 0 auto; }
.dex2-title { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.dex2-sub { color: #9fb3c8; font-size: 12px; margin: 2px 0 6px; }
.dex2-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dex2-chip {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
}
.dex2-line { display: flex; gap: 8px; font-size: 12.5px; }
.dex2-line .k { color: #9fb3c8; min-width: 92px; }
.dex2-line .v { font-weight: 600; }
.dex2-section {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #9aa;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 3px;
  margin-top: 4px;
}
.dex2-evo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dex2-evo-node { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.dex2-evo-node img { width: 48px; height: 48px; image-rendering: pixelated; }
.dex2-evo-name { font-size: 11px; font-weight: 600; }
.dex2-evo-lv { font-size: 10px; color: #9fb3c8; }
.dex2-arrow { font-size: 18px; color: #4fc3f7; }
.dex2-evo-or {
  color: #9fb3c8;
  font-size: 10px;
  text-transform: uppercase;
  align-self: center;
}
.dex2-stones { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.dex2-stone { display: inline-flex; align-items: center; gap: 4px; }
.dex2-stone img { width: 20px; height: 20px; image-rendering: pixelated; }
.dex2-desc { font-style: italic; color: #b8c4d0; font-size: 12.5px; }
.dex2-moves { display: flex; flex-direction: column; gap: 2px; }
.dex2-move {
  display: grid;
  grid-template-columns: 26px 1fr 18px 40px 54px;
  gap: 6px;
  align-items: center;
  font-size: 11.5px;
}
.dex2-move .s { color: #6fa8c8; font-weight: 700; }
.dex2-move img { width: 16px; height: 16px; image-rendering: pixelated; }
.dex2-move .cd { color: #9fb3c8; text-align: right; }
.dex2-move .tg { color: #9aa; text-align: right; }

/* As abas do detalhe (GOLPES | MOVES PXG) + o preview da animação. */
.dex2-fxtabs { display: flex; gap: 4px; margin: 6px 0 4px; }
.dex2-fxtab {
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0a0a0e;
  color: #c8c8d4;
  font-size: 11px;
  cursor: pointer;
}
.dex2-fxtab.on { border-color: rgba(58, 160, 255, 0.6); color: #8fd8ff; }
.dex2-fxnote { font-size: 11px; color: #9aa; padding: 4px 0; }
.dex2-fxmoves { display: flex; flex-direction: column; gap: 2px; max-height: 170px; overflow: auto; }
.dex2-fxmove {
  display: grid;
  grid-template-columns: 1fr 18px 32px;
  gap: 6px;
  align-items: center;
  font-size: 11.5px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
}
.dex2-fxmove:hover { background: rgba(255, 255, 255, 0.05); }
.dex2-fxmove.sel { background: rgba(58, 160, 255, 0.12); border-color: rgba(58, 160, 255, 0.45); }
.dex2-fxmove img { width: 16px; height: 16px; image-rendering: pixelated; }
.dex2-fxmove .pxg { color: #7fd08a; font-size: 9.5px; text-align: right; }
/* O retângulo da cena (abaixo da lista): o pokémon + a magia indo pro leste. */
.dex2-fxstage {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.dex2-fxscene {
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #0b0b12;
  image-rendering: pixelated;
}
.dex2-fxcap { font-size: 10.5px; color: #9aa; text-align: center; min-height: 13px; }

/* Avisos de validação do login/cadastro. */
.login-warn {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: #ff8a8a;
}
.login-input.invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.5);
}

/* ── Barras de rolagem finas e modernas (Firefox + Chrome) ───────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(143, 238, 255, 0.3) transparent;
}
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(143, 238, 255, 0.28);
  border-radius: 3px;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(143, 238, 255, 0.5);
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

/* ── Menu de contexto do JOGO (nomes no chat / treinadores no mapa) ──────── */
.phw-chat-name.is-self {
  color: #7fe08a;
}
.phw-chat-name-click {
  cursor: pointer;
}
.phw-chat-name-click:hover {
  text-decoration: underline;
}
.game-context-menu {
  position: fixed;
  /* ACIMA das modais (1300/1400): o menu do bau/time abre POR CIMA do
     depot; o lock do AFK (4000) continua na frente de tudo. */
  z-index: 2000;
  min-width: 150px;
  background: rgba(10, 10, 16, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.game-context-item {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: 0;
  background: transparent;
  color: #dde;
  font-size: 12px;
  cursor: pointer;
  border-radius: 6px;
}
.game-context-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  color: var(--phw-accent, #06b6d4);
  opacity: 0.9;
}
.game-context-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}
.game-context-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-context-item:hover {
  background: rgba(143, 238, 255, 0.16);
  color: #eaffff;
}
.game-context-item:hover .game-context-icon {
  color: #eaffff;
  opacity: 1;
}

/* ── Amigos (VIP list) ──────────────────────────────────────────────────── */
.friends-box {
  width: min(420px, 94vw);
}
.friends-add {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.friends-add .admin-search {
  flex: 1;
}
.friends-msg {
  font-size: 11.5px;
  color: #8fe;
  margin-bottom: 6px;
}
.friends-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.friends-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #555;
  flex: 0 0 auto;
}
.friends-dot.on {
  background: #5fdc72;
  box-shadow: 0 0 6px #5fdc72;
}
.friends-name {
  flex: 1;
  text-align: left;
  background: transparent;
  border: 0;
  color: #dde;
  font-weight: 700;
  cursor: pointer;
}
.friends-name:hover {
  color: #8fe;
}
.friends-lvl {
  font-size: 10.5px;
  color: #9fb3c8;
}
.friends-lvl.off {
  color: #777;
}

/* A coluna da direita (#sidebar-right) é overflow:hidden: o INVENTÁRIO ocupa
   o espaço restante e a GRADE rola (o ITENS não cabe e era cortado). */
#sidebar-right > #inventory {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#inventory > #inv-grid {
  /* ALTURA FIXA de 30 slots (6x5): não cresce com o conteúdo; acima de 30
     habilita o scroll vertical. O fator acompanha a largura da sidebar. */
  flex: 0 0 auto;
  /* Altura FIXA pra 30 slots (5 colunas x 6 linhas). As linhas têm tamanho
     FIXO (não comprimem); acima de 30 slots, rola. Acompanha a largura da
     sidebar. */
  height: calc(var(--sidebar-w, 272px) * 1.13);
  max-height: none;
  grid-auto-rows: calc((var(--sidebar-w, 272px) - 52px) / 5);
  overflow-y: auto;
  /* O "card" em volta dos slots. */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(8, 12, 18, 0.5);
  padding: 6px;
}
/* A aba INVENTÁRIO > POKÉMON tem 3 colunas: a linha fixa das 5 colunas (e a
   altura de 30 slots) NÃO vale — as linhas acompanham a célula (aspect-ratio
   1) e a grade só rola se o time crescer. */
#inventory > #inv-grid.poke-grid {
  grid-auto-rows: auto;
  height: auto;
  max-height: calc(var(--sidebar-w, 272px) * 1.15);
}
#sidebar-right > #trainer-card { flex: 0 0 auto; }

/* ── Cores por parte do outfit (aba OUTFIT do perfil) ──────────────────── */
.outfit-colors { margin-top: 12px; }
.outfit-color-wrap {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 8px;
}
.outfit-color-preview {
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
  image-rendering: pixelated;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: radial-gradient(circle at 50% 40%, #1a2230, #0c0f16);
}
.outfit-color-rows {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.outfit-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.outfit-color-label {
  width: 52px;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: #cfe0ee;
}
.outfit-color-dot {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.outfit-palette {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(19, 1fr);
  gap: 2px;
  max-height: 84px;
  overflow-y: auto;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(8, 12, 18, 0.5);
}
.outfit-swatch {
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.45);
  border-radius: 3px;
  cursor: pointer;
}
.outfit-swatch:hover { border-color: #fff; }
.outfit-swatch.sel { outline: 2px solid #4fd6e6; outline-offset: -1px; }

/* Confirmar a troca de outfit/cores (aplicar no jogador). */
.outfit-confirm-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.outfit-confirm-bar .idle-config-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ── GOLD no header (balance do treinador) ─────────────────────────────── */
.topbar-gold {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 209, 102, 0.12);
  border: 1px solid rgba(255, 209, 102, 0.4);
  color: #ffe9b0;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
}
.topbar-gold img { width: 16px; height: 16px; image-rendering: pixelated; }

/* ── Botão de ações no avatar do treinador ─────────────────────────────── */
#trainer-card { position: relative; }
.trainer-actions {
  position: absolute;
  top: 2px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(79, 214, 230, 0.6);
  background: rgba(10, 20, 28, 0.85);
  color: #7fe6f5;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
}
.trainer-actions:hover { background: rgba(20, 60, 80, 0.95); border-color: #4fd6e6; }

/* ── A loja do treinador (vender/comprar) ──────────────────────────────── */
/* A LOJA do treinador (MARK) — o layout da referência (`loja_comprar.png`,
   `loja_vender.png` e `loja_vender_venda_rapida.png`): as abas + a busca, a
   tabela (Item · Nome · Descrição/Quantidade · Preço) e o rodapé com o saldo
   e os botões. A VENDA RÁPIDA é a modal com o stepper + o slider por item. */
.trainer-shop {
  /* Mais larga (era 880): a tabela ganhou a coluna do seletor de quantidade. */
  width: min(1120px, 97vw);
  padding: 0;
  overflow: hidden;
}
.shop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
}
.shop-npc {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #eaf6ff;
}
.shop-npc-sub {
  font-size: 11px;
  color: #9fb3c8;
}
.shop-x {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: #cfe8ff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.shop-x:hover {
  border-color: #8fe;
  color: #fff;
}
.shop-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 8px;
}
.shop-tabs {
  display: flex;
  gap: 8px;
}
.shop-tab {
  padding: 7px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: #9fb3c8;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.shop-tab.on {
  border-color: #d8b34a;
  color: #ffd75e;
  background: rgba(216, 179, 74, 0.1);
}
.shop-search {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
}
.shop-search-ico {
  color: #9fb3c8;
  font-size: 13px;
}
.shop-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  color: #eaf6ff;
  font-size: 12.5px;
  outline: none;
}
.shop-body {
  max-height: 58vh;
  overflow-y: auto;
  padding: 0 8px 8px;
}
.shop-tr {
  display: grid;
  grid-template-columns: 34px minmax(0, 1.1fr) minmax(0, 1.5fr) 118px 216px;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
}
.shop-tr-sell {
  grid-template-columns: 34px minmax(0, 1.1fr) 92px 118px 118px 216px;
}
.shop-th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #12161d;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #9fb3c8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding-top: 10px;
  padding-bottom: 10px;
}
.shop-th-btn {
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.shop-th-btn:hover,
.shop-th-btn.on {
  color: #4fd6e6;
}
.shop-sort {
  margin-left: 4px;
  font-size: 9px;
  color: #4fd6e6;
}
.shop-th .shop-td-qty {
  display: flex;
  justify-content: flex-end;
  gap: 0;
}
/* O cabeçalho da coluna do seletor de quantidade. */
.shop-th .shop-td-qtysel {
  color: #9fb3c8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.shop-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
}
.shop-row:hover {
  background: rgba(143, 238, 255, 0.05);
}
.shop-row.sel {
  background: rgba(143, 238, 255, 0.1);
}
.shop-fav {
  width: 26px;
  height: 26px;
  border: 0;
  background: none;
  color: #5a6577;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.shop-fav.on {
  color: #ffd75e;
}
.shop-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.shop-icon {
  width: 26px;
  height: 26px;
  image-rendering: pixelated;
  object-fit: contain;
  flex: 0 0 auto;
}
.shop-name-txt {
  font-weight: 700;
  font-size: 12.5px;
  color: #eaf6ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-desc {
  font-size: 12px;
  color: #b9c6d4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-qty {
  text-align: right;
  font-size: 12.5px;
  color: #eaf6ff;
  font-variant-numeric: tabular-nums;
}
.shop-td-price,
.shop-td-total {
  display: flex;
  justify-content: flex-end;
}
.shop-coin {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: 12.5px;
  color: #7fe3a0;
  font-variant-numeric: tabular-nums;
}
.shop-coin-ico {
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
.shop-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.shop-step {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  color: #cfe8ff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.shop-step:hover {
  border-color: #8fe;
}
.shop-step-val {
  width: 62px;
  padding: 3px 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);
  color: #eaf6ff;
  font-size: 11.5px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* O seletor de quantidade (arrastável) de CADA linha da tabela. */
.shop-qty-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.shop-qty-cell .shop-range {
  flex: 1 1 auto;
  min-width: 0;
}
.shop-qty-num {
  width: 44px;
  flex: 0 0 auto;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: #eaf6ff;
  font-variant-numeric: tabular-nums;
}
.shop-row.sel .shop-qty-num {
  color: #4fd6e6;
}
.shop-range {
  width: 100%;
  height: 16px;
  appearance: none;
  background: none;
  cursor: pointer;
}
.shop-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
}
.shop-range::-webkit-slider-thumb {
  appearance: none;
  margin-top: -5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #2aa9e0;
  border: 2px solid #cfe8ff;
}
.shop-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #2aa9e0;
  border: 2px solid #cfe8ff;
}
.shop-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.shop-balance {
  display: flex;
  align-items: center;
}
.shop-total {
  flex: 1 1 auto;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: #ffd75e;
}
.shop-btn {
  padding: 9px 22px;
  border: 1px solid rgba(143, 238, 255, 0.5);
  border-radius: 6px;
  background: linear-gradient(180deg, #1f3d54, #14283a);
  color: #cfefff;
  font-weight: 800;
  font-size: 12.5px;
  cursor: pointer;
}
.shop-btn:hover:not(:disabled) {
  background: rgba(143, 238, 255, 0.16);
}
.shop-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.shop-btn-primary {
  background: linear-gradient(180deg, #2f6f8f, #1d4a63);
}
/* A VENDA RÁPIDA (a modal da referência). */
.shop-quick {
  width: min(600px, 94vw);
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.shop-quick-title {
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #4fd6e6;
}
.shop-quick-sum {
  text-align: center;
  font-size: 12px;
  color: #cfe8ff;
}
.shop-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-height: 52vh;
  overflow-y: auto;
  padding: 2px;
}
.shop-quick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}
.shop-quick-card.on {
  border-color: rgba(79, 214, 230, 0.55);
}
.shop-quick-pic {
  position: relative;
  height: 56px;
  display: flex;
  align-items: center;
}
.shop-quick-icon {
  max-height: 54px;
  max-width: 54px;
  image-rendering: pixelated;
}
.shop-quick-max {
  position: absolute;
  top: 0;
  right: -6px;
  font-size: 11px;
  font-weight: 700;
  color: #eaf6ff;
  text-shadow: 0 1px 2px #000;
}
.shop-quick-name {
  font-size: 10.5px;
  color: #b9c6d4;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.shop-quick-val {
  display: flex;
  justify-content: center;
}
.shop-quick-note {
  text-align: center;
  font-size: 10.5px;
  font-style: italic;
  color: #8b93a5;
}
.shop-quick-foot {
  display: flex;
  gap: 8px;
}
.shop-quick-foot .shop-btn {
  flex: 1 1 0;
}
.shop-quick-go {
  background: linear-gradient(180deg, #35b6d8, #1f7d99);
  border-color: #4fd6e6;
  color: #04141b;
}
.shop-quick-cancel {
  background: rgba(255, 255, 255, 0.05);
}

/* Os FILTROS de categoria da loja (chips). */
.shop-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 16px 0;
}
.shop-chip {
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #9fb3c8;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.shop-chip:hover {
  border-color: rgba(143, 238, 255, 0.5);
  color: #cfefff;
}
.shop-chip.on {
  border-color: #4fd6e6;
  background: rgba(79, 214, 230, 0.14);
  color: #4fd6e6;
}
/* O seletor da VENDA mostra "N/total" (o total que o jogador tem). */
.shop-qty-cell.with-max .shop-qty-num {
  width: 88px;
  font-size: 11px;
}
/* O item BLOQUEADO da venda rápida (o clique no card alterna). */
.shop-quick-card {
  cursor: pointer;
}
.shop-quick-card.blocked {
  opacity: 0.5;
  border-color: rgba(226, 86, 74, 0.6);
}
.shop-quick-card.blocked .shop-stepper,
.shop-quick-card.blocked .shop-range {
  pointer-events: none;
  opacity: 0.5;
}
.shop-quick-block {
  display: none;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #ff8d80;
}
.shop-quick-card.blocked .shop-quick-block {
  display: block;
}

/* A LOJA DE POKÉMON (a grade de capturados pra vender). */
.pshop {
  width: min(780px, 94vw);
}
.pshop-note {
  font-size: 11.5px;
  color: #8b93a5;
  padding: 0 16px 8px;
  line-height: 1.45;
}
.pshop-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 6px;
}
.pshop-search {
  flex: 1 1 auto;
  min-width: 0;
}
.pshop-count {
  flex: 0 0 auto;
  font-size: 11px;
  color: #8b93a5;
  white-space: nowrap;
}
.pshop-balance {
  display: flex;
  justify-content: flex-end;
  padding: 0 16px 6px;
}
.pshop-coin {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: 12.5px;
  color: #7fe3a0;
  font-variant-numeric: tabular-nums;
}
.pshop-coin img {
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
.pshop-msg {
  min-height: 16px;
  padding: 0 16px 4px;
  font-size: 12px;
  color: #ffd75e;
  text-align: center;
}
.pshop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
  padding: 0 16px 10px;
  max-height: 56vh;
  overflow-y: auto;
}
.pshop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}
.pshop-card.locked {
  opacity: 0.62;
}
.pshop-pic {
  position: relative;
  height: 56px;
  display: flex;
  align-items: center;
}
.pshop-sprite {
  width: 52px;
  height: 52px;
  image-rendering: pixelated;
}
.pshop-ball {
  position: absolute;
  right: -8px;
  bottom: -2px;
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
}
.pshop-name {
  font-size: 11.5px;
  font-weight: 700;
  color: #eaf6ff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.pshop-name.shiny {
  color: #ffd75e;
}
.pshop-sub {
  font-size: 10.5px;
  color: #9fb3c8;
}
.pshop-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 14px;
}
.pshop-badge {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 999px;
}
.pshop-badge.equip {
  background: #38bdf826;
  color: #7dd3fc;
}
.pshop-badge.inuse {
  background: #22c55e26;
  color: #86efac;
}
.pshop-badge.unique {
  background: #a855f726;
  color: #d8b4fe;
}
.pshop-badge.fav {
  background: #ffd75e26;
  color: #ffd75e;
}
.pshop-badge.bloq {
  background: #94a3b826;
  color: #cbd5e1;
}
.pshop-value {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #7fe3a0;
}
.pshop-value img {
  width: 13px;
  height: 13px;
  border-radius: 50%;
}
.pshop-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.pshop-fav {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: #5a6577;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.pshop-fav.on {
  color: #ffd75e;
  border-color: rgba(255, 215, 94, 0.5);
}
.pshop-sell {
  padding: 5px 14px;
  border: 1px solid rgba(143, 238, 255, 0.5);
  border-radius: 6px;
  background: linear-gradient(180deg, #1f3d54, #14283a);
  color: #cfefff;
  font-weight: 800;
  font-size: 11.5px;
  cursor: pointer;
}
.pshop-sell:hover:not(:disabled) {
  background: rgba(143, 238, 255, 0.16);
}
.pshop-sell:disabled {
  opacity: 0.4;
  cursor: default;
}

/* O SKELETON de loading (todas as modais que buscam no /api). */
.skel-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
  width: 100%;
  grid-column: 1 / -1;
}
.skel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
  padding: 4px 0;
  width: 100%;
  grid-column: 1 / -1;
}
.skel {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.skel::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
  animation: skel-shimmer 1.3s ease-in-out infinite;
}
@keyframes skel-shimmer {
  100% {
    transform: translateX(100%);
  }
}
.skel-sentinel {
  height: 1px;
  width: 100%;
  grid-column: 1 / -1;
}

/* A TROCA entre personagens. */
.trade-modal {
  width: min(760px, 94vw);
}
.trade-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 16px;
  padding: 0 16px 6px;
  font-size: 12px;
  color: #ffd75e;
  text-align: center;
}
.trade-msg-text {
  min-width: 0;
}
.trade-msg-x {
  background: none;
  border: 0;
  color: #ffd75e;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.trade-msg-x:hover {
  color: #fff;
}
.trade-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px 8px;
}
.trade-col {
  min-width: 0;
}
.trade-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  min-height: 230px;
}
.trade-side-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #4fd6e6;
}
.trade-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}
.trade-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: #eaf6ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trade-sprite {
  width: 26px;
  height: 26px;
  image-rendering: pixelated;
  flex: 0 0 auto;
}
.trade-ball {
  width: 14px;
  height: 14px;
  image-rendering: pixelated;
  flex: 0 0 auto;
}
.trade-empty {
  font-size: 11px;
  color: #8b93a5;
  padding: 2px 4px;
}
.trade-add {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
}
.trade-add .idle-config-btn {
  flex: 1 1 0;
}
.trade-pick-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 46vh;
  overflow-y: auto;
  margin: 6px 0;
}
.trade-pick-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
}
.trade-pick-row:hover {
  background: rgba(143, 238, 255, 0.12);
}
/* O estado "offline/sem conexão" com o botão de tentar de novo. */
.retry-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 10px;
  color: #9fb3c8;
  font-size: 12.5px;
  text-align: center;
  width: 100%;
  grid-column: 1 / -1;
}
.retry-state .idle-config-btn {
  min-width: 140px;
}

/* Resumo da hunt (componente unico — resumo_hunt.png) */
.hunt-summary { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.hs-note { font-size: 12px; padding: 8px 10px; border-radius: 6px; border: 1px solid #6b5a1e; background: #2b2410; color: #e8c34a; }
.hs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px; }
.hs-card { border: 1px solid #23262f; border-radius: 6px; padding: 6px 8px; background: #14161c; }
.hs-card-label { font-size: 10px; letter-spacing: .06em; color: #8b93a5; }
.hs-card-value { font-size: 15px; font-weight: 700; color: #e8ecf5; }
.hs-good { color: #5fdc72; }
.hs-bad { color: #e2564a; }
.hs-money { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.hs-money-row { display: flex; justify-content: space-between; font-size: 12px; }
.hs-money-label { color: #aeb6c6; }
.hs-section-title { font-size: 11px; letter-spacing: .08em; color: #8b93a5; margin-top: 8px; }
.hs-empty { font-size: 12px; color: #6b7284; text-align: center; padding: 6px; }
.hs-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-cell { width: 76px; border: 1px solid #23262f; border-radius: 6px; background: #14161c; padding: 4px; text-align: center; }
.hs-thumb { height: 44px; display: flex; align-items: center; justify-content: center; }
.hs-thumb img { max-height: 42px; max-width: 60px; image-rendering: pixelated; }
.hs-thumb-none { color: #6b7284; font-size: 18px; }
.hs-cell-name { font-size: 10px; color: #cdd4e0; line-height: 1.1; }
.hs-cell-count { font-size: 12px; font-weight: 700; color: #e8ecf5; }
.hs-cell-value { font-size: 10px; }

/* ── O PERFIL PÚBLICO (o layout do cliente de referência) ─────────────────── */
.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 1700;
  background: #000000bf;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-modal.hidden {
  display: none;
}
.profile-panel {
  background: var(--phw-bg-mid);
  border-color: #06b6d44d;
  width: min(480px, 94vw);
  max-height: min(680px, 92vh);
  max-height: min(680px, 92dvh);
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px #000000d9, 0 0 24px var(--phw-glow-primary);
  color: var(--phw-text-primary);
}
.profile-titlebar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: var(--phw-border-secondary);
}
.profile-title {
  font-size: 13px;
  letter-spacing: 0.22em;
  color: #fff;
  font-weight: var(--phw-font-weight-bold);
}
.profile-close {
  margin-left: auto;
}
.profile-body {
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
.profile-stage {
  position: relative;
  margin: var(--phw-space-lg);
  margin-bottom: 0;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(6, 182, 212, 0.06), transparent 70%), var(--phw-bg-dark);
  border: var(--phw-border-muted);
  border-radius: var(--phw-radius-md);
}
.profile-rotate {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 34px;
  height: 34px;
  border-radius: var(--phw-radius-full);
  background: var(--phw-bg-light);
  border: var(--phw-border-secondary);
  color: var(--phw-text-secondary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: var(--phw-transition-fast);
}
.profile-rotate:hover {
  color: var(--phw-accent);
  border-color: var(--phw-accent);
  box-shadow: var(--phw-glow-subtle);
}
.profile-canvas {
  image-rendering: pixelated;
  width: 144px;
  height: 144px;
}
.profile-identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--phw-space-md);
  padding: var(--phw-space-lg);
  border-bottom: var(--phw-border-muted);
}
.profile-name {
  font-size: var(--phw-font-size-xl);
  font-weight: var(--phw-font-weight-bold);
  color: #fff;
}
.profile-level {
  margin-top: 2px;
  font-size: var(--phw-font-size-xs);
  letter-spacing: 0.14em;
  color: var(--phw-text-muted);
  font-weight: var(--phw-font-weight-bold);
}
.profile-identity-right {
  text-align: right;
}
.profile-rank-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--phw-text-muted);
  font-weight: var(--phw-font-weight-bold);
}
.profile-rank {
  font-size: var(--phw-font-size-xl);
  font-weight: var(--phw-font-weight-bold);
  color: var(--phw-accent);
  font-variant-numeric: tabular-nums;
}
.profile-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--phw-space-sm) var(--phw-space-lg);
  padding: var(--phw-space-md) var(--phw-space-lg);
  border-bottom: var(--phw-border-muted);
}
.profile-info-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--phw-text-muted);
  font-weight: var(--phw-font-weight-bold);
}
.profile-info-value {
  margin-top: 2px;
  font-size: var(--phw-font-size-sm);
  color: var(--phw-text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.profile-online {
  color: var(--phw-accent);
}
.profile-online-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--phw-radius-full);
  background: var(--phw-accent);
  box-shadow: var(--phw-glow-subtle);
}
.profile-soon {
  color: var(--phw-text-dim);
  font-size: var(--phw-font-size-xs);
  letter-spacing: 0.08em;
}
.profile-caughts {
  font-weight: var(--phw-font-weight-bold);
  font-variant-numeric: tabular-nums;
}
.profile-guild-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  color: var(--phw-accent);
  font-weight: var(--phw-font-weight-bold);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-deaths {
  padding: var(--phw-space-md) 0 var(--phw-space-lg);
}
.profile-privacy-note {
  margin: 8px 0;
  color: #9fb3c8;
  font-size: 11.5px;
  line-height: 1.45;
}
.profile-privacy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
}
.profile-privacy-actions .idle-config-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.profile-privacy-message {
  margin: 6px 0 10px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid rgba(56, 189, 248, 0.25);
  background: rgba(56, 189, 248, 0.08);
  color: #cbeaff;
  font-size: 11.5px;
}
.profile-privacy-row {
  display: grid;
  grid-template-columns: 1fr 0.7fr 1.6fr;
  gap: 8px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11.5px;
}
.profile-diamond-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 10px;
  color: #9fb3c8;
  font-size: 11.5px;
}
.profile-diamond-row {
  display: grid;
  grid-template-columns: 115px minmax(120px, 1fr) 72px 90px;
  gap: 6px 10px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11.5px;
}
.profile-diamond-when {
  color: #7d91a5;
  white-space: nowrap;
}
.profile-diamond-label {
  color: #d8e6f2;
  font-weight: 700;
}
.profile-diamond-amount {
  text-align: right;
  font-weight: 800;
  color: #9fb3c8;
}
.profile-diamond-amount.pos {
  color: #4ade80;
}
.profile-diamond-amount.neg {
  color: #fca5a5;
}
.profile-diamond-balance {
  color: #9fb3c8;
  text-align: right;
  white-space: nowrap;
}
.profile-diamond-note {
  grid-column: 1 / -1;
  color: #7d91a5;
  overflow-wrap: anywhere;
}
.profile-diamond-evidence {
  grid-column: 1 / -1;
  margin-top: 2px;
  padding: 6px 8px;
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 5px;
  background: rgba(56, 189, 248, 0.05);
}
.profile-diamond-evidence summary {
  cursor: pointer;
  color: #8fd3ff;
  font-size: 10.5px;
  font-weight: 700;
}
.profile-diamond-json {
  margin: 6px 0 0;
  max-height: 180px;
  overflow: auto;
  color: #9fb3c8;
  font-size: 10px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.profile-privacy-kind {
  color: #d8e6f2;
  font-weight: 700;
  text-transform: capitalize;
}
.profile-privacy-status {
  color: #9fb3c8;
  font-weight: 800;
  text-transform: capitalize;
}
.profile-privacy-status.done {
  color: #4ade80;
}
.profile-privacy-status.pending {
  color: #ffd166;
}
.profile-privacy-status.rejected {
  color: #fca5a5;
}
.profile-privacy-detail {
  color: #9fb3c8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-section-title {
  padding: 0 var(--phw-space-lg) var(--phw-space-sm);
  font-size: var(--phw-font-size-xs);
  letter-spacing: 0.14em;
  color: var(--phw-accent);
  font-weight: var(--phw-font-weight-bold);
}
.profile-death-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--phw-space-md);
  padding: 8px var(--phw-space-lg);
  font-size: var(--phw-font-size-xs);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.profile-death-row:nth-child(2n) {
  background: #ffffff05;
}
.profile-death-date {
  color: var(--phw-text-muted);
  white-space: nowrap;
}
.profile-death-desc {
  color: var(--phw-text-secondary);
  text-align: right;
}
.profile-death-desc strong {
  color: var(--phw-accent);
  font-weight: var(--phw-font-weight-bold);
}
.profile-deaths-empty,
.profile-empty {
  color: var(--phw-text-muted);
  font-size: var(--phw-font-size-xs);
  padding: var(--phw-space-lg);
  text-align: center;
}
.profile-error {
  color: #e05a5a;
}
@media (max-width: 720px), (max-height: 480px) {
  .profile-info-grid {
    grid-template-columns: 1fr;
  }
}
/* O × padrão e o spinner do loading (os mesmos do cliente de referência). */
.phw-close {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  box-sizing: border-box;
  background: var(--phw-bg-light);
  border: var(--phw-border-secondary);
  border-radius: var(--phw-radius-full);
  color: var(--phw-text-muted);
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: var(--phw-transition-fast);
}
.phw-close:after {
  content: "";
  position: absolute;
  inset: -5px;
}
.phw-close:hover:not(:disabled) {
  color: var(--phw-accent);
  border-color: var(--phw-accent);
  box-shadow: var(--phw-glow-subtle);
}
.phw-close:focus-visible {
  outline: 2px solid var(--phw-accent);
  outline-offset: 2px;
}
.phw-close:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.phw-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: var(--phw-space-2xl) var(--phw-space-sm);
  width: 100%;
  box-sizing: border-box;
}
.ot-loader-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: #fff;
  border-radius: 50%;
  animation: phw-spin 0.75s linear infinite;
}
@keyframes phw-spin {
  to {
    transform: rotate(360deg);
  }
}
/* O painel "angular" (canto cortado + o risco de destaque no topo). */
.phw-panel-angular {
  position: relative;
  clip-path: polygon(
    var(--ot-clip-corner, 14px) 0%,
    100% 0%,
    100% calc(100% - var(--ot-clip-corner, 14px)),
    calc(100% - var(--ot-clip-corner, 14px)) 100%,
    0% 100%,
    0% var(--ot-clip-corner, 14px)
  );
  border: var(--phw-border-secondary);
}
.phw-panel-angular:before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--ot-clip-corner, 14px);
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--phw-accent) 0%, transparent 85%);
  pointer-events: none;
}
/* ── A POKÉPEDIA (layout da referência, 1:1) ──────────────────────────── */
.wiki-modal{position:fixed;inset:0;z-index:1650;background:#0f1419d9;display:flex;align-items:center;justify-content:center;padding:var(--phw-space-md)}
.wiki-panel{background:linear-gradient(135deg,#0f1419fa,#1a1e2efa);border:var(--phw-border-secondary);border-radius:var(--phw-radius-lg);width:min(1100px,100%);height:min(660px,100%);display:flex;flex-direction:column;box-shadow:var(--phw-shadow-lg),var(--phw-glow-subtle);color:var(--phw-text-primary);overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.wiki-titlebar{display:flex;align-items:center;justify-content:center;position:relative;padding:var(--phw-space-lg) var(--phw-space-xl);border-bottom:var(--phw-border-muted);background:var(--phw-bg-dark);flex-shrink:0}
.wiki-title{font-size:var(--phw-font-size-xl);letter-spacing:.28em;color:var(--phw-accent);font-weight:var(--phw-font-weight-bold)}
.wiki-close{position:absolute;right:var(--phw-space-lg);top:50%;transform:translateY(-50%)}
.wiki-tabs{display:flex;gap:4px;padding:0 var(--phw-space-lg);border-bottom:var(--phw-border-muted);background:var(--phw-bg-dark);flex-shrink:0}
.wiki-tab{background:transparent;border:none;border-bottom:2px solid transparent;color:var(--phw-text-muted);font-size:var(--phw-font-size-xs);font-weight:var(--phw-font-weight-bold);letter-spacing:.1em;text-transform:uppercase;padding:var(--phw-space-sm) var(--phw-space-md);min-height:40px;cursor:pointer;transition:var(--phw-transition-base)}
@media (hover: hover){.wiki-tab:hover{color:var(--phw-text-primary)}}
.wiki-tab-on{color:var(--phw-accent);border-bottom-color:var(--phw-accent)}
.wiki-layout{flex:1;min-height:0;display:grid;grid-template-columns:1fr minmax(220px,280px)}
.wiki-shiny-panel{flex:1;min-height:0;display:flex;flex-direction:column}
.wiki-shiny-search-box{border-bottom:var(--phw-border-muted);flex-shrink:0}
.wiki-shiny-search-box.wiki-catch-controls{padding:var(--phw-space-md)}
.wiki-shiny-type-filter{position:relative}
.wiki-shiny-type-btn{display:flex;align-items:center;gap:5px;min-width:104px;min-height:40px;background:var(--phw-bg-light);border:1px solid rgba(6,182,212,.3);border-radius:4px;color:var(--phw-text-muted);font-size:12px;padding:4px 10px;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1)}
.wiki-shiny-type-btn:hover{color:var(--phw-text-primary);border-color:var(--phw-accent)}
.wiki-shiny-type-btn.on{color:var(--phw-accent);border-color:var(--phw-accent)}
.wiki-shiny-type-label{flex:1;text-align:left;white-space:nowrap}
.wiki-shiny-type-icon{width:18px;height:18px}
.wiki-shiny-type-caret{font-size:9px;margin-left:auto}
.wiki-shiny-type-scrim{position:fixed;inset:0;z-index:5}
.wiki-shiny-type-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:6;width:max(240px,100%);max-height:clamp(140px,34dvh,260px);overflow-y:auto;padding:8px;background:var(--phw-bg-mid);border:1px solid rgba(6,182,212,.35);border-radius:6px;box-shadow:0 8px 24px #000000b3}
.wiki-shiny-type-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:4px}
.wiki-shiny-type-opt{display:flex;align-items:center;gap:6px;min-height:40px;padding:4px 6px;background:none;border:1px solid transparent;border-radius:4px;color:var(--phw-text-muted);font-size:11px;text-align:left;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1)}
.wiki-shiny-type-opt img:where(){width:20px;height:20px;flex-shrink:0}
.wiki-shiny-type-opt:hover{color:var(--phw-text-primary);border-color:#06b6d44d}
.wiki-shiny-type-opt.on{color:var(--phw-accent);border-color:var(--phw-accent);background:var(--phw-bg-light)}
.wiki-shiny-type-clear{width:100%;margin-top:6px;min-height:34px;background:none;border:1px solid rgba(6,182,212,.3);border-radius:4px;color:var(--phw-text-primary);font-size:11px;letter-spacing:.05em;cursor:pointer}
.wiki-shiny-type-clear:disabled{opacity:.35;cursor:not-allowed}
.wiki-shiny-level-range{display:flex;align-items:center;gap:4px}
.wiki-shiny-level-input{width:64px;text-align:center;text-transform:none}
.wiki-shiny-level-sep{color:var(--phw-text-muted)}
.wiki-catch-card--store{border-color:var(--phw-accent, #38bdf8)}
.wiki-catch-store-cta{font-size:.62rem;font-weight:700;color:var(--phw-accent, #38bdf8);text-transform:uppercase;letter-spacing:.02em}
.wiki-catch-store-price{font-size:.72rem;font-weight:700;color:var(--phw-text-bright, #e2e8f0)}
.wiki-catch-none--ball{color:var(--phw-text-muted, #94a3b8);font-style:italic}
.wiki-catch-nocap{font-size:.6rem;color:var(--phw-text-muted, #94a3b8);text-align:center;line-height:1.15}
.wiki-catch-hint{padding-inline:var(--phw-space-md);margin-block:2px}
.wiki-catch-help{flex-shrink:0}
.wiki-catch-help>summary:where(){padding:6px var(--phw-space-md);min-height:28px;display:flex;align-items:center;cursor:pointer;font-size:var(--phw-font-size-xs);font-weight:var(--phw-font-weight-semibold);color:var(--phw-accent);list-style:none;user-select:none}
.wiki-catch-help>summary:where()::-webkit-details-marker{display:none}
.wiki-catch-help>summary:where():before{content:"▸";margin-right:6px;font-size:1.45em;line-height:1;transition:transform .15s ease}
.wiki-catch-help[open]>summary:where():before{transform:rotate(90deg)}
.wiki-xp-panel{padding-inline:var(--phw-space-sm)}
.wiki-xp-early{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;margin:var(--phw-space-sm) 0;background:#4ade801a;border:1px solid rgba(74,222,128,.3);border-radius:8px;font-size:var(--phw-font-size-xs);color:var(--phw-text-muted, #94a3b8)}
.wiki-xp-early-badge{font-weight:var(--phw-font-weight-bold);font-size:var(--phw-font-size-base);color:#4ade80}
.wiki-xp-table{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:2px;padding-bottom:var(--phw-space-sm)}
.wiki-xp-head, .wiki-xp-row{display:grid;grid-template-columns:90px 1fr 72px;gap:10px;align-items:center}
.wiki-xp-head{padding:4px 10px;font-size:var(--phw-font-size-xs);font-weight:var(--phw-font-weight-semibold);color:var(--phw-text-muted, #94a3b8);text-transform:uppercase;letter-spacing:.04em;position:sticky;top:0;background:var(--phw-bg-dark, #0b1220);z-index:1}
.wiki-xp-row{min-height:32px;padding:3px 10px;background:var(--phw-bg-mid, #111c2e);border-radius:6px}
.wiki-xp-range{font-weight:var(--phw-font-weight-bold);font-size:var(--phw-font-size-sm);font-variant-numeric:tabular-nums}
.wiki-xp-bar-cell{display:flex;align-items:center;gap:8px;min-width:0}
.wiki-xp-bar{height:10px;border-radius:999px;background:linear-gradient(90deg,var(--phw-accent),rgba(6,182,212,.35));flex-shrink:0}
.wiki-xp-rel{font-style:normal;font-size:var(--phw-font-size-xs);font-weight:var(--phw-font-weight-bold);color:var(--phw-accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.wiki-xp-drop{font-size:var(--phw-font-size-xs);color:var(--phw-text-muted, #94a3b8);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width: 560px){.wiki-xp-head, .wiki-xp-row{grid-template-columns:68px 1fr 58px;gap:6px}}
.wiki-boost-panel{padding-inline:var(--phw-space-sm)}
.wiki-boost-controls{display:flex;gap:var(--phw-space-sm);align-items:center;flex-wrap:wrap;padding:var(--phw-space-sm) 0}
.wiki-boost-stones{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:6px;padding-bottom:var(--phw-space-sm);align-content:start}
.wiki-boost-stone{display:grid;grid-template-columns:28px 1fr auto auto;gap:10px;align-items:center;width:100%;min-height:44px;padding:6px 10px;background:var(--phw-bg-mid, #111c2e);border:1px solid rgba(6,182,212,.18);border-radius:8px;color:var(--phw-text-primary, #e6f6ff);font:inherit;text-align:left;cursor:pointer}
.wiki-boost-stone:hover, .wiki-boost-stone-open{border-color:#06b6d480;background:#06b6d41a}
.wiki-boost-stone-name{font-weight:var(--phw-font-weight-bold);font-size:var(--phw-font-size-base)}
.wiki-boost-stone-price{font-size:var(--phw-font-size-sm);color:var(--phw-accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.wiki-boost-stone-count{font-size:var(--phw-font-size-xs);color:var(--phw-text-muted, #94a3b8);white-space:nowrap}
.wiki-boost-list{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:4px;padding:4px 10px 10px}
.wiki-boost-chip{padding:3px 8px;background:#06b6d41f;border-radius:999px;font-size:var(--phw-font-size-xs);color:var(--phw-accent)}
.wiki-boost-species{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:4px;padding-bottom:var(--phw-space-sm);align-content:start}
.wiki-boost-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;min-height:38px;padding:4px 10px;background:var(--phw-bg-mid, #111c2e);border-radius:8px}
.wiki-boost-sp-name{font-weight:var(--phw-font-weight-bold);font-size:var(--phw-font-size-base)}
.wiki-boost-sp-stones{display:flex;gap:3px}
.wiki-boost-sp-cost{font-size:var(--phw-font-size-xs);color:var(--phw-text-muted, #94a3b8);text-align:right;white-space:nowrap}
.wiki-boost-ico{image-rendering:pixelated}
.wiki-boost-detail-head{display:flex;align-items:center;gap:10px;padding:6px 0 10px;flex-wrap:wrap}
.wiki-boost-back{min-height:40px;padding:0 12px;background:var(--phw-bg-mid, #111c2e);border:1px solid rgba(6,182,212,.3);border-radius:8px;color:var(--phw-accent);font:var(--phw-font-weight-semibold) var(--phw-font-size-sm) inherit;cursor:pointer}
.wiki-boost-back:hover{background:#06b6d426}
.wiki-boost-detail-name{font-weight:var(--phw-font-weight-bold);font-size:var(--phw-font-size-xl)}
.wiki-boost-detail-count{font-size:var(--phw-font-size-sm);color:var(--phw-text-muted, #94a3b8)}
.wiki-boost-stone:disabled{cursor:default}
.wiki-boost-stone:disabled:hover{border-color:#06b6d42e;background:var(--phw-bg-mid, #111c2e)}
.wiki-boost-card-cost{font-size:var(--phw-font-size-xs);line-height:1.3;color:var(--phw-text-muted, #94a3b8);text-align:center}
.wiki-boost-card-btn{font:inherit;color:inherit;cursor:pointer}
.wiki-boost-card-btn{position:relative;transition:border-color .15s ease,transform .15s ease}
.wiki-boost-card-btn:hover, .wiki-boost-card-btn:focus-visible{border-color:var(--phw-accent);transform:translateY(-1px);z-index:6}
.wiki-boost-calc-icon{width:16px;height:16px;vertical-align:-3px;flex:none}
.wiki-boost-calc-badge{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:22px;height:22px;font-size:12px;line-height:1;background:#06b6d429;border:1px solid rgba(6,182,212,.45);border-radius:6px;transition:background .15s ease,box-shadow .15s ease}
.wiki-boost-card-btn:hover .wiki-boost-calc-badge:where(), .wiki-boost-card-btn:focus-visible .wiki-boost-calc-badge:where(){background:#06b6d459;box-shadow:0 0 8px #06b6d48c}
.wiki-boost-calc-tip{position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,-4px);padding:6px 10px;width:max-content;max-width:calc(100% + 16px);line-height:1.3;text-align:center;font-size:var(--phw-font-size-xs);font-weight:var(--phw-font-weight-semibold);color:var(--phw-text-bright, #e2e8f0);background:var(--phw-bg-dark, #0b1220);border:1px solid var(--phw-accent);border-radius:8px;box-shadow:0 6px 18px #00000080;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease}
.wiki-boost-calc-tip:before{content:"";position:absolute;top:-5px;left:50%;width:8px;height:8px;background:inherit;border-left:1px solid var(--phw-accent);border-top:1px solid var(--phw-accent);transform:translate(-50%) rotate(45deg)}
.wiki-boost-card-btn:hover .wiki-boost-calc-tip:where(), .wiki-boost-card-btn:focus-visible .wiki-boost-calc-tip:where(){opacity:1;transform:translate(-50%)}
@media (hover: none){.wiki-boost-calc-tip{display:none}}
.wiki-boost-calc-open{align-self:flex-start;min-height:40px;padding:0 10px;margin-top:4px;background:#06b6d41a;border:1px solid rgba(6,182,212,.3);border-radius:8px;color:var(--phw-accent);font:var(--phw-font-weight-semibold) var(--phw-font-size-sm) inherit;cursor:pointer}
.wiki-boost-calc{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.wiki-boost-calc-inputs{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.wiki-boost-calc-inputs label:where(){display:flex;flex-direction:column;gap:4px;font-size:var(--phw-font-size-xs);color:var(--phw-text-muted, #94a3b8)}
.wiki-boost-calc-input{width:96px;min-height:40px;padding:0 10px;background:var(--phw-bg-mid, #111c2e);border:1px solid rgba(6,182,212,.3);border-radius:8px;color:var(--phw-text, #e2e8f0);font:var(--phw-font-weight-bold) var(--phw-font-size-lg) inherit;font-variant-numeric:tabular-nums}
.wiki-boost-calc-arrow{padding-bottom:10px;color:var(--phw-accent)}
.wiki-boost-calc-summary{display:flex;gap:10px;flex-wrap:wrap}
.wiki-boost-calc-summary div:where(){display:flex;flex-direction:column;gap:2px;padding:8px 12px;min-width:140px;background:var(--phw-bg-mid, #111c2e);border:1px solid rgba(6,182,212,.2);border-radius:8px}
.wiki-boost-calc-summary span:where(){font-size:var(--phw-font-size-xs);color:var(--phw-text-muted, #94a3b8)}
.wiki-boost-calc-summary strong:where(), .wiki-boost-calc-paths strong:where(){color:var(--phw-accent);font-variant-numeric:tabular-nums}
.wiki-boost-calc-paths{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.wiki-boost-calc-paths li:where(){display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 10px;background:var(--phw-bg-mid, #111c2e);border-radius:8px}
.wiki-boost-calc-path-name{font-weight:var(--phw-font-weight-semibold)}
.wiki-boost-calc-path-detail{flex:1;font-size:var(--phw-font-size-xs);color:var(--phw-text-muted, #94a3b8)}
.wiki-boost-calc-note{margin:0;font-size:var(--phw-font-size-xs);color:var(--phw-text-muted, #94a3b8)}
.wiki-boost-card-price{font-size:var(--phw-font-size-xs);font-weight:var(--phw-font-weight-bold);color:var(--phw-accent);font-variant-numeric:tabular-nums;text-align:center}
.wiki-boost-hit{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 10px;background:var(--phw-bg-mid, #111c2e);border:1px solid rgba(6,182,212,.28);border-radius:8px}
.wiki-boost-hit-icon{width:48px;height:48px;image-rendering:pixelated;flex-shrink:0}
.wiki-boost-hit-body{display:flex;flex-direction:column;gap:2px;min-width:120px}
.wiki-boost-hit-name{font-weight:var(--phw-font-weight-bold);font-size:var(--phw-font-size-lg)}
.wiki-boost-hit-cost{font-size:var(--phw-font-size-xs);color:var(--phw-text-muted, #94a3b8)}
.wiki-boost-hit-stones{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.wiki-boost-hit-stone{display:flex;align-items:center;gap:6px;min-height:40px;padding:0 10px;background:#06b6d41a;border:1px solid rgba(6,182,212,.25);border-radius:999px;color:var(--phw-accent);font:var(--phw-font-weight-semibold) var(--phw-font-size-xs) inherit;cursor:pointer}
.wiki-boost-hit-price{font-style:normal;font-weight:var(--phw-font-weight-bold);color:var(--phw-accent);font-variant-numeric:tabular-nums}
.wiki-boost-only-universal{font-size:var(--phw-font-size-xs);color:var(--phw-text-muted, #94a3b8);font-style:italic}
.wiki-boost-hit-stone:hover{background:#06b6d438}
.wiki-boost-note{margin:0;padding:8px 10px var(--phw-space-sm);font-size:var(--phw-font-size-xs);line-height:1.5;color:var(--phw-text-muted, #94a3b8);border-top:1px solid rgba(6,182,212,.15)}
@media (max-height: 560px){.wiki-boost-note{max-height:2.8em;overflow-y:auto;padding-block:4px}}
@media (max-width: 560px){.wiki-boost-stone{grid-template-columns:24px 1fr auto}
.wiki-boost-stone-count{grid-column:2 / -1}
.wiki-boost-row{grid-template-columns:1fr auto}
.wiki-boost-sp-cost{grid-column:1 / -1;text-align:left}}
.wiki-catch-panel{padding-inline:var(--phw-space-sm)}
.wiki-mu-panel{padding-block:0 var(--phw-space-md);padding-inline:var(--phw-space-md);gap:0}
.wiki-mu-controls{display:flex;gap:var(--phw-space-md);align-items:flex-end;flex-wrap:wrap;padding:var(--phw-space-md) 0 var(--phw-space-sm)}
.wiki-mu-main{display:flex;flex-direction:column;gap:3px;flex:1 1 320px;min-width:0}
.wiki-mu-searchbox{display:flex;align-items:center;gap:8px;background:var(--phw-bg-mid);border:var(--phw-border-muted);border-radius:var(--phw-radius-sm);padding:4px 10px 4px 6px}
.wiki-mu-searchbox:focus-within{border-color:var(--phw-accent)}
.wiki-mu-atk-sprite{width:32px;height:32px;flex:none;image-rendering:pixelated}
.wiki-mu-combo{position:relative}
.wiki-mu-search{flex:1;min-width:0;background:transparent;border:none;color:var(--phw-text-primary);font-family:inherit;font-size:var(--phw-font-size-md, 14px);padding:6px 0}
.wiki-mu-search:focus{outline:none}
.wiki-mu-searchbox.is-open{border-color:var(--phw-accent)}
.wiki-mu-caret{flex:none;background:none;border:none;color:var(--phw-text-muted);cursor:pointer;padding:0 2px;font-size:12px;line-height:1}
.wiki-mu-listbox{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;margin:0;padding:4px;list-style:none;max-height:260px;overflow-y:auto;background:var(--phw-bg-dark, #10151c);border:var(--phw-border-secondary);border-radius:var(--phw-radius-sm);box-shadow:var(--phw-shadow-lg)}
.wiki-mu-option{display:block;width:100%;text-align:left;background:none;border:none;border-radius:var(--phw-radius-sm);color:var(--phw-text-primary);font-family:inherit;font-size:var(--phw-font-size-sm);padding:7px 10px;cursor:pointer}
.wiki-mu-option.is-marked{background:var(--phw-bg-mid)}
.wiki-mu-option.is-current{color:var(--phw-accent);font-weight:var(--phw-font-weight-bold)}
.wiki-mu-empty{padding:10px;color:var(--phw-text-muted);font-size:var(--phw-font-size-sm);text-align:center}
.wiki-mu-filters{display:flex;gap:var(--phw-space-sm);align-items:flex-end;flex:none}
.wiki-mu-hint{margin:0 0 var(--phw-space-sm);color:var(--phw-text-muted);font-size:var(--phw-font-size-sm);line-height:1.4}
.wiki-mu-field{display:flex;flex-direction:column;gap:3px}
.wiki-mu-label{color:var(--phw-text-muted);font-size:var(--phw-font-size-xs, 11px);text-transform:uppercase;letter-spacing:.06em}
.wiki-mu-select{background:var(--phw-bg-mid);border:var(--phw-border-muted);border-radius:var(--phw-radius-sm);color:var(--phw-text-primary);font-family:inherit;font-size:var(--phw-font-size-sm);padding:7px 10px;cursor:pointer;min-width:180px}
.wiki-mu-select-lv{min-width:120px}
.wiki-mu-select:focus{border-color:var(--phw-accent);outline:none}
.wiki-mu-type{width:20px;height:20px;flex:none}
.wiki-mu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:var(--phw-space-sm);flex:1;min-height:0;overflow-y:auto;padding-right:6px;align-content:start}
.wiki-mu-card{display:flex;align-items:center;gap:10px;background:var(--phw-bg-mid);border:var(--phw-border-muted);border-radius:var(--phw-radius-sm);padding:8px 10px}
.wiki-mu-risk{border-color:color-mix(in srgb,#e8724a 55%,transparent)}
.wiki-mu-sprite{width:40px;height:40px;flex:none;image-rendering:pixelated}
.wiki-mu-info{display:flex;flex-direction:column;min-width:0;flex:1}
.wiki-mu-name{color:var(--phw-text-primary);font-size:var(--phw-font-size-sm);font-weight:var(--phw-font-weight-bold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wiki-mu-lv{color:var(--phw-text-muted);font-size:var(--phw-font-size-xs, 11px);font-variant-numeric:tabular-nums}
.wiki-mu-tags{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none;max-width:42%}
.wiki-mu-tag{border-radius:3px;padding:3px 6px;font-size:10px;font-weight:var(--phw-font-weight-bold);text-transform:uppercase;white-space:nowrap}
.wiki-mu-strong{background:color-mix(in srgb,#3fb96b 22%,transparent);color:#6ee49a}
.wiki-mu-good{background:color-mix(in srgb,#3fb96b 14%,transparent);color:#9fd9b4}
.wiki-mu-neutral{background:color-mix(in srgb,var(--phw-text-muted) 16%,transparent);color:var(--phw-text-muted)}
.wiki-mu-weak, .wiki-mu-immune{background:color-mix(in srgb,#e8724a 16%,transparent);color:#f0a48a}
.wiki-mu-danger{color:#e8724a;font-size:var(--phw-font-size-xs, 11px);line-height:1.25;text-align:right}
.wiki-mu-lvwarn{color:#d9b02e;font-size:var(--phw-font-size-xs, 11px);line-height:1.25;text-align:right}
@media (max-width: 560px){.wiki-mu-panel{padding-inline:var(--phw-space-sm)}
.wiki-mu-grid{grid-template-columns:1fr}
.wiki-mu-main, .wiki-mu-filters{flex:1 1 100%}
.wiki-mu-field{flex:1 1 40%;min-width:0}
.wiki-mu-select{min-width:0;width:100%}}
@media (pointer: coarse){.wiki-mu-option{min-height:40px;padding:10px 12px}
.wiki-mu-caret{min-width:40px;min-height:40px}}
@media (max-height: 560px){.wiki-mu-controls{padding-block:var(--phw-space-sm) 6px}
.wiki-mu-hint{display:none}
.wiki-mu-listbox{max-height:46vh}}
.wiki-catch-controls{display:flex;gap:var(--phw-space-sm);align-items:center;flex-wrap:wrap;padding:var(--phw-space-sm) 0}
.wiki-catch-controls .wiki-search-input:where(){flex:1;min-width:160px}
.wiki-catch-select{background:var(--phw-bg-mid);border:var(--phw-border-muted);border-radius:var(--phw-radius-sm);color:var(--phw-text-primary);font-family:inherit;font-size:var(--phw-font-size-sm);padding:7px 10px;text-transform:capitalize;cursor:pointer}
.wiki-catch-select:focus{border-color:var(--phw-accent);outline:none}
.wiki-catch-hint{margin:0 0 var(--phw-space-sm);color:var(--phw-text-muted);font-size:var(--phw-font-size-sm);line-height:1.4}
.wiki-catch-avg{display:inline-flex;align-items:center;gap:4px;color:var(--phw-accent);font-weight:var(--phw-font-weight-bold);font-variant-numeric:tabular-nums}
.wiki-catch-num{font-size:15px;line-height:1}
.wiki-catch-ball-ico{image-rendering:pixelated;flex:0 0 auto;width:20px;height:20px}
.wiki-catch-unit{color:var(--phw-text-muted);font-size:10px;font-weight:400}
.wiki-catch-avg--sure{color:var(--phw-success, #4ade80);font-size:var(--phw-font-size-sm)}
.wiki-catch-est{color:var(--phw-text-dim);font-weight:400;cursor:help}
.wiki-catch-range{color:var(--phw-text-dim);font-size:10px;font-variant-numeric:tabular-nums;cursor:help}
.wiki-catch-none{color:var(--phw-text-dim);font-size:10px}
.wiki-shiny-grid{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--phw-space-sm);padding:var(--phw-space-md);align-content:start}
.wiki-shiny-card{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--phw-bg-dark);border:var(--phw-border-muted);border-radius:var(--phw-radius-sm);padding:var(--phw-space-sm) var(--phw-space-xs);text-align:center;transition:var(--phw-transition-base)}
.wiki-shiny-card--clickable{cursor:pointer}
@media (hover: hover){.wiki-shiny-card--clickable:hover{border-color:var(--phw-accent);background:#06b6d40f}}
.wiki-shiny-icon{width:48px;height:48px;image-rendering:pixelated}
.wiki-shiny-name{font-size:var(--phw-font-size-xs);font-weight:var(--phw-font-weight-semibold);color:var(--phw-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.wiki-shiny-level{font-size:var(--phw-font-size-xs);color:var(--phw-text-muted);font-variant-numeric:tabular-nums}
.wiki-shiny-count{display:inline-flex;align-items:center;gap:4px;font-size:var(--phw-font-size-xs);color:var(--phw-text-muted);font-variant-numeric:tabular-nums}
.wiki-shiny-ball{flex-shrink:0;display:block}
.wiki-shiny-loading{flex:1;min-height:0;overflow-y:auto;display:flex;align-items:center;justify-content:center}
.wiki-shiny-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.wiki-shiny-section{padding:var(--phw-space-md);padding-bottom:calc(var(--phw-space-md) * .5)}
.wiki-shiny-section+.wiki-shiny-section:where(){margin-top:var(--phw-space-sm);padding-top:var(--phw-space-md);border-top:var(--phw-border-muted)}
.wiki-shiny-section-head{display:flex;align-items:center;justify-content:space-between;gap:var(--phw-space-sm);margin-bottom:var(--phw-space-sm)}
.wiki-shiny-section-title{margin:0;font-size:var(--phw-font-size-sm);font-weight:var(--phw-font-weight-semibold);color:var(--phw-text-primary);text-transform:uppercase;letter-spacing:.02em}
.wiki-shiny-section-count{font-size:var(--phw-font-size-xs);color:var(--phw-text-muted);font-variant-numeric:tabular-nums}
.wiki-shiny-grid--section{flex:initial;min-height:0;overflow:visible;padding:0}
.wiki-details{padding:var(--phw-space-lg);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;min-height:0}
.wiki-sidebar{border-left:var(--phw-border-muted);background:var(--phw-bg-dark);display:flex;flex-direction:column;min-height:0}
.wiki-search-box{padding:var(--phw-space-md);border-bottom:var(--phw-border-muted);flex-shrink:0}
.wiki-search-input{width:100%;background:var(--phw-bg-mid);border:var(--phw-border-muted);border-radius:var(--phw-radius-sm);padding:var(--phw-space-sm) var(--phw-space-md);color:var(--phw-text-primary);font-size:var(--phw-font-size-xs);transition:var(--phw-transition-base)}
@media (pointer: coarse){.wiki-search-input{font-size:16px}}
.wiki-search-input::placeholder{color:var(--phw-text-dim)}
.wiki-search-input:focus{outline:none;border:var(--phw-border-primary);box-shadow:var(--phw-glow-subtle)}
.wiki-panel .items-list{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;min-height:0}
.wiki-panel .list-item{display:flex;align-items:center;gap:var(--phw-space-md);width:100%;text-align:left;background:none;border:none;border-bottom:var(--phw-border-muted);border-left:2px solid transparent;padding:var(--phw-space-sm) var(--phw-space-md);min-height:40px;cursor:pointer;transition:var(--phw-transition-base);color:inherit}
.wiki-tokens-panel{display:flex;flex-direction:column;gap:var(--phw-space-md, 12px);padding:var(--phw-space-md, 12px);overflow-y:auto}
.wiki-tokens-intro{margin:0;font-size:var(--phw-font-size-xs, 11px);color:var(--phw-text-muted, #94a3b8);line-height:1.5}
.wiki-tokens-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--phw-space-md, 12px)}
.wiki-token-card{position:relative;display:flex;flex-direction:column;gap:var(--phw-space-sm, 8px);padding:var(--phw-space-md, 12px) var(--phw-space-md, 12px) var(--phw-space-md, 12px) var(--phw-space-lg, 16px);border-radius:12px;border:1px solid var(--tk-line);background:radial-gradient(130% 90% at 0% 0%,var(--tk-glow),transparent 62%),linear-gradient(180deg,var(--tk-glow),transparent 70%),#0f172a9e;overflow:hidden;transition:var(--phw-transition-base)}
.wiki-token-card:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--tk-accent)}
.wiki-token-devoted{--tk-accent: #6ee06a;--tk-line: rgba(96, 192, 72, .34);--tk-glow: rgba(72, 168, 48, .16)}
.wiki-token-boss{--tk-accent: #fbbf24;--tk-line: rgba(251, 191, 36, .32);--tk-glow: rgba(234, 179, 8, .15)}
.wiki-token-catcher{--tk-accent: #38bdf8;--tk-line: rgba(24, 168, 216, .34);--tk-glow: rgba(24, 168, 216, .16)}
.wiki-token-superior{--tk-accent: #67e8f9;--tk-line: rgba(103, 232, 249, .3);--tk-glow: rgba(103, 232, 249, .14)}
.wiki-token-pokelog{--tk-accent: #e7d7b8;--tk-line: rgba(231, 215, 184, .28);--tk-glow: rgba(231, 215, 184, .12)}
.wiki-token-bronze{--tk-accent: #e08a5a;--tk-line: rgba(192, 96, 72, .34);--tk-glow: rgba(192, 96, 72, .16)}
.wiki-token-locked{opacity:.88}
.wiki-token-head{display:flex;align-items:center;gap:10px}
.wiki-token-badge{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:10px;border:1px solid var(--tk-line);background:#0206178c;box-shadow:inset 0 0 12px var(--tk-glow)}
.wiki-token-badge img:where(){width:24px;height:24px;object-fit:contain;image-rendering:pixelated}
.wiki-token-emoji{font-size:20px;line-height:1}
.wiki-token-title{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.wiki-token-name{margin:0;font-size:var(--phw-font-size-sm, 13px);font-weight:var(--phw-font-weight-bold, 700);color:var(--tk-accent);letter-spacing:.01em}
.wiki-token-soon{padding:1px 7px;border-radius:999px;background:#eab30829;border:1px solid rgba(234,179,8,.4);color:#eab308;font-size:9px;font-weight:var(--phw-font-weight-bold, 700);letter-spacing:.05em;white-space:nowrap}
.wiki-token-desc{margin:0;font-size:var(--phw-font-size-xs, 11px);color:var(--phw-text, #e2e8f0);line-height:1.5}
.wiki-token-rows{display:flex;flex-direction:column;gap:var(--phw-space-sm, 8px);padding-top:var(--phw-space-sm, 8px);border-top:1px dashed var(--tk-line)}
.wiki-token-row{display:flex;flex-direction:column;gap:2px}
.wiki-token-label{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:var(--phw-font-weight-bold, 700);text-transform:uppercase;letter-spacing:.06em}
.wiki-token-label-earn{color:#4ade80}
.wiki-token-label-spend{color:#fbbf24}
.wiki-token-value{font-size:var(--phw-font-size-xs, 11px);color:var(--phw-text, #e2e8f0);line-height:1.5}
.wiki-token-pending{color:var(--phw-text-muted, #94a3b8);font-style:italic}
.wiki-token-prices{list-style:none;margin:2px 0 0;padding:8px 10px;display:flex;flex-direction:column;gap:5px;border-radius:8px;border:1px solid var(--tk-line);background:#02061766}
.wiki-token-price{display:flex;align-items:baseline;gap:6px;font-size:var(--phw-font-size-xs, 11px);line-height:1.4}
.wiki-token-price-name{color:var(--phw-text, #e2e8f0);min-width:0}
.wiki-token-price-dots{flex:1;min-width:8px;align-self:center;border-bottom:1px dotted var(--tk-line);transform:translateY(-2px)}
.wiki-token-price-cost{flex:none;font-weight:var(--phw-font-weight-bold, 700);font-variant-numeric:tabular-nums;color:var(--tk-accent)}
@media (max-width: 700px),(max-height: 420px){.wiki-tokens-panel{padding:var(--phw-space-sm, 8px);gap:var(--phw-space-sm, 8px)}
.wiki-tokens-grid{gap:var(--phw-space-sm, 8px)}
.wiki-token-prices{padding:6px 8px;gap:4px}}
@media (hover: hover){.wiki-token-card:hover{border-color:var(--tk-accent);transform:translateY(-1px)}}
@media (prefers-reduced-motion: reduce){.wiki-token-card{transition:none}
.wiki-token-card:hover{transform:none}}
@media (hover: hover){.wiki-panel .list-item:hover{background:#06b6d40f}}
.wiki-panel .list-item.active{background:#06b6d41f;border-left-color:var(--phw-accent);box-shadow:inset 0 0 8px #06b6d414}
.wiki-panel .list-item-icon{width:24px;height:24px;object-fit:contain;flex-shrink:0}
.wiki-panel .list-item-meta{display:flex;flex-direction:column;min-width:0}
.wiki-panel .list-item-name{font-size:var(--phw-font-size-sm);font-weight:var(--phw-font-weight-semibold);color:var(--phw-text-primary);text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wiki-panel .list-item-sub{font-size:var(--phw-font-size-xs);color:var(--phw-text-muted);text-transform:capitalize}
.wiki-panel .details-card{background:linear-gradient(135deg,#0f1419f2,#1a1e2ef2);border:var(--phw-border-muted);border-radius:var(--phw-radius-md);padding:var(--phw-space-md);margin-bottom:var(--phw-space-md)}
.wiki-panel .details-header{display:flex;align-items:center;gap:var(--phw-space-md);margin-bottom:var(--phw-space-md)}
.wiki-panel .details-heading{min-width:0}
.wiki-panel .details-icon{width:40px;height:40px;object-fit:contain;flex-shrink:0}
.wiki-panel .details-name{margin:0;overflow-wrap:anywhere;font-size:var(--phw-font-size-lg);font-weight:var(--phw-font-weight-bold);color:var(--phw-text-primary);text-transform:capitalize}
.wiki-panel .rare-name{color:var(--phw-accent)!important}
.wiki-panel .category-badge{font-size:9px;font-weight:var(--phw-font-weight-bold);padding:2px 6px;border-radius:var(--phw-radius-sm);text-transform:uppercase;display:inline-block;margin-top:var(--phw-space-xs)}
.wiki-panel .category-badge.type-loot{background:#06b6d426;color:var(--phw-accent)}
.wiki-panel .category-badge.type-stone{background:#8b5cf633;color:var(--phw-primary)}
.wiki-panel .category-badge.type-heal{background:#4ade8033;color:#4ade80}
.wiki-panel .category-badge.type-revive{background:#6366f133;color:var(--phw-secondary)}
.wiki-panel .rare-badge{font-size:9px;font-weight:var(--phw-font-weight-bold);background:#06b6d433;border:var(--phw-border-secondary);color:var(--phw-accent);padding:1px 4px;border-radius:var(--phw-radius-sm);margin-left:var(--phw-space-xs);display:inline-block}
.wiki-panel .details-body{font-size:var(--phw-font-size-xs)}
.wiki-panel .info-row{display:flex;justify-content:space-between;gap:var(--phw-space-sm);margin-bottom:var(--phw-space-xs);color:var(--phw-text-muted)}
.wiki-panel .val-price{color:var(--phw-accent);font-weight:var(--phw-font-weight-semibold)}
.wiki-panel .val-shop-price{color:#fb923c;font-weight:var(--phw-font-weight-semibold)}
.wiki-panel .money{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.wiki-panel .money-ico{border-radius:50%;flex-shrink:0;display:block}
.wiki-panel .val-heal{color:#4ade80;font-weight:var(--phw-font-weight-semibold)}
.wiki-panel .val-revive{color:var(--phw-primary);font-weight:var(--phw-font-weight-semibold)}
.wiki-panel .drops-section h4:where(){margin:0 0 var(--phw-space-sm) 0;font-size:var(--phw-font-size-xs);font-weight:var(--phw-font-weight-bold);color:var(--phw-accent);text-transform:uppercase;letter-spacing:.12em}
.wiki-panel .drops-list{max-height:260px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--phw-bg-dark);border:var(--phw-border-muted);border-radius:var(--phw-radius-sm);padding:var(--phw-space-xs)}
.wiki-panel .drop-row{display:flex;justify-content:space-between;align-items:center;padding:var(--phw-space-sm) var(--phw-space-sm);border-bottom:var(--phw-border-muted);font-size:var(--phw-font-size-xs)}
.wiki-panel .drop-row:last-child{border-bottom:none}
.wiki-panel .drop-creature-name{color:var(--phw-text-primary);font-weight:var(--phw-font-weight-semibold);text-transform:capitalize}
.wiki-panel .empty-msg{padding:var(--phw-space-md);text-align:center;color:var(--phw-text-muted);font-style:italic;font-size:var(--phw-font-size-xs)}
@media (max-height: 560px){.wiki-modal{padding:var(--phw-space-sm)}
.wiki-titlebar{padding:var(--phw-space-sm) var(--phw-space-lg)}
.wiki-title{font-size:var(--phw-font-size-lg);letter-spacing:.18em}
.wiki-layout{grid-template-columns:1fr minmax(170px,230px)}
.wiki-details{display:flex;flex-direction:column;padding:var(--phw-space-md)}
.wiki-panel .details-card{flex-shrink:0;margin-bottom:var(--phw-space-sm)}
.wiki-panel .details-icon{width:32px;height:32px}
.wiki-panel .drops-section{flex:1;min-height:0;display:flex;flex-direction:column}
.wiki-panel .drops-list{flex:1;min-height:0;max-height:none}}
@media (max-width: 560px){.wiki-layout{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.wiki-sidebar{order:-1;flex:none;border-left:none;border-bottom:var(--phw-border-muted)}
.wiki-panel .items-list{max-height:40vh}
.wiki-details{display:block;flex:none;overflow:visible}}

/* O `display:flex` do modal vence o [hidden] do navegador — sem regra
   própria o painel ficava SEMPRE visível, sobreposto à tela. */
.wiki-modal[hidden] {
  display: none !important;
}
/* Ajustes nossos da Poképedia: as artes são ilustrações (não pixel-art) e o
   vazio que a referência usa sem estilo próprio. */
.wiki-shiny-icon,
.wiki-boost-hit-icon,
.wiki-boost-ico {
  image-rendering: auto;
}
.wiki-empty {
  padding: var(--phw-space-md);
  text-align: center;
  color: var(--phw-text-muted);
  font-style: italic;
  font-size: var(--phw-font-size-xs);
}
.wiki-shiny-type-filter > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* A GUILDA (criar/admin/lista) */
.guild-box {
  width: min(700px, 96vw);
}
.guild-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid rgba(6, 182, 212, 0.25);
  border-radius: 10px;
  background: rgba(6, 182, 212, 0.05);
}
.guild-emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #0b0f14;
  font-weight: 800;
  line-height: 1;
  background: radial-gradient(circle at 32% 28%, #fff6, transparent 60%), var(--c, #06b6d4);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 10px color-mix(in srgb, var(--c, #06b6d4) 55%, transparent);
}
.guild-emblem-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.guild-emblem-pick {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: radial-gradient(circle at 32% 28%, #fff6, transparent 60%), var(--c, #06b6d4);
  color: #0b0f14;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
}
.guild-emblem-pick:hover {
  opacity: 1;
}
.guild-emblem-pick.on {
  border-color: #fff;
  opacity: 1;
  box-shadow: 0 0 10px color-mix(in srgb, var(--c, #06b6d4) 70%, transparent);
}
.guild-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.guild-top-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.guild-title-name {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}
.guild-sub {
  font-size: 11px;
  color: var(--phw-text-muted);
}
.guild-motd {
  font-size: 12px;
  color: var(--phw-text-secondary);
  font-style: italic;
  padding: 6px 8px;
  border-left: 2px solid var(--phw-accent);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}
.guild-reqs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.guild-req {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.guild-req.ok {
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.08);
}
.guild-req.bad {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.08);
}
.guild-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--phw-text-muted);
  font-weight: 700;
  text-transform: uppercase;
}
.guild-form-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.guild-input {
  min-height: 34px;
  min-width: 0;
  flex: 1;
  padding: 6px 10px;
  background: var(--phw-bg-dark);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 6px;
  color: var(--phw-text-primary);
  font-size: 12px;
}
.guild-check .guild-input {
  flex: none;
  width: 80px;
}
.guild-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  background: var(--phw-bg-dark);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 6px;
  color: var(--phw-text-primary);
  font-size: 12px;
  font-family: inherit;
  resize: vertical;
}
.guild-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--phw-text-secondary);
  white-space: nowrap;
}
.guild-btn {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: var(--phw-text-secondary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.guild-btn:hover:not(:disabled) {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.guild-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.guild-btn-primary {
  border-color: var(--phw-accent);
  color: var(--phw-accent);
  background: rgba(6, 182, 212, 0.1);
}
.guild-btn-primary:hover:not(:disabled) {
  background: rgba(6, 182, 212, 0.22);
  color: var(--phw-accent);
}
.guild-btn-danger {
  border-color: rgba(248, 113, 113, 0.45);
  color: #f87171;
}
.guild-btn-danger:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.14);
  color: #f87171;
}
.guild-msg {
  padding: 8px 12px;
  margin-bottom: 10px;
  border-radius: 6px;
  font-size: 12px;
}
.guild-msg-ok {
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.35);
  background: rgba(74, 222, 128, 0.08);
}
.guild-msg-err {
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.08);
}
.guild-hint {
  font-size: 11px;
  color: var(--phw-text-muted);
}
.guild-admin {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 8px;
}
.guild-invite-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.guild-invite-row .guild-name {
  flex: 1;
}
.guild-thead-admin,
.guild-row-admin {
  grid-template-columns: 1fr 60px 110px 90px 1fr;
}
.guild-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.guild-rank-select {
  min-height: 28px;
  padding: 2px 6px;
  background: var(--phw-bg-dark);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 4px;
  color: var(--phw-text-primary);
  font-size: 11px;
}
.guild-online {
  color: #4ade80;
  font-size: 10px;
}
.guild-list-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 6px;
}
.guild-list-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.guild-list-name {
  display: flex;
  align-items: center;
  gap: 8px;
}
.guild-list-motd {
  font-size: 11px;
  color: var(--phw-text-muted);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.guild-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--phw-text-muted);
}
.guild-badge.open {
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.08);
}

/* O MERCADO (as 7 abas da referência) */
.mkt {
  width: min(940px, 97vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.mkt-title-sub {
  color: var(--phw-accent);
  font-weight: 700;
}
.mkt-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 2px 8px;
}
.mkt-tabs {
  display: flex;
  gap: 6px;
}
.mkt-tab {
  width: 40px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--phw-text-secondary);
  cursor: pointer;
}
.mkt-tab svg {
  width: 19px;
  height: 19px;
}
.mkt-tab:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.mkt-tab.on {
  color: #fff;
  border-color: var(--phw-accent);
  background: color-mix(in srgb, var(--phw-accent) 22%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--phw-accent) 40%, transparent);
}
.mkt-refresh {
  width: 36px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--phw-text-secondary);
  font-size: 16px;
  cursor: pointer;
}
.mkt-refresh:hover {
  color: #fff;
}
.mkt-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px;
}
.mkt-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 6px;
}
.mkt-foot-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.mkt-foot-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--phw-text-secondary);
}
.mkt-section {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--phw-accent);
  padding: 6px 2px 2px;
}
.mkt-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0 6px;
}
.mkt-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--phw-text-secondary);
}
.mkt-search {
  flex: 1;
  justify-content: flex-end;
  max-width: 320px;
}
.mkt-search-ico {
  font-size: 14px;
  color: var(--phw-text-muted);
}
.mkt-select {
  min-height: 32px;
  padding: 4px 8px;
  background: var(--phw-bg-dark);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 6px;
  color: var(--phw-text-primary);
  font-size: 12px;
}
.mkt-input {
  min-height: 32px;
  min-width: 0;
  flex: 1;
  padding: 4px 8px;
  background: var(--phw-bg-dark);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 6px;
  color: var(--phw-text-primary);
  font-size: 12px;
}
.mkt-table {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.015);
}
.mkt-thead,
.mkt-row {
  display: grid;
  grid-template-columns: 42px 44px minmax(150px, 1.6fr) minmax(110px, 1fr) 90px 130px 150px;
  gap: 6px;
  align-items: center;
  padding: 7px 10px;
}
.mkt-thead {
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--phw-accent);
  font-weight: 800;
  background: rgba(6, 182, 212, 0.07);
}
.mkt-row {
  font-size: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.mkt-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.mkt-row .mkt-c-act {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
}
.mkt-ico {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.mkt-ico img {
  max-width: 30px;
  max-height: 30px;
  image-rendering: pixelated;
}
.mkt-ico-fallback {
  color: var(--phw-text-muted);
  font-weight: 800;
}
.mkt-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--phw-text-primary);
  font-weight: 600;
}
.mkt-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.mkt-tag {
  font-size: 9px;
  padding: 0 5px;
  border-radius: 999px;
  border: 1px solid rgba(6, 182, 212, 0.4);
  color: var(--phw-accent);
}
.mkt-tag-mut {
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--phw-text-muted);
}
.mkt-tag-ok {
  border-color: rgba(74, 222, 128, 0.4);
  color: #4ade80;
}
.mkt-c-num {
  color: var(--phw-text-muted);
  font-size: 11px;
}
.mkt-c-seller {
  color: var(--phw-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mkt-c-qty,
.mkt-c-price,
.mkt-c-offer,
.mkt-c-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mkt-c-price b,
.mkt-c-offer b {
  color: #4ade80;
}
.mkt-c-time {
  color: var(--phw-accent);
  font-variant-numeric: tabular-nums;
}
.mkt-clock {
  color: var(--phw-accent);
}
.mkt-offers-only {
  color: var(--phw-accent);
  font-style: italic;
  font-size: 11px;
}
.mkt-coin-ico {
  color: #facc15;
  font-size: 12px;
}
.mkt-coin-ico.mkt-phw {
  color: #38bdf8;
}
.mkt-btn {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: var(--phw-text-secondary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.mkt-btn:hover:not(:disabled) {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.mkt-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.mkt-btn-primary {
  border-color: var(--phw-accent);
  color: #06121a;
  background: var(--phw-accent);
}
.mkt-btn-primary:hover:not(:disabled) {
  background: #67e8f9;
  color: #06121a;
}
.mkt-btn-small {
  min-height: 26px;
  padding: 0 9px;
  font-size: 11px;
}
.mkt-btn-ok {
  border-color: rgba(74, 222, 128, 0.55);
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
}
.mkt-btn-ok:hover:not(:disabled) {
  background: rgba(74, 222, 128, 0.22);
  color: #4ade80;
}
.mkt-btn-buy {
  border-color: rgba(248, 113, 113, 0.5);
  color: #f87171;
  background: rgba(248, 113, 113, 0.12);
}
.mkt-btn-buy:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.22);
  color: #f87171;
}
.mkt-eye {
  min-height: 26px;
  padding: 0 8px;
  font-size: 13px;
}
.mkt-eye.on {
  border-color: var(--phw-accent);
  color: var(--phw-accent);
  background: rgba(6, 182, 212, 0.15);
}
.mkt-empty {
  padding: 18px;
  text-align: center;
  color: var(--phw-text-muted);
  font-size: 12px;
  font-style: italic;
}
.mkt-pager {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mkt-page {
  min-height: 28px;
  padding: 0 9px;
}
.mkt-page-info {
  font-size: 11px;
  color: var(--phw-text-muted);
  padding: 0 4px;
}
.mkt-msg {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
}
.mkt-msg-ok {
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.35);
  background: rgba(74, 222, 128, 0.08);
}
.mkt-msg-err {
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.08);
}
.mkt-hint {
  font-size: 11px;
  color: var(--phw-text-muted);
}
.mkt-subtabs {
  display: flex;
  gap: 8px;
  padding: 2px 0 6px;
}
.mkt-subtab {
  border-radius: 999px;
}
.mkt-subtab.on {
  border-color: var(--phw-accent);
  color: #06121a;
  background: var(--phw-accent);
}
.mkt-wallet {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  font-size: 12px;
  color: var(--phw-text-secondary);
  padding: 0 2px 4px;
}
.mkt-status {
  font-size: 11px;
  font-weight: 700;
}
.mkt-status-pend {
  color: #facc15;
}
.mkt-status-ok {
  color: #4ade80;
}
.mkt-status-bad {
  color: #f87171;
}
.mkt-status-mut {
  color: var(--phw-text-muted);
}
.mkt-history {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 52vh;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 8px 10px;
}
.mkt-history-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--phw-text-secondary);
  padding: 2px 0;
}
.mkt-pos {
  color: #4ade80;
}
.mkt-neg {
  color: #f87171;
}
.mkt-sub-overlay {
  z-index: 1400;
}
.mkt-sub {
  width: min(680px, 96vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
}
.mkt-sub-body {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px;
}
.mkt-line {
  font-size: 12px;
  color: var(--phw-text-secondary);
}
.mkt-total {
  font-weight: 700;
  color: var(--phw-text-primary);
}
.mkt-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 8px;
}
.mkt-form-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mkt-form-row .mkt-input {
  flex: none;
  width: 130px;
}
.mkt-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--phw-text-secondary);
}
.mkt-picked b {
  color: var(--phw-accent);
}
.mkt-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 6px;
  max-height: 24vh;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 8px;
}
.mkt-pick {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.mkt-pick:hover:not(:disabled) {
  border-color: var(--phw-accent);
}
.mkt-pick.on {
  border-color: var(--phw-accent);
  background: rgba(6, 182, 212, 0.18);
}
.mkt-pick:disabled {
  opacity: 0.35;
  cursor: default;
}
.mkt-pick .mkt-ico {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
}
.mkt-pick-count {
  font-size: 9px;
  color: var(--phw-text-muted);
}
.mkt-suggest {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 150px;
  overflow-y: auto;
}
.mkt-suggest-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.03);
  color: var(--phw-text-secondary);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.mkt-suggest-item:hover {
  border-color: var(--phw-accent);
  color: #fff;
}

/* A auditoria do mercado no painel de ADMIN */
.admin-audit {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 42vh;
  overflow-y: auto;
  /* O scroll HORIZONTAL: a última coluna (o detalhe) não pode ficar cortada. */
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 6px 8px;
}
.admin-audit-row {
  display: grid;
  /* Colunas de largura fixa: a linha fica MAIS LARGA que o painel e o
     overflow-x do container revela o resto (com o detalhe inteiro). */
  grid-template-columns: 90px 130px 150px 230px 460px;
  min-width: max-content;
  gap: 8px;
  align-items: baseline;
  font-size: 11px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.admin-audit-row.err {
  color: #f87171;
}
.admin-audit-when {
  color: var(--phw-text-muted);
}
.admin-audit-who {
  color: var(--phw-accent);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-audit-act {
  color: var(--phw-text-primary);
  font-weight: 700;
}
.admin-audit-money {
  color: #4ade80;
  font-variant-numeric: tabular-nums;
}
.admin-audit-detail {
  color: var(--phw-text-muted);
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ── LOJA DE DIAMANTES (PHW Coins/diamonds) ─────────────────────────────────── */
.coin-shop {
  width: min(1120px, 94vw);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.coin-shop-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  flex: 1;
}
.coin-shop-side {
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}
.coin-shop-side-title {
  padding: 2px 5px 8px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #68808d;
}
.coin-shop-main {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.coin-shop-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.coin-shop-balance {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.1);
  color: #9fb3c8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.coin-shop-balance img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}
.coin-shop-balance strong {
  color: #cbeaff;
  font-size: 15px;
  letter-spacing: 0;
}
.coin-shop-tabs {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.coin-shop-tab {
  width: 100%;
  text-align: left;
}
.coin-shop-tab {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #9fb3c8;
  font-size: 10.5px;
  font-weight: 800;
  padding: 5px 11px;
  cursor: pointer;
}
.coin-shop-tab.on {
  border-color: #4fc3f7;
  background: rgba(79, 195, 247, 0.16);
  color: #cbeaff;
}
.coin-shop-msg {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: #cfe0ee;
  background: rgba(255, 255, 255, 0.04);
}
.coin-shop-msg.ok {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.25);
}
.coin-shop-msg.err {
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.25);
}
.coin-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
  min-height: 0;
  flex: 1;
  max-height: none;
  overflow-y: auto;
  align-content: start;
  padding-right: 3px;
}
.coin-shop-card {
  display: flex;
  gap: 11px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(16, 24, 34, 0.88);
}
.coin-shop-art {
  width: 72px;
  height: 72px;
  object-fit: contain;
  image-rendering: pixelated;
  flex: 0 0 auto;
  align-self: flex-start;
}
.coin-shop-emoji {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-size: 42px;
  line-height: 1;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 40%, rgba(80, 210, 230, 0.16), rgba(5, 15, 20, 0.55));
}
.tr-bless, #tr-vitals { cursor: pointer; }
.tr-bless:hover, #tr-vitals:hover { border-color: rgba(120, 230, 245, 0.55); }
.coin-shop-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
.coin-shop-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}
.coin-shop-name {
  color: #eaf6ff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}
.coin-shop-cat {
  flex: 0 0 auto;
  color: #7ad0ff;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 999px;
  padding: 1px 6px;
}
.coin-shop-desc {
  color: #9fb3c8;
  font-size: 11px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.coin-shop-detail {
  color: #7f93a6;
  font-size: 10px;
}
.coin-shop-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.coin-shop-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #cbeaff;
  font-size: 10px;
  font-weight: 800;
  /* Quando o card é estreito, "diamantes" desce de linha em vez de cortar
     o valor (o ícone + número ficam sempre juntos, ver .coin-shop-price-value). */
  flex-wrap: wrap;
  row-gap: 0;
}
.coin-shop-price-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.coin-shop-price img {
  width: 14px;
  height: 14px;
  image-rendering: pixelated;
}
.coin-shop-price b {
  font-size: 14px;
}
.coin-shop-buy {
  border: 1px solid rgba(56, 189, 248, 0.6);
  border-radius: 6px;
  background: linear-gradient(180deg, #1b7fb5, #135f8c);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 7px 11px;
  cursor: pointer;
}
.coin-shop-buy:hover:not(:disabled) {
  background: linear-gradient(180deg, #2499d4, #176f9f);
}
.coin-shop-buy:disabled {
  opacity: 0.6;
  cursor: wait;
}
.coin-shop-empty {
  grid-column: 1 / -1;
  color: #8fa4b8;
  font-size: 12px;
  padding: 8px 0;
}
@media (max-width: 760px) {
  .coin-shop-layout { grid-template-columns: 1fr; }
  .coin-shop-side { max-height: 120px; }
  .coin-shop-tabs { flex-direction: row; flex-wrap: wrap; }
  .coin-shop-tab { width: auto; }
}
@media (max-width: 640px) {
  .coin-shop-grid {
    grid-template-columns: 1fr;
  }
}

/* ── ADMIN > LOJA DE DIAMANTES ──────────────────────────────────────────────── */
.adm-shop-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 56vh;
  overflow-y: auto;
  padding-right: 3px;
}
.adm-shop-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  padding: 9px 10px;
  background: rgba(16, 24, 34, 0.75);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.adm-shop-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.adm-shop-id {
  color: #7ad0ff;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.adm-shop-title {
  color: #eaf6ff;
  font-size: 12px;
  font-weight: 800;
}
.adm-shop-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 6px;
  align-items: center;
}
.adm-update-sections { min-height: 96px; }
.adm-doc-links { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }
.adm-doc-links .idle-config-btn { font-size: 10px; letter-spacing: .04em; }
.adm-shop-small {
  max-width: 110px;
}
.adm-shop-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #9fb3c8;
  font-size: 10px;
  white-space: nowrap;
}
.adm-shop-check input {
  accent-color: #2aa9e0;
}
.adm-shop-desc {
  min-height: 48px;
  resize: vertical;
  font-size: 11px;
}
.adm-shop-foot {
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 760px) {
  .adm-shop-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── ADMIN > PAGAMENTOS ─────────────────────────────────────────────────── */
.adm-pay-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 38vh;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 6px 8px;
  margin-bottom: 8px;
}
.adm-pay-head,
.adm-pay-row {
  display: grid;
  grid-template-columns: minmax(130px, 1.8fr) 0.7fr 0.7fr 0.8fr 0.5fr 0.5fr auto;
  gap: 7px;
  align-items: center;
  min-width: 660px;
}
.adm-pay-head {
  color: #8a99a8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0 0 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.adm-pay-row {
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.adm-pay-input {
  width: 100%;
  min-width: 0;
  background: #101822;
  border: 1px solid rgba(80, 170, 220, 0.3);
  border-radius: 5px;
  color: #eaf6ff;
  font-size: 11px;
  padding: 5px 6px;
}
.adm-pay-input:focus {
  outline: none;
  border-color: #2aa9e0;
}
.adm-pay-order {
  max-width: 58px;
}
.adm-pay-check,
.adm-pay-toggle {
  width: 16px;
  height: 16px;
  accent-color: #2aa9e0;
  justify-self: center;
  cursor: pointer;
}
.adm-pay-save {
  padding: 5px 9px;
  font-size: 10px;
}
.adm-pay-desc {
  max-width: 180px;
  text-transform: uppercase;
}
.adm-pay-order-head,
.adm-pay-order-row {
  grid-template-columns: 0.8fr 1.2fr 1.3fr 0.7fr 0.7fr 0.9fr 0.8fr auto;
  min-width: 780px;
}
.adm-pay-cell {
  color: #c9d6e2;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-pay-status {
  font-weight: 800;
  text-transform: capitalize;
}
.adm-pay-status.paid {
  color: #4ade80;
}
.adm-pay-status.pending {
  color: #ffd166;
}
.adm-pay-status.failed,
.adm-pay-status.canceled,
.adm-pay-status.expired,
.adm-pay-status.chargeback {
  color: #fca5a5;
}
.adm-pay-status.refunded {
  color: #7ad0ff;
}
.adm-pay-status.partially_refunded {
  color: #fbbf24;
}
.adm-pay-details {
  font-size: 9px;
  padding: 4px 8px;
  white-space: nowrap;
}
.adm-pay-danger {
  border-color: rgba(248, 113, 113, 0.45);
  color: #fca5a5;
}
.adm-pay-danger:hover {
  background: rgba(248, 113, 113, 0.14);
  border-color: #fca5a5;
}
.adm-pay-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}

/* ── DETALHES DO PEDIDO (jogador e Admin) ───────────────────────────────── */
.payment-details-modal {
  width: min(720px, 94vw);
}
.payment-details-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  padding: 4px 2px 8px;
}
.payment-details-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  background: rgba(10, 18, 26, 0.55);
  font-size: 11px;
}
.payment-details-provider {
  color: #9fb3c8;
  font-weight: 700;
}
.payment-details-detail {
  color: #8a99a8;
  font-size: 10.5px;
}
.payment-details-note {
  padding: 6px 8px;
  border: 1px solid rgba(42, 169, 224, 0.22);
  border-radius: 7px;
  background: rgba(42, 169, 224, 0.07);
  color: #8fd3ff;
  font-size: 10.5px;
  line-height: 1.45;
}
.payment-details-grid {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 7px;
  padding: 0 8px;
}
.payment-details-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.payment-details-row:last-child {
  border-bottom: 0;
}
.payment-details-label {
  color: #8fa4b8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.payment-details-value {
  color: #d8e6f2;
  font-size: 11.5px;
  overflow-wrap: anywhere;
}
.payment-details-link {
  color: #7ad0ff;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: underline;
}
.payment-details-json {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  padding: 6px 8px;
  background: rgba(5, 10, 16, 0.45);
}
.payment-details-json summary {
  color: #8fd3ff;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.payment-details-json pre {
  color: #b9c9d8;
  font-size: 10px;
  line-height: 1.35;
  margin: 6px 0 0;
  max-height: 240px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Os DIAMONDS no header (à esquerda do balance) */
.topbar-gold {
  margin-left: 0;
}
.topbar-diamonds {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: #cbeaff;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
}
.topbar-diamonds img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}
.topbar-diamonds {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.topbar-diamonds:hover {
  background: rgba(56, 189, 248, 0.22);
  border-color: rgba(56, 189, 248, 0.8);
}

/* ── A loja de DIAMONDS (dinheiro real) ─────────────────────────────────── */
.diamond-overlay {
  z-index: 3600;
}
.diamond-modal {
  width: min(780px, 94vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.diamond-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}
.diamond-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.1);
  border-radius: 8px;
  margin-bottom: 10px;
}
.diamond-balance-label {
  color: #9fb3c8;
  font-size: 12px;
}
.diamond-balance-value {
  color: #cbeaff;
  font-size: 20px;
  font-weight: 800;
}
.diamond-intro {
  color: #8fa4b8;
  font-size: 11.5px;
  line-height: 1.45;
  margin-bottom: 12px;
}
.diamond-consents {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.diamond-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: #9fb3c8;
  font-size: 11.5px;
  line-height: 1.35;
  cursor: pointer;
}
.diamond-consent input {
  margin-top: 2px;
  accent-color: #2aa9e0;
  flex: 0 0 auto;
}
.diamond-payer {
  margin-bottom: 10px;
  padding: 7px 9px;
  border: 1px solid rgba(80, 170, 220, 0.22);
  border-radius: 7px;
  background: rgba(42, 169, 224, 0.05);
}
.diamond-wallet-note {
  color: #fbbf24;
  font-size: 10.5px;
  line-height: 1.45;
  margin: 2px 0 6px;
}
.diamond-wallet-note[hidden] {
  display: none;
}
.diamond-rollbacks {
  margin-top: 10px;
}
.diamond-rollbacks .diamond-order-status {
  white-space: nowrap;
}
.diamond-payer-title {
  color: #8fa4b8;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.diamond-payer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.diamond-payer-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #8fa4b8;
  font-size: 10px;
}
.diamond-payer-input {
  width: 100%;
  min-width: 0;
  background: #101822;
  border: 1px solid rgba(80, 170, 220, 0.3);
  border-radius: 5px;
  color: #eaf6ff;
  font-size: 11px;
  padding: 6px;
}
.diamond-payer-input:focus {
  outline: none;
  border-color: #2aa9e0;
}
.diamond-payer-note {
  grid-column: 1 / -1;
  color: #6f8498;
  font-size: 10px;
  line-height: 1.4;
}
.diamond-payer-note.ok {
  color: #4ade80;
}
.diamond-provider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.diamond-provider-label {
  color: #9fb3c8;
  font-size: 12px;
}
.diamond-provider {
  background: #101822;
  border: 1px solid rgba(80, 170, 220, 0.45);
  border-radius: 6px;
  color: #eaf6ff;
  padding: 6px 8px;
  font-size: 12px;
}
.diamond-msg {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.35;
  margin-bottom: 10px;
  color: #cfe0ee;
  background: rgba(255, 255, 255, 0.04);
}
.diamond-msg.ok {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.28);
}
.diamond-msg.err {
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.28);
}
.diamond-packs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.diamond-pack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(16, 24, 34, 0.88);
}
.diamond-pack.featured {
  border-color: rgba(79, 214, 230, 0.55);
  background: rgba(24, 48, 62, 0.72);
}
.diamond-pack-top {
  display: flex;
  align-items: center;
  gap: 7px;
}
.diamond-pack-art {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
}
.diamond-pack-amount {
  color: #cbeaff;
  font-size: 21px;
  font-weight: 900;
}
.diamond-pack-bonus {
  color: #4ade80;
  font-size: 11px;
  font-weight: 800;
}
.diamond-pack-name {
  color: #d8e6f2;
  font-size: 12px;
  font-weight: 700;
}
.diamond-pack-price {
  color: #ffd166;
  font-size: 15px;
  font-weight: 800;
  margin-top: 2px;
}
.diamond-buy {
  margin-top: 8px;
  border: 1px solid rgba(56, 189, 248, 0.6);
  border-radius: 6px;
  background: linear-gradient(180deg, #1b7fb5, #135f8c);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 8px 10px;
  cursor: pointer;
}
.diamond-buy:hover:not(:disabled) {
  background: linear-gradient(180deg, #2499d4, #176f9f);
}
.diamond-buy:disabled {
  opacity: 0.6;
  cursor: wait;
}
.diamond-empty {
  color: #8fa4b8;
  font-size: 12px;
  padding: 6px 0;
}
.diamond-wait {
  border: 1px solid rgba(250, 204, 21, 0.3);
  background: rgba(250, 204, 21, 0.07);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.diamond-wait-text {
  color: #d8e6f2;
  font-size: 12px;
  line-height: 1.4;
}
.diamond-wait-link {
  display: inline-block;
  color: #7ad0ff;
  font-size: 12px;
  font-weight: 700;
  margin-top: 6px;
}
.diamond-wait-pulse {
  color: #ffd166;
  font-size: 11px;
  margin-top: 6px;
}
.diamond-section-title {
  color: #8fa4b8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.diamond-order {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11.5px;
}
.diamond-order-name {
  color: #d8e6f2;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diamond-order-diamonds {
  color: #4ade80;
  font-weight: 800;
}
.diamond-order-price {
  color: #9fb3c8;
}
.diamond-order-status {
  font-weight: 800;
  color: #9fb3c8;
}
.diamond-order-status.paid {
  color: #4ade80;
}
.diamond-order-status.failed,
.diamond-order-status.canceled,
.diamond-order-status.expired,
.diamond-order-status.chargeback {
  color: #fca5a5;
}
.diamond-order-status.pending {
  color: #ffd166;
}
.diamond-order-status.partially_refunded {
  color: #fbbf24;
}
.diamond-order-cancel {
  border-color: rgba(248, 113, 113, 0.45);
  color: #fca5a5;
}
.diamond-order-cancel:hover {
  background: rgba(248, 113, 113, 0.14);
  border-color: #fca5a5;
}
.diamond-order-details {
  background: transparent;
  border: 1px solid rgba(80, 170, 220, 0.35);
  border-radius: 5px;
  color: #8fd3ff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 3px 7px;
}
.diamond-order-details:hover {
  background: rgba(42, 169, 224, 0.14);
  border-color: #2aa9e0;
}
.diamond-order-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.diamond-order-pay {
  background: rgba(42, 169, 224, 0.16);
  border: 1px solid rgba(80, 170, 220, 0.45);
  border-radius: 5px;
  color: #8fd3ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 3px 7px;
  text-decoration: none;
}
.diamond-order-pay:hover {
  background: rgba(42, 169, 224, 0.28);
  border-color: #2aa9e0;
}
@media (max-width: 640px) {
  .diamond-packs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .diamond-payer-grid {
    grid-template-columns: 1fr;
  }
  .diamond-order {
    grid-template-columns: 1fr auto auto auto;
  }
  .diamond-order-price {
    display: none;
  }
}

/* A aba MERCADO do painel de ADMIN (gráficos + tabelas) */
.adm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
  padding: 4px 0 8px;
}
.adm-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
}
.adm-card.ok {
  border-color: rgba(74, 222, 128, 0.35);
  background: rgba(74, 222, 128, 0.07);
}
.adm-card-v {
  font-size: 16px;
  font-weight: 800;
  color: var(--phw-text-primary);
}
.adm-card-l {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--phw-text-muted);
}
.adm-chart {
  width: 100%;
  height: 118px;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  margin-bottom: 4px;
}
.adm-bar {
  fill: rgba(6, 182, 212, 0.75);
}
.adm-bar-ok {
  fill: rgba(74, 222, 128, 0.7);
}
.adm-bar-fee {
  fill: rgba(250, 204, 21, 0.7);
}
.adm-bar-label {
  fill: rgba(221, 221, 238, 0.55);
  font-size: 9px;
}
.adm-hbar {
  display: grid;
  grid-template-columns: 130px 1fr 220px;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  padding: 2px 0;
}
.adm-hbar-label {
  color: var(--phw-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-hbar-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.adm-hbar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(6, 182, 212, 0.9), rgba(56, 189, 248, 0.7));
}
.adm-hbar-fill.phw {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.9), rgba(147, 197, 253, 0.7));
}
.adm-hbar-fill.fee {
  background: linear-gradient(90deg, rgba(250, 204, 21, 0.9), rgba(253, 224, 71, 0.6));
}
.adm-hbar-val {
  color: var(--phw-text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.adm-subtabs {
  margin-top: 8px;
}
.adm-mtable {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  max-height: 34vh;
  overflow-y: auto;
  overflow-x: auto;
}
.adm-mhead,
.adm-mrow {
  display: grid;
  gap: 6px;
  padding: 6px 10px;
  align-items: baseline;
  font-size: 11px;
  min-width: 660px;
}
.adm-mhead {
  background: rgba(6, 182, 212, 0.08);
  color: var(--phw-accent);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
  position: sticky;
  top: 0;
}
.adm-mrow {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.adm-who {
  color: var(--phw-accent);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-mut {
  color: var(--phw-text-muted);
}
.adm-money {
  color: #4ade80;
  font-variant-numeric: tabular-nums;
}
.adm-coins {
  color: #38bdf8;
  font-variant-numeric: tabular-nums;
}

/* A aba ANOMALIAS (segurança) do admin */
.adm-bar-bad {
  fill: rgba(248, 113, 113, 0.75);
}
.adm-hbar-fill.bad {
  background: linear-gradient(90deg, rgba(248, 113, 113, 0.9), rgba(252, 165, 165, 0.6));
}
.adm-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 44vh;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 8px 10px;
}
.adm-form-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 8px;
  align-items: center;
}
.adm-form-label {
  font-size: 11px;
  color: var(--phw-text-secondary);
}
.adm-form-row .admin-search {
  width: 100%;
}


/* A TELA DE RECONEXÃO/OFFLINE TRAVA A INTERFACE: enquanto o lock estiver
   ligado (body.game-locked), o overlay do AFK sobe acima de QUALQUER modal
   aberto e cobre os cliques; as teclas de jogo já são barradas no hub.js. */
body.game-locked .afk-overlay {
  z-index: 4000;
}
body.game-locked #topbar,
body.game-locked #main-stage,
body.game-locked #session-side-root {
  pointer-events: none;
}

/* ── O ADMIN reformulado (tokens: 1 raio, 1 borda, 1 acento) ───────────── */
.adm-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 2px 0 8px;
}
.adm-tools .admin-search {
  flex: 1;
  min-width: 180px;
}
.adm-chips {
  display: flex;
  gap: 6px;
}
.adm-chip {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: var(--phw-text-secondary);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 150ms, color 150ms, background 150ms;
}
.adm-chip:hover {
  border-color: var(--phw-accent);
  color: var(--phw-accent);
}
.adm-chip.on {
  border-color: var(--phw-accent);
  color: #06121a;
  background: var(--phw-accent);
}
/* A tabela zebrada dos personagens */
.adm-table {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  overflow: hidden;
  max-height: 46vh;
  overflow-y: auto;
}
.adm-thead,
.adm-trow {
  display: grid;
  grid-template-columns: 48px minmax(160px, 1fr) 90px 110px 110px;
  gap: 8px;
  align-items: center;
  padding: 7px 12px;
}
.adm-thead {
  position: sticky;
  top: 0;
  background: rgba(6, 182, 212, 0.08);
  color: var(--phw-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.adm-trow {
  font-size: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 150ms;
}
.adm-trow:nth-child(even) {
  background: rgba(255, 255, 255, 0.025); /* a zebra */
}
.adm-trow:hover {
  background: rgba(6, 182, 212, 0.07);
}
.adm-tnum {
  color: var(--phw-text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.adm-tname {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--phw-text-primary);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}
.adm-dot.on {
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
}
.adm-tlv {
  color: var(--phw-text-secondary);
  font-variant-numeric: tabular-nums;
}
.adm-tstatus {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--phw-text-muted);
}
.adm-tstatus.on {
  color: #4ade80;
}
.adm-tact {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(6, 182, 212, 0.4);
  background: rgba(6, 182, 212, 0.1);
  color: var(--phw-accent);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms, transform 150ms;
}
.adm-tact:hover {
  background: rgba(6, 182, 212, 0.22);
  transform: translateY(-1px);
}
.adm-empty {
  padding: 20px;
  text-align: center;
  color: var(--phw-text-muted);
  font-size: 12px;
  font-style: italic;
}
.adm-pager {
  justify-content: center;
  padding-top: 8px;
}
/* Os comandos (a aba COMANDOS) */
.adm-cmds {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* O cabeçalho do IDLE OFFLINE: título + ATUALIZAR (relê kills/XP na hora). */
.adm-idle-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.adm-idle-head .idle-hunt-section {
  flex: 1;
  min-width: 0;
}
.adm-idle-head .adm-refresh {
  flex: 0 0 auto;
  padding: 3px 10px;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.adm-idle-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.adm-idle-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}
.adm-idle-thumb .poke-art {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.adm-cmd-head {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--phw-accent);
  padding: 10px 2px 2px;
}
.adm-cmd {
  display: grid;
  grid-template-columns: 132px minmax(140px, 1fr) 150px 96px;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 150ms, background 150ms;
}
.adm-cmd:hover {
  border-color: rgba(6, 182, 212, 0.35);
  background: rgba(6, 182, 212, 0.05);
}
.adm-cmd.danger {
  border-color: rgba(248, 113, 113, 0.28);
}
.adm-cmd.danger:hover {
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(248, 113, 113, 0.06);
}
.adm-cmd-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--phw-accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-cmd.danger .adm-cmd-name {
  color: #f87171;
}
.adm-cmd-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.adm-cmd-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--phw-text-primary);
}
.adm-cmd-desc {
  font-size: 11px;
  color: var(--phw-text-muted);
  /* A descrição inteira (sem reticências): quebra em até 2 linhas. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.adm-cmd-param {
  min-height: 30px;
  padding: 4px 8px;
  background: var(--phw-bg-dark);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 8px;
  color: var(--phw-text-primary);
  font-size: 12px;
  width: 100%;
  box-sizing: border-box;
}
.adm-cmd-noparam {
  color: var(--phw-text-muted);
  font-size: 12px;
  text-align: center;
}
.adm-danger {
  border-color: rgba(248, 113, 113, 0.5) !important;
  color: #f87171 !important;
}
.adm-note {
  margin-top: 10px;
  padding: 8px 10px;
  border-left: 2px solid var(--phw-accent);
  background: rgba(6, 182, 212, 0.05);
  border-radius: 6px;
  font-size: 11px;
  color: var(--phw-text-secondary);
}

/* O prompt próprio do admin (substitui o window.prompt) */
.adm-ask {
  width: min(420px, 92vw);
}
.adm-ask-body {
  padding: 4px 2px 10px;
}
.adm-ask-body .admin-search {
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
}
.adm-ask-acts {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* As AÇÕES do jogador (a mesma linguagem dos comandos, 2 colunas) */
.adm-act {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 110px;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 150ms, background 150ms;
}
.adm-act:hover {
  border-color: rgba(6, 182, 212, 0.35);
  background: rgba(6, 182, 212, 0.05);
}
.adm-act.danger {
  border-color: rgba(248, 113, 113, 0.28);
}
.adm-act.danger:hover {
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(248, 113, 113, 0.06);
}
.adm-act .admin-cmd-run {
  width: 100%;
}

/* O HISTÓRICO do Pokémon (a linha do tempo da ball) */
.phist {
  width: min(680px, 96vw);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
}
.phist-title-sub {
  color: var(--phw-accent);
  font-weight: 700;
}
.phist-body {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px;
}
.phist-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.phist-art {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
}
.phist-art img {
  max-width: 46px;
  max-height: 46px;
  image-rendering: pixelated;
}
.phist-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.phist-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--phw-text-primary);
}
.phist-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--phw-text-secondary);
  flex-wrap: wrap;
}
.phist-sep {
  color: var(--phw-text-muted);
}
.phist-uid {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--phw-text-muted);
}
.phist-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 8px 10px;
}
.phist-row {
  display: grid;
  grid-template-columns: 128px 150px 1fr;
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.phist-row:last-child {
  border-bottom: 0;
}
.phist-when {
  color: var(--phw-text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.phist-ev {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--phw-text-muted);
  justify-self: start;
}
.phist-ev-ok {
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.08);
}
.phist-ev-acc {
  color: var(--phw-accent);
  border-color: rgba(6, 182, 212, 0.4);
  background: rgba(6, 182, 212, 0.08);
}
.phist-ev-warn {
  color: #facc15;
  border-color: rgba(250, 204, 21, 0.4);
  background: rgba(250, 204, 21, 0.08);
}
.phist-ev-bad {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.08);
}
.phist-text {
  color: var(--phw-text-secondary);
}
.phist-text b {
  color: var(--phw-text-primary);
}
.phist-empty {
  padding: 20px;
  text-align: center;
  color: var(--phw-text-muted);
  font-size: 12px;
  font-style: italic;
}
.phist-note {
  font-size: 11px;
  color: var(--phw-text-muted);
  border-left: 2px solid var(--phw-accent);
  background: rgba(6, 182, 212, 0.05);
  border-radius: 6px;
  padding: 6px 10px;
}


/* O histórico do Pokémon abre POR CIMA de qualquer modal (o bau, o time). */
.phist-overlay {
  z-index: 1500;
}

/* O DINHEIRO na troca (gold do banco + diamonds) */
.trade-money-row {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 4px 0;
}
.trade-money-input {
  flex: 1;
  min-width: 0;
  min-height: 30px;
  padding: 4px 8px;
  background: var(--phw-bg-dark);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 8px;
  color: var(--phw-text-primary);
  font-size: 12px;
}

/* O selo de GOD (a coroa) à esquerda do nome */
.god-badge {
  flex: 0 0 auto;
  color: #facc15;
  filter: drop-shadow(0 0 4px rgba(250, 204, 21, 0.6));
  vertical-align: -2px;
}
.phw-chat-name.is-admin .god-badge {
  margin-right: 4px;
}

/* A modal de hunts com a sidebar fica mais larga (as 5 colunas continuam). */
#hunts.dex-modal .idle-modal {
  width: min(1240px, 97vw) !important;
  max-width: 97vw;
}

/* O botão FILTROS e o popover de tipos (todas as abas). */
.hunts-filter-btn {
  flex: 0 0 auto;
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 10, 16, 0.9);
  color: #dde;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.hunts-filter-btn:hover { border-color: rgba(34, 211, 238, 0.55); color: #67e8f9; }
.hunts-filters {
  margin: -2px 0 8px;
  padding: 9px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 10, 15, 0.97);
}
.hunts-filters[hidden] { display: none; }
.hunts-filter-title {
  margin: 2px 0 5px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #8ea0b0;
}
.hunts-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 7px;
}
.hunts-chip {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--chip, #64748b) 55%, transparent);
  background: color-mix(in srgb, var(--chip, #64748b) 16%, transparent);
  color: #dfe9ef;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.hunts-chip.on {
  background: var(--chip, #22d3ee);
  color: #0b0e14;
  border-color: var(--chip, #22d3ee);
}
.hunts-filter-clear {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: #9fb0c0;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.hunts-filter-clear:hover { color: #f87171; border-color: rgba(248, 113, 113, 0.5); }

/* ── Hunts: abas laterais (Hunts / Outland / Expedições) ─────────────────── */
.hunts-shell {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.hunts-nav {
  flex: 0 0 150px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 10, 15, 0.75);
  align-self: flex-start;
}
.hunts-nav[hidden] { display: none; }
.hunts-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #9fb0c0;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hunts-nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #dfe9ef;
}
.hunts-nav-item.on {
  background: rgba(34, 211, 238, 0.1);
  border-color: rgba(34, 211, 238, 0.55);
  color: #67e8f9;
  box-shadow: inset 3px 0 0 #22d3ee;
}
.hunts-nav-ico {
  display: inline-flex;
  color: inherit;
}
.hunts-content {
  flex: 1 1 auto;
  min-width: 0;
}

/* A barra de ranks das expedições (RANK 1/2 + 3–5 em breve). */
.hunts-ranks {
  display: flex;
  gap: 5px;
  margin-bottom: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hunts-ranks[hidden] { display: none; }
.hunts-rank {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(12, 14, 20, 0.85);
  color: #9fb0c0;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.hunts-rank:hover:not(:disabled) { border-color: rgba(34, 211, 238, 0.5); color: #cfeeff; }
.hunts-rank.on {
  border-color: #22d3ee;
  background: rgba(34, 211, 238, 0.14);
  color: #67e8f9;
}
.hunts-rank:disabled { opacity: 0.5; cursor: default; }
.hunts-rank-lock {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.14);
  color: #facc15;
  font-size: 9.5px;
}
.hunts-rank-soon {
  font-size: 8.5px;
  font-weight: 700;
  color: #7c8894;
}
/* Os cards das abas especiais ganham um aro dourado discreto. */
.hunt-card-tier {
  border-color: rgba(250, 204, 21, 0.35);
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.08) inset;
}
.hunts-region[hidden] { display: none; }

/* A modal de hunts é FLAT: a seção é SÓ o overlay. O `.dex` deixa fundo,
   borda e raio próprios de card — aqui eles são zerados (era o "card sem
   serventia" atrás da modal). */
section.dex.dex-modal {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  /* SEM dim: a modal flutua sobre o jogo. */
  background: transparent !important;
}
#hunts.dex-modal .idle-modal {
  width: min(1240px, 97vw) !important;
  max-width: 97vw;
  min-width: 0;
}
#hunts .hunts-shell, #hunts .hunts-content, #hunts .hunts-body {
  min-width: 0;
}
#hunts .hunts-content, #hunts .hunts-body {
  max-height: calc(90vh - 110px);
  overflow-y: auto;
}

/* A seção-overlay ocupa a TELA INTEIRA (com auto ela herdava 700px do .dex
   e o fundo 0.6 virava um card translúcido atrás da modal). */
section.dex.dex-modal {
  width: 100vw !important;
  height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  /* SEM dim: a modal flutua sobre o jogo. */
  background: transparent !important;
}
#hunts.dex-modal .idle-modal {
  width: min(1240px, 97vw) !important;
  max-width: none !important;
  max-height: 92vh;
  min-width: 0;
}

/* Centralização vertical explícita da modal de hunts (o margin:auto no flex
   item vence qualquer offset do conteúdo). */
#hunts.dex-modal {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#hunts.dex-modal .idle-modal {
  margin: auto !important;
  max-height: 90vh;
}

/* O display flex !important não pode vencer o [hidden]: no boot a modal fica
   FECHADA (antes ela reaparecia logo após o F5). */
#hunts.dex-modal[hidden],
#hunts.dex-modal[hidden] .idle-modal {
  display: none !important;
}

/* A modal de hunts no padrão do mercado: a seção é só um contêiner invisível
   e o overlay próprio fica escondido até o render(). */
#hunts.hunts-root {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.hunts-overlay .hunts-modal {
  width: min(1240px, 97vw);
  max-height: 90vh;
}
.hunts-overlay[hidden] { display: none !important; }

/* O overlay da modal de hunts: POSIÇÃO EXPLÍCITA. Sem o fixed ele ficava no
   fluxo com altura 0 e a modal centralizava na linha zero (top negativo,
   fora da tela). */
#hunts .hunts-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 4000 !important;
  background: transparent !important;
}
#hunts .hunts-overlay[hidden] {
  display: none !important;
}
#hunts .hunts-overlay .hunts-modal {
  width: min(1240px, 97vw) !important;
  max-width: 97vw !important;
  max-height: 90vh;
  flex: 0 0 auto;
  margin: 0 !important;
}

/* Dex/Capturas (addModalChrome): o fundo meio transparente do mercado. */
section.dex.dex-modal {
  background: rgba(0, 0, 0, 0.6) !important;
}

/* Modal de hunts: ALTURA FIXA — o miolo rola e o footer fica sempre visível. */
.hunts-modal {
  display: flex !important;
  flex-direction: column;
  overflow: hidden !important;
}
.hunts-modal .hunts-shell {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.hunts-modal .hunts-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.hunts-modal .hunts-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.hunts-modal .idle-modal-head,
.hunts-modal .idle-modal-foot {
  flex: 0 0 auto;
}
/* Cards um pouco menores: 6 por linha em telas largas, 5 no aperto. */
.hunts-modal .hunt-cards {
  gap: 5px;
}

/* Dex/Capturas/Mochila (addModalChrome): a seção-overlay ocupa a TELA toda.
   Com a largura/altura herdadas do .dex o flex centralizava numa caixa de
   700px e a modal ficava baixa/deslocada. */
section.dex.dex-modal {
  width: 100vw !important;
  height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  background: rgba(0, 0, 0, 0.6) !important;
}
section.dex.dex-modal > .idle-modal {
  margin: auto !important;
  max-height: 90vh;
}

/* Tooltip rico do inventário (item/pokémon): categoria, preço, captura e qtd. */
.inv-tip {
  position: fixed;
  z-index: 2000;
  min-width: 220px;
  max-width: 300px;
  background: linear-gradient(180deg, rgba(18, 25, 36, 0.98), rgba(10, 15, 22, 0.98));
  border: 1px solid rgba(80, 170, 220, 0.45);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
  color: #c9d6e2;
  font-size: 12px;
  pointer-events: none;
}
.inv-tip-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 7px;
}
.inv-tip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 3px 0;
}
.inv-tip-row .k {
  color: #8a99a8;
}
.inv-tip-row .v {
  color: #4fc3f7;
  font-weight: 700;
  text-align: right;
}
.inv-tip-row .v.green {
  color: #4ade80;
}
.inv-tip-row .v.gold {
  color: #e0a33a;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.inv-tip-row .v img {
  width: 14px;
  height: 14px;
  image-rendering: pixelated;
}
.inv-tip-desc {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #a9bac9;
  font-size: 11.5px;
  line-height: 1.35;
}
.inv-tip-sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 7px 0 3px;
}

/* Pokédex: linhas ainda não vistas e o aviso de novo registro. */
.dex2-row.dex2-locked {
  opacity: 0.55;
  cursor: pointer;
}
.dex2-row.dex2-locked .nm {
  color: var(--phw-text-muted, #889);
  letter-spacing: 0.12em;
}
.dex2-unknown {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 320px;
  padding: 32px 24px;
  text-align: center;
}
.dex2-unknown-mark {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(6, 182, 212, 0.45);
  border-radius: 50%;
  color: var(--phw-accent, #06b6d4);
  font-size: 1.25rem;
  font-weight: 800;
}
.dex2-unknown-text {
  max-width: 42ch;
  color: var(--phw-text-muted, #889);
  line-height: 1.5;
}
.dex-unlock-toast {
  position: fixed;
  left: 50%;
  bottom: 10vh;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 300px;
  max-width: min(460px, 92vw);
  padding: 14px 20px 14px 14px;
  border: 1px solid rgba(6, 182, 212, 0.65);
  border-radius: 12px;
  background: linear-gradient(135deg, #0b1b26f2, #10131af2);
  box-shadow: 0 0 0 1px #06b6d41f, 0 12px 40px #000c, 0 0 28px #06b6d44d;
  color: var(--phw-text-primary, #e8ecf5);
  opacity: 0;
  transform: translate(-50%, 24px) scale(0.96);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.dex-unlock-toast.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.dex-unlock-art {
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 12px #06b6d480);
}
.dex-unlock-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--phw-accent, #06b6d4);
  line-height: 1.35;
}
.dex-unlock-text strong {
  font-size: 20px;
  color: var(--phw-text-primary, #fff);
  letter-spacing: 0.02em;
}

/* X1: convite, contagem e resultado. */
.duel-overlay[hidden],
.duel-countdown[hidden] {
  display: none !important;
}
.duel-overlay {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.62);
}
.duel-modal {
  width: min(440px, 94vw);
  padding: 22px 24px;
  border: 1px solid rgba(239, 68, 68, 0.55);
  border-radius: 12px;
  background: linear-gradient(160deg, #1b1014f5, #0c1018f5);
  box-shadow: 0 18px 60px #000d, 0 0 30px #ef444433;
  text-align: center;
  color: var(--phw-text-primary, #e8ecf5);
}
.duel-kicker {
  color: #ef4444;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
}
.duel-title {
  margin: 8px 0 6px;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
}
.duel-text {
  color: var(--phw-text-muted, #9aa);
  font-size: 13px;
  line-height: 1.55;
}
.duel-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}
.duel-btn {
  min-width: 120px;
  min-height: 42px;
  padding: 0 18px;
  border: var(--phw-border-secondary, 1px solid #ffffff1f);
  border-radius: 8px;
  background: #ffffff0d;
  color: var(--phw-text-primary, #e8ecf5);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.duel-btn:hover {
  border-color: var(--phw-accent, #06b6d4);
  color: var(--phw-accent, #06b6d4);
}
.duel-btn-accept {
  border-color: #22c55e;
  background: #22c55e1a;
  color: #4ade80;
}
.duel-btn-accept:hover {
  border-color: #4ade80;
  color: #4ade80;
}
.duel-countdown {
  position: fixed;
  left: 50%;
  top: 16vh;
  z-index: 2500;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 28px 12px;
  border: 1px solid rgba(239, 68, 68, 0.65);
  border-radius: 10px;
  background: #0c0f16e6;
  box-shadow: 0 0 24px #ef44444d;
  pointer-events: none;
}
.duel-count-kicker {
  color: #ef4444;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
}
.duel-count-num {
  color: #fff;
  font-size: clamp(30px, 5vw, 54px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 18px #ef4444aa;
}
.duel-count-hint {
  color: var(--phw-text-muted, #9aa);
  font-size: 11px;
}
.duel-result {
  position: fixed;
  left: 50%;
  bottom: 11vh;
  z-index: 2700;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 30px;
  border: 1px solid rgba(239, 68, 68, 0.65);
  border-radius: 10px;
  background: #0c0f16f2;
  box-shadow: 0 12px 42px #000c;
  opacity: 0;
  transform: translate(-50%, 20px);
  transition: 0.35s ease;
  pointer-events: none;
}
.duel-result.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.duel-result-kicker {
  color: #ef4444;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.duel-result-text {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}
.duel-result-reason {
  color: var(--phw-text-muted, #9aa);
  font-size: 11px;
}

/* ── Central de Mensagens (menu_mensagem_*.png) ───────────────────────── */
.messages-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff4d6d;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 0 0 2px rgba(8, 12, 18, 0.9);
  pointer-events: none;
}
#messages-btn { position: relative; }

.msg-overlay {
  position: fixed;
  inset: 0;
  z-index: 340;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 8, 12, 0.82);
  backdrop-filter: blur(3px);
}
.msg-overlay[hidden] { display: none; }
.msg-box {
  width: min(1020px, 96vw);
  height: min(720px, 88vh);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(9, 17, 24, 0.98), rgba(6, 12, 18, 0.98));
  border: 1px solid rgba(100, 220, 240, 0.22);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  color: #d9e6ee;
  overflow: hidden;
}
.msg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.msg-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.22em;
  color: #6fe3f2;
  text-shadow: 0 0 22px rgba(80, 220, 240, 0.28);
}
.msg-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #b9c7d1;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.msg-close:hover { color: #fff; border-color: rgba(120, 230, 245, 0.6); }
.msg-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.015);
}
.msg-tabs { display: flex; align-items: center; gap: 2px; flex: 1; overflow-x: auto; }
.msg-tab {
  position: relative;
  padding: 12px 13px 10px;
  border: 0;
  background: transparent;
  color: #7d8e9b;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  cursor: pointer;
  white-space: nowrap;
}
.msg-tab:hover { color: #cfeef5; }
.msg-tab.on { color: #6fe3f2; }
.msg-tab.on::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: #55d7e8;
  box-shadow: 0 0 12px rgba(80, 220, 240, 0.65);
}
.msg-primary {
  border: 1px solid rgba(80, 210, 230, 0.45);
  border-radius: 9px;
  padding: 9px 15px;
  background: linear-gradient(180deg, rgba(30, 120, 140, 0.35), rgba(12, 45, 60, 0.45));
  color: #bff6ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
}
.msg-primary:hover { background: rgba(50, 170, 190, 0.28); border-color: #6fe3f2; }
.msg-primary:disabled { opacity: 0.55; cursor: default; }
.msg-new { flex: 0 0 auto; }

.msg-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  min-height: 0;
  flex: 1;
}
.msg-list {
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(4, 10, 14, 0.35);
}
.msg-item {
  width: 100%;
  display: flex;
  gap: 11px;
  text-align: left;
  font: inherit;
  padding: 11px 12px;
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.025);
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.msg-item:hover { border-color: rgba(90, 210, 230, 0.35); background: rgba(80, 210, 230, 0.055); }
.msg-item.on {
  border-color: rgba(90, 220, 240, 0.75);
  background: linear-gradient(180deg, rgba(40, 145, 165, 0.2), rgba(20, 70, 85, 0.16));
  box-shadow: 0 0 0 1px rgba(90, 220, 240, 0.14), 0 6px 22px rgba(0, 0, 0, 0.25);
}
.msg-avatar {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: radial-gradient(circle at 35% 30%, rgba(60, 180, 200, 0.25), rgba(9, 30, 40, 0.65));
  color: #86e7f4;
}
.msg-avatar[data-kind='market'] { color: #ffd36e; border-color: rgba(255, 210, 100, 0.25); background: radial-gradient(circle at 35% 30%, rgba(180, 130, 30, 0.25), rgba(40, 28, 8, 0.7)); }
.msg-avatar[data-kind='capture'] { color: #ff9b8d; border-color: rgba(255, 150, 130, 0.25); background: radial-gradient(circle at 35% 30%, rgba(180, 60, 50, 0.25), rgba(45, 14, 12, 0.7)); }
.msg-avatar[data-kind='boss'] { color: #ffb3ff; border-color: rgba(220, 120, 255, 0.3); background: radial-gradient(circle at 35% 30%, rgba(140, 40, 180, 0.3), rgba(34, 10, 50, 0.7)); }
.msg-avatar[data-kind='guild'] { color: #8fe7a2; border-color: rgba(100, 220, 130, 0.28); background: radial-gradient(circle at 35% 30%, rgba(30, 150, 70, 0.25), rgba(8, 34, 18, 0.7)); }
.msg-avatar[data-kind='mission'] { color: #ffd36e; }
.msg-avatar-mail {
  color: #9cd9ff;
  font-weight: 900;
  font-size: 15px;
  background: radial-gradient(circle at 35% 30%, rgba(40, 100, 180, 0.35), rgba(8, 20, 44, 0.8));
}
.msg-ico svg { width: 19px; height: 19px; display: block; }
.msg-item-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.msg-item-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.msg-item-sender { font-size: 11.5px; font-weight: 900; color: #eaf7fb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-unread-dot { width: 7px; height: 7px; border-radius: 50%; background: #5fe1f2; box-shadow: 0 0 8px rgba(90, 225, 245, 0.9); flex: 0 0 auto; }
.msg-item-time { margin-left: auto; flex: 0 0 auto; font-size: 9.5px; color: #667986; }
.msg-item-subject { font-size: 11.5px; font-weight: 800; color: #d3e7ee; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-item-preview { font-size: 10.5px; color: #7f929e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-item.unread .msg-item-subject { color: #fff; }
.msg-item.unread .msg-item-sender { color: #6fe3f2; }
.msg-unread { }

.msg-detail {
  min-height: 0;
  overflow-y: auto;
  padding: 26px 30px 20px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.msg-detail-sender {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  color: #48d7ea;
  letter-spacing: 0.03em;
}
.msg-detail-sender .msg-ico svg { width: 16px; height: 16px; }
.msg-detail-sender[data-kind='market'] { color: #ffd36e; }
.msg-detail-sender[data-kind='capture'] { color: #ff9b8d; }
.msg-detail-sender[data-kind='boss'] { color: #ffb3ff; }
.msg-detail-sender[data-kind='guild'] { color: #8fe7a2; }
.msg-detail-subject {
  margin: 8px 0 5px;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.01em;
}
.msg-detail-meta { display: flex; flex-wrap: wrap; gap: 5px; font-size: 10.5px; color: #7d929e; margin-bottom: 18px; }
.msg-expires { color: #9aa7b0; }
.msg-detail-body { font-size: 12.5px; line-height: 1.65; color: #b9cbd4; margin: 0 0 12px; white-space: pre-wrap; }
.msg-section-title { margin: 20px 0 8px; font-size: 10.5px; font-weight: 900; letter-spacing: 0.12em; color: #52d7e8; }
.msg-bullets { margin: 0; padding-left: 19px; color: #b9cbd4; font-size: 12.5px; line-height: 1.65; }
.msg-bullets li { margin-bottom: 8px; }
.msg-bullets strong { color: #eaf7fb; }

.msg-attach {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 9px 12px;
  margin: 10px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 210px;
  overflow-y: auto;
}
.msg-attach-inline { flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 7px 10px; }
.msg-attach-row { display: flex; align-items: center; gap: 9px; min-height: 30px; }
.msg-attach-sprite { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; }
.msg-attach-name { font-size: 12px; color: #d6e6ed; font-weight: 700; }
.msg-chip { padding: 4px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); color: #b9cbd4; font-size: 10.5px; font-weight: 700; }
.msg-chip-coin { display: inline-flex; align-items: center; gap: 4px; color: #ffd36e; }
.msg-chip-coin img { width: 13px; height: 13px; image-rendering: pixelated; }

.msg-detail-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.msg-link {
  border: 0;
  background: transparent;
  color: #8fa4b0;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
}
.msg-link:hover { color: #bfeef6; }
.msg-link.on { color: #ffd36e; }
.msg-link.danger { margin-left: auto; color: #ff8793; }
.msg-empty { padding: 34px 18px; text-align: center; color: #7d929e; font-size: 12px; }

/* Updates */
.msg-update-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  font: inherit;
  padding: 13px 14px;
  margin-bottom: 9px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.025);
  color: inherit;
  cursor: pointer;
}
.msg-update-card:hover { border-color: rgba(90, 210, 230, 0.35); }
.msg-update-card.on { border-color: rgba(90, 220, 240, 0.75); background: rgba(40, 145, 165, 0.16); }
.msg-update-version { font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; color: #48d7ea; text-transform: uppercase; }
.msg-update-title { font-size: 13px; font-weight: 900; color: #eaf7fb; }
.msg-update-preview { font-size: 10.5px; line-height: 1.45; color: #7f929e; }

/* Composição */
.msg-compose { display: flex; flex-direction: column; gap: 6px; }
.msg-label { margin-top: 8px; font-size: 9.5px; font-weight: 900; letter-spacing: 0.1em; color: #68808d; }
.msg-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.28);
  color: #eaf7fb;
  font: inherit;
  font-size: 12px;
  outline: none;
}
.msg-input:focus { border-color: rgba(90, 220, 240, 0.6); box-shadow: 0 0 0 2px rgba(70, 200, 220, 0.1); }
.msg-textarea { min-height: 170px; resize: vertical; line-height: 1.55; }
.msg-compose-msg { margin-top: 10px; font-size: 11px; color: #ffd36e; }

/* HISTÓRICO ocupa a modal inteira. */
.msg-history { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 20px; }
.msg-history .hunts-table { max-height: none; }
.msg-history-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.msg-history-title { font-weight: 900; color: #8feef8; letter-spacing: 0.06em; }
.msg-history .hunt-summary { margin-top: 12px; }

@media (max-width: 760px) {
  .msg-box { height: 92vh; }
  .msg-layout { grid-template-columns: 1fr; grid-template-rows: 42% 58%; }
  .msg-list { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .msg-detail { padding: 18px; }
  .msg-bar { flex-wrap: wrap; }
  .msg-new { order: -1; margin-left: auto; }
  .msg-tabs { order: 2; flex-basis: 100%; }
}

/* ── Card do treinador (layout do print infos_treinador_card_direita) ─── */
#trainer-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#tr-main {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
#tr-avatar-wrap {
  position: relative;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
}
#tr-avatar {
  width: 52px;
  height: 52px;
  border-radius: 9px;
  border: 1px solid rgba(90, 220, 240, 0.35);
  background: radial-gradient(circle at 50% 45%, rgba(60, 170, 190, 0.22), #0a0a0e 72%);
  image-rendering: pixelated;
}
.tr-avatar-hint {
  position: absolute;
  right: -4px;
  bottom: -4px;
  font-size: 11px;
  filter: drop-shadow(0 1px 2px #000);
  pointer-events: none;
}
#tr-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#tr-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
#tr-name {
  font-weight: 900;
  font-size: 12px;
  color: #f0f8ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tr-bless {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
  color: #7d929e;
  font-size: 10px;
  font-weight: 800;
}
.tr-bless b { font-size: 9.5px; font-weight: 900; }
.tr-bless.has { color: #ffd36e; border-color: rgba(255, 211, 110, 0.35); background: rgba(120, 90, 20, 0.16); }
#tr-hp-wrap {
  position: relative;
  height: 14px;
  margin-top: 0;
  border-radius: 5px;
  background: #0a0a0e;
  border: 1px solid rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
#tr-hp {
  height: 100%;
  background: linear-gradient(180deg, #62d86e, #2f9e3f);
}
#tr-hp-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  text-align: center;
}
#tr-vitals {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 18px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.tr-stamina-ico {
  color: #ff5a5a;
  font-size: 14px;
  line-height: 1;
  text-shadow: 0 0 8px rgba(255, 80, 80, 0.4);
}
.tr-balls { display: inline-flex; gap: 3px; align-items: center; }
.tr-ball {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
}
.tr-ball.on {
  background: #ff5a5a;
  border-color: #ff8a8a;
  box-shadow: 0 0 5px rgba(255, 80, 80, 0.55);
}
.tr-stamina {
  margin-left: auto;
  font-size: 10px;
  font-weight: 900;
  color: #d8e7ee;
  letter-spacing: 0.02em;
}
.tr-hunt-time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 2px 6px;
  font-size: 9.5px;
  color: #8fa4b0;
}
.tr-hunt-time b { color: #bff6ff; font-size: 10px; letter-spacing: 0.04em; }
.tr-hunt-time.low b { color: #ff9b9b; }
#tr-level-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
}
.tr-level-label {
  flex: 1;
  font-size: 10.5px;
  font-weight: 700;
  color: #8fa4b0;
}
#tr-level {
  font-size: 13px;
  font-weight: 900;
  color: #f0f8ff;
}
#tr-xp-wrap {
  height: 6px;
  margin-top: 0;
  border-radius: 3px;
  background: #0a0a0e;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
#tr-xp { background: #35c7dc; }
#tr-xp-line {
  display: block;
  max-width: 100%;
}
#tr-xptext {
  display: block;
  font-size: 9px;
  color: #7d929e;
  text-align: right;
  margin-top: 0;
}
.tr-xp-boost-row { margin-top: 3px; }

/* ── Clã no card + modal ─────────────────────────────────────────────── */
.tr-clan {
  --clan-color: #62e7f7;
  position: relative;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--clan-color) 55%, transparent);
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--clan-color) 22%, transparent), #080d12 72%);
  color: var(--clan-color);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  overflow: visible;
}
.tr-clan[hidden] { display: none; }
.tr-clan-icon {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  display: grid;
  place-items: center;
  text-shadow: 0 0 12px color-mix(in srgb, var(--clan-color) 55%, transparent);
}
.tr-clan-element {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--clan-color) 55%, transparent));
}
.tr-vip-days {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  text-align: center;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #ffd36e;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
  pointer-events: none;
}
.tr-vip-days[hidden] { display: none; }
.tr-clan-rank {
  position: absolute;
  right: -5px;
  bottom: -5px;
  padding: 1px 4px;
  border-radius: 5px;
  background: #071014;
  border: 1px solid color-mix(in srgb, var(--clan-color) 45%, transparent);
  color: var(--clan-color);
  font-size: 8px;
  font-weight: 900;
}
.tr-clan.invite { animation: clan-invite 1.5s ease-in-out infinite; }
.tr-clan.quests { animation: clan-quest 2.2s ease-in-out infinite; }
@keyframes clan-invite {
  0%, 100% { box-shadow: 0 0 0 0 rgba(98, 231, 247, 0.0); transform: scale(1); }
  50% { box-shadow: 0 0 0 5px rgba(98, 231, 247, 0.14), 0 0 24px rgba(98, 231, 247, 0.45); transform: scale(1.04); }
}
@keyframes clan-quest {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 211, 110, 0); }
  50% { box-shadow: 0 0 0 4px rgba(255, 211, 110, 0.14), 0 0 20px rgba(255, 211, 110, 0.35); }
}
.clan-box { width: min(760px, 96vw); max-height: 88vh; overflow-y: auto; }
.clan-title { color: #7fe9f7; }
.clan-head { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; }
.clan-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #061014;
  font-weight: 900;
  font-size: 16px;
}
.clan-mark-lg { width: 52px; height: 52px; font-size: 24px; }
.clan-name { font-size: 22px; font-weight: 900; color: #f0f8ff; }
.clan-elements { font-size: 10px; letter-spacing: 0.12em; color: #8fa4b0; text-transform: uppercase; }
.clan-rivals { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0 14px; }
.clan-label { font-size: 9px; font-weight: 900; letter-spacing: 0.1em; color: #68808d; text-transform: uppercase; }
.clan-rival { padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); font-size: 10px; font-weight: 800; color: #d7e8ef; }
.clan-section, .clan-exclusives, .clan-quests { border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 10px; padding: 11px 12px; margin-bottom: 10px; background: rgba(255, 255, 255, 0.02); }
.clan-section-title { font-size: 10px; font-weight: 900; letter-spacing: 0.1em; color: #7fe9f7; margin-bottom: 4px; }
.clan-bonus-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 11px; color: #b9cbd4; }
.clan-bonus-row b { color: #74e6a0; }
.clan-exclusives { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.clan-exclusive-card { padding: 9px; border-radius: 8px; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.07); display: flex; flex-direction: column; gap: 4px; }
.clan-exclusive-card b { color: #eaf7fb; font-size: 12px; }
.clan-owned { color: #74e6a0; font-size: 9.5px; }
.clan-locked { color: #7d929e; font-size: 9.5px; }
.clan-quest { padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.clan-quest:last-child { border-bottom: 0; }
.clan-quest-line { display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; margin-bottom: 4px; }
.clan-quest-label { color: #cfe0e8; }
.clan-quest-value { color: #8fa4b0; font-weight: 800; white-space: nowrap; }
.clan-quest.done .clan-quest-label { color: #74e6a0; }
.clan-quest-progress { height: 5px; border-radius: 999px; background: #0a0a0e; overflow: hidden; margin-bottom: 5px; }
.clan-quest-progress i { display: block; height: 100%; background: #35c7dc; }
.clan-quest-progress i.done { background: #74e6a0; }
.clan-quest .idle-config-btn { font-size: 9px; padding: 4px 9px; }
.clan-advance { width: 100%; margin-top: 4px; }
.clan-max { text-align: center; padding: 12px; border-radius: 9px; border: 1px solid rgba(255, 211, 110, 0.3); color: #ffd36e; font-weight: 800; background: rgba(255, 211, 110, 0.06); }
.clan-msg { padding: 6px 9px; border-radius: 7px; background: rgba(80, 220, 240, 0.08); border: 1px solid rgba(80, 220, 240, 0.2); color: #bff6ff; font-size: 10.5px; margin-bottom: 8px; }
.clan-lock { padding: 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); color: #8fa4b0; font-size: 11px; text-align: center; }
.clan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.clan-card { padding: 11px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); display: flex; flex-direction: column; gap: 6px; }
.clan-card-head { display: flex; align-items: center; gap: 8px; }
.clan-card-head b { color: #eaf7fb; }
.clan-card .clan-exclusive { font-size: 9.5px; color: #8fa4b0; }
.clan-card .idle-config-btn { margin-top: 2px; }
@media (max-width: 620px) {
  .clan-exclusives, .clan-grid { grid-template-columns: 1fr; }
}

/* ── TUTORIAIS ─────────────────────────────────────────────────────────────
   O motor fica em panels/tutorial.js. O overlay escurece tudo com um
   spotlight (box-shadow gigante no .tut-ring) e o cartão segue o alvo. */
.tut-overlay {
  position: fixed;
  inset: 0;
  z-index: 7000;
  pointer-events: auto;
  overflow: hidden;
}
.tut-overlay.tut-centered {
  background: rgba(3, 6, 10, 0.74);
}
.tut-ring {
  position: fixed;
  z-index: 1;
  border: 2px solid #4fd6e6;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(3, 6, 10, 0.74), 0 0 18px rgba(79, 214, 230, 0.55);
  transition: left 160ms ease, top 160ms ease, width 160ms ease, height 160ms ease;
  pointer-events: none;
}
.tut-ring[hidden] { display: none; }
.tut-ring::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(79, 214, 230, 0.5);
  border-radius: 14px;
  animation: tut-pulse 1.8s ease-out infinite;
}
@keyframes tut-pulse {
  0% { opacity: 0.9; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.035); }
  100% { opacity: 0; transform: scale(1.035); }
}
.tut-tip {
  position: fixed;
  z-index: 2;
  width: min(390px, calc(100vw - 20px));
  max-height: calc(100vh - 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 15px 13px;
  border: 1px solid rgba(79, 214, 230, 0.45);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(16, 26, 38, 0.98), rgba(8, 13, 20, 0.98));
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65), 0 0 24px rgba(6, 182, 212, 0.18);
  color: #d7e8ef;
  line-height: 1.5;
}
.tut-tip-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tut-kicker {
  color: #4fd6e6;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tut-counter {
  color: #8fa4b0;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tut-progress {
  height: 3px;
  margin: 8px 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.tut-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4fd6e6, #8be9f7);
  transition: width 180ms ease;
}
.tut-title {
  margin: 0 0 6px;
  color: #f1fbff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.tut-text {
  margin: 0;
  color: #b9cbd4;
  font-size: 12px;
  line-height: 1.55;
}
.tut-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.tut-links {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tut-link {
  padding: 0;
  border: 0;
  background: none;
  color: #8fa4b0;
  font: inherit;
  font-size: 10.5px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.tut-link:hover { color: #d7e8ef; }
.tut-link-danger { color: #f0a0a0; }
.tut-link-danger:hover { color: #ffd0d0; }
.tut-nav {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.tut-btn {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  color: #dde;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: filter 140ms ease, border-color 140ms ease, background 140ms ease;
}
.tut-btn:hover:not(:disabled) { border-color: rgba(79, 214, 230, 0.65); background: rgba(79, 214, 230, 0.12); }
.tut-btn:disabled { opacity: 0.4; cursor: default; }
.tut-btn-primary {
  border-color: #2bb9d0;
  background: linear-gradient(180deg, #33c6dd, #0e8fa5);
  color: #042026;
}
.tut-btn-primary:hover:not(:disabled) { filter: brightness(1.12); background: linear-gradient(180deg, #44d3e8, #149fb7); }
.tut-btn-ghost { color: #b9cbd4; }

/* O menu TUTORIAIS (mesmo chrome das modais do hub). */
.tut-menu-overlay { z-index: 6500; }
.tut-menu {
  width: min(760px, 94vw);
  max-height: 86vh;
}
.tut-menu-intro {
  margin: 2px 2px 12px;
  color: #9fb3c8;
  font-size: 12px;
  line-height: 1.5;
}
.tut-menu-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tut-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
}
.tut-card-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  border: 1px solid rgba(79, 214, 230, 0.3);
  background: rgba(79, 214, 230, 0.09);
  font-size: 21px;
  line-height: 1;
}
.tut-card-main {
  flex: 1 1 auto;
  min-width: 0;
}
.tut-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tut-card-title {
  margin: 0;
  color: #eaf7fb;
  font-size: 13px;
  font-weight: 800;
}
.tut-card-desc {
  margin: 3px 0 4px;
  color: #9fb3c8;
  font-size: 11px;
  line-height: 1.45;
}
.tut-card-meta {
  color: #6f8794;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.tut-status {
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #8fa4b0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tut-status-new { color: #7fe6f5; border-color: rgba(79, 214, 230, 0.4); background: rgba(79, 214, 230, 0.08); }
.tut-status-started { color: #ffd166; border-color: rgba(255, 209, 102, 0.35); background: rgba(255, 209, 102, 0.07); }
.tut-status-completed { color: #74e6a0; border-color: rgba(116, 230, 160, 0.35); background: rgba(116, 230, 160, 0.07); }
.tut-status-ignored { color: #8fa4b0; border-color: rgba(143, 164, 176, 0.28); background: rgba(143, 164, 176, 0.06); }
.tut-card-btn {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(79, 214, 230, 0.45);
  border-radius: 7px;
  background: rgba(79, 214, 230, 0.1);
  color: #7fe6f5;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.tut-card-btn:hover { background: rgba(79, 214, 230, 0.2); border-color: #4fd6e6; }
.tut-menu-note {
  margin: 11px 2px 0;
  color: #6f8794;
  font-size: 10px;
}
body.tut-running .inv-tip,
body.tut-running .party-tip {
  display: none !important;
}
@media (max-width: 560px) {
  .tut-card { flex-wrap: wrap; }
  .tut-card-main { flex-basis: calc(100% - 58px); }
  .tut-card-btn { width: 100%; }
  .tut-foot { align-items: flex-start; }
  .tut-nav { width: 100%; margin-left: 0; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  .tut-ring, .tut-progress i, .tut-btn { transition: none; }
  .tut-ring::after { animation: none; }
}
.tut-tip.tut-busy {
  opacity: 0.55;
  pointer-events: none;
}

/* ── Máquina de Boost no CP + modal ───────────────────────────────────── */
.cp-boost-machine {
  position: fixed;
  z-index: 25;
  transform: translate(-50%, -78%);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px 6px;
  border: 1px solid rgba(220, 235, 245, .35);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(235, 242, 248, .96), rgba(150, 165, 180, .92));
  box-shadow: 0 5px 14px rgba(0, 0, 0, .45), inset 0 0 8px rgba(255, 255, 255, .6);
  cursor: pointer;
}
.cp-boost-machine::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: -4px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .3);
  filter: blur(3px);
}
.cp-boost-pod {
  position: relative;
  width: 31px; height: 38px;
  border-radius: 11px;
  border: 2px solid #eff5fa;
  background: linear-gradient(180deg, #f8fbfd, #a7b5c2 70%, #74838f);
  box-shadow: inset -4px -5px 0 rgba(0, 0, 0, .16);
  display: grid;
  place-items: center;
}
.cp-boost-pod.right { transform: scaleX(-1); }
.cp-boost-pod .gem {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #efffff, #4ed7f2 42%, #0b7fa6 72%);
  border: 1px solid #d9fbff;
  box-shadow: 0 0 12px rgba(80, 230, 250, .85);
  display: block;
}
.cp-boost-pod.right .gem {
  background: radial-gradient(circle at 35% 30%, #fff6e8, #ffb35a 45%, #a14211 75%);
  box-shadow: 0 0 12px rgba(255, 160, 70, .8);
}
.cp-boost-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%);
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid rgba(90, 220, 240, .4);
  background: rgba(5, 15, 21, .96);
  color: #8feef8;
  font-size: 9.5px;
  font-weight: 800;
  white-space: nowrap;
  /* O tooltip também é clicável (o clique borbulha pro botão da máquina). */
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
}
.cp-boost-machine:hover .cp-boost-tip,
.cp-boost-machine:focus-visible .cp-boost-tip { opacity: 1; }
.cp-boost-machine:hover { filter: brightness(1.08); }
.cp-boost-machine:active { transform: translate(-50%, -74%) scale(.98); }

.boost-machine-box {
  width: min(780px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
}
.bm-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 6px 0 10px;
}
.bm-slot {
  min-height: 135px;
  padding: 10px;
  border: 1px dashed rgba(100, 230, 250, .25);
  border-radius: 9px;
  background: rgba(255, 255, 255, .02);
}
.bm-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bm-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  color: #64d9ea;
  text-transform: uppercase;
}
.bm-link {
  border: 0;
  background: transparent;
  color: #8fa4b0;
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}
.bm-link:hover { color: #dff8fd; }
.bm-poke {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: rgba(0, 0, 0, .16);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.bm-poke:hover, .bm-poke.on { border-color: rgba(90, 230, 250, .5); background: rgba(50, 170, 190, .12); }
.bm-poke.slot {
  border: 0;
  background: transparent;
  flex-direction: column;
  gap: 3px;
  padding-top: 0;
  cursor: default;
}
.bm-poke-art {
  width: 44px;
  height: 44px;
  object-fit: contain;
  image-rendering: pixelated;
  flex: 0 0 auto;
}
.bm-poke.slot .bm-poke-art { width: 58px; height: 58px; }
.bm-poke-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bm-poke-meta b { font-size: 10.5px; color: #eaf7fb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-poke-boost { font-size: 10px; color: #74e6a0; font-weight: 900; }
.bm-poke-loc { font-size: 8.5px; color: #7d929e; text-transform: uppercase; letter-spacing: .05em; }
.bm-poke.slot .bm-poke-meta { align-items: center; }
.bm-poke.slot .bm-poke-meta b { font-size: 11px; }
.bm-poke.slot .bm-poke-boost { font-size: 17px; }
.bm-empty {
  display: grid;
  place-items: center;
  min-height: 90px;
  color: #7d929e;
  font-size: 10.5px;
}
.bm-stone {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 7px;
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
}
.bm-stone img { width: 26px; height: 26px; image-rendering: pixelated; }
.bm-stone b { color: #ffd36e; font-size: 13px; }
.bm-stone span:last-child { color: #8fa4b0; font-size: 9px; }
.bm-note { margin-top: 6px; color: #7d929e; font-size: 9px; line-height: 1.45; }
.bm-preview {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(100, 230, 250, .18);
  background: rgba(60, 190, 210, .07);
  margin-bottom: 10px;
}
.bm-preview b { color: #dff8fd; font-size: 11px; }
.bm-preview span { color: #ffd36e; font-size: 10px; }
.bm-message {
  margin: 0 0 8px;
  padding: 7px 9px;
  border-radius: 7px;
  border: 1px solid rgba(90, 230, 250, .22);
  background: rgba(60, 190, 210, .08);
  color: #bff6ff;
  font-size: 10px;
}
.bm-inventory {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 5px;
  max-height: 180px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 8px;
  background: rgba(0, 0, 0, .18);
}
.bm-foot { display: flex; justify-content: flex-end; gap: 7px; margin-top: 10px; }
.bm-maxed {
  text-align: center;
  padding: 9px;
  border-radius: 8px;
  color: #ffd36e;
  background: rgba(255, 211, 110, .06);
  border: 1px solid rgba(255, 211, 110, .2);
  font-size: 10.5px;
}
.bm-max-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid rgba(90, 230, 250, .4);
  border-radius: 8px;
  background: rgba(10, 30, 40, .92);
}
.bm-max-confirm b { width: 100%; color: #dff8fd; font-size: 11px; }
.bm-max-confirm span { flex: 1; color: #a9c0cb; font-size: 10px; }
@media (max-width: 620px) {
  .bm-slots { grid-template-columns: 1fr; }
  .cp-boost-machine { transform: translate(-50%, -78%) scale(.86); }
}
.bm-stone-list { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; }
.bm-stone-row { display: flex; align-items: center; gap: 6px; }
.bm-stone.empty { opacity: .45; }
.bm-balance {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin: -2px 0 8px;
  color: #6f8794;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
}
.bm-balance b { color: #ffd36e; font-size: 12px; letter-spacing: 0; }
.bm-selected {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 2px 0;
}
.bm-selected-art {
  width: 64px;
  height: 64px;
  object-fit: contain;
  image-rendering: pixelated;
  flex: 0 0 auto;
}
.bm-selected-info { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.bm-selected-info b { color: #eaf7fb; font-size: 12px; }
.bm-selected-boost { color: #45d8ee; font-size: 18px; font-weight: 900; line-height: 1.1; }
.bm-selected-line { color: #8fa4b0; font-size: 9.5px; }
.bm-selected-line.green { color: #74e6a0; }
.bm-selected-cost { color: #74e6a0; font-size: 9.5px; }
.bm-preview-line { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.bm-preview-line b { color: #dff8fd; font-size: 10.5px; }
.bm-preview-line span { color: #8fa4b0; font-size: 9.5px; }
.bm-preview-line span:last-child { color: #ffd36e; }
.bm-preview-max { margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,.08); color: #74e6a0; font-size: 9.5px; }
.bm-confirm-overlay { z-index: 6000; }
.bm-confirm-box { width: min(440px, 92vw); }
.bm-confirm-body { padding: 4px 0 8px; }
.bm-confirm-line { color: #dff8fd; font-size: 11px; line-height: 1.7; }
.bm-confirm-line.muted { color: #8fa4b0; font-size: 10px; }

/* ── Pokédex: modal mais larga + atributos em barras + moves com FX ─────── */
.idle-modal.dex2-modal {
  width: min(1080px, 97vw);
  min-height: min(78vh, 680px);
}
.dex2-modal .dex2-left {
  flex-basis: 280px;
}
.dex2-modal .dex2-big {
  width: 140px;
  height: 140px;
}
.dex2-modal .dex2-head {
  align-items: flex-start;
}
.dex2-modal .dex2-meta {
  min-width: 0;
}
.dex2-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 16px;
}
.dex2-stat {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 56px;
  gap: 8px;
  align-items: center;
  font-size: 11px;
}
.dex2-stat-k { color: #9fb3c8; }
.dex2-stat-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.dex2-stat-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f9bff, #6ee7ff);
  box-shadow: 0 0 6px rgba(78, 190, 255, 0.35);
}
.dex2-stat-v {
  color: #dff4ff;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dex2-evo-stones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  max-width: 140px;
}
.dex2-evo-stones .dex2-chip {
  padding: 1px 5px;
  font-size: 9px;
}
.dex2-stone-or {
  color: #9fb3c8;
  font-size: 9px;
  text-transform: uppercase;
}
.dex2-movelist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 240px;
  overflow: auto;
}
.dex2-moverow {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 18px 40px 54px 20px;
  gap: 6px;
  align-items: center;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 11.5px;
  cursor: pointer;
}
.dex2-moverow:hover { background: rgba(255, 255, 255, 0.05); }
.dex2-moverow.sel {
  background: rgba(58, 160, 255, 0.12);
  border-color: rgba(58, 160, 255, 0.45);
}
.dex2-moverow .s { color: #6fa8c8; font-weight: 700; }
.dex2-moverow .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dex2-moverow img { width: 16px; height: 16px; image-rendering: pixelated; }
.dex2-moverow .cd { color: #9fb3c8; text-align: right; }
.dex2-moverow .tg { color: #9aa; text-align: right; }
.dex2-moverow .fx { color: #7fd08a; text-align: right; font-size: 10px; }
.dex2-moverow .fx:empty { visibility: hidden; }
@media (max-width: 820px) {
  .dex2-stats { grid-template-columns: 1fr; }
}

/* Tooltip dos campos do BALANCEAMENTO (Admin): o "?" é o alvo do hover. */
.adm-form-label.has-help { cursor: help; }
.adm-form-label.has-help:hover { color: var(--phw-accent); }
.adm-form-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  border: 1px solid rgba(143, 238, 255, 0.45);
  border-radius: 50%;
  color: #8fe;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
}
.adm-form-help:hover,
.adm-form-help:focus-visible {
  background: rgba(143, 238, 255, 0.16);
  border-color: #8fe;
  outline: none;
}

/* BROADCAST global: destaque grande no centro da tela (além do chat). */
.game-broadcast-root {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 14vh 12px 0;
  pointer-events: none;
}
.game-broadcast {
  width: min(760px, 94vw);
  padding: 16px 20px 18px;
  border: 2px solid #ffd75e;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(42, 32, 8, 0.98), rgba(14, 12, 8, 0.98));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 0 42px rgba(255, 215, 94, 0.38),
    0 18px 60px rgba(0, 0, 0, 0.65);
  color: #fff6d2;
  pointer-events: none;
  animation: game-broadcast-in 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.game-broadcast-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.game-broadcast-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffd75e;
}
.game-broadcast-x {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(255, 215, 94, 0.45);
  border-radius: 50%;
  background: rgba(255, 215, 94, 0.08);
  color: #ffd75e;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}
.game-broadcast-x:hover {
  background: rgba(255, 215, 94, 0.2);
  border-color: #ffd75e;
}
.game-broadcast-text {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@keyframes game-broadcast-in {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 700px) {
  .game-broadcast-root { padding-top: 10vh; }
  .game-broadcast { padding: 12px 14px 14px; }
  .game-broadcast-text { font-size: 15px; }
}

/* Prévia formatada ao lado do input do BALANCEAMENTO (ex.: 00:10:00, 2x). */
.adm-form-control {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.adm-form-control .admin-search {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.adm-form-preview {
  flex: 0 0 auto;
  color: #8fe;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .adm-form-preview { white-space: normal; }
}

/* ═══ PAINEL DO ADMIN — layout reorganizado ════════════════════════════════
   Painel mais largo, cabeçalho fixo, abas em pills (com sub-abas destacadas),
   respiro lateral no conteúdo e seções/cards/tabelas com hierarquia clara. */

.admin-box {
  width: min(1120px, 96vw);
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 16px 18px;
  border-radius: 18px;
}
/* O cabeçalho gruda no topo enquanto o conteúdo rola. */
.admin-box > .idle-modal-head {
  position: sticky;
  top: 0;
  z-index: 6;
  margin: 0 -16px;
  border-radius: 17px 17px 0 0;
}
/* Barra de abas principal: pills sobre um fundo levemente demarcado. */
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 -16px 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.02);
}
.admin-tab {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-bottom-width: 1px;
  background: rgba(255, 255, 255, 0.045);
  border-radius: 999px;
  color: #9fb3c8;
  padding: 7px 13px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.admin-tab:hover {
  color: #e6f1ff;
  border-color: rgba(79, 142, 247, 0.45);
  background: rgba(79, 142, 247, 0.12);
}
.admin-tab.on {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #38bdf8, #4f8ef7 55%, #8b5cf6);
  box-shadow: 0 2px 10px rgba(79, 142, 247, 0.35);
}
/* Sub-abas (Mercado/Anomalias): faixa própria, separada do conteúdo. */
.admin-tabs.adm-subtabs {
  margin: 8px 0 10px;
  padding: 7px 10px;
  gap: 6px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}
.adm-subtabs .admin-tab {
  font-size: 10px;
  padding: 5px 11px;
  letter-spacing: 0.05em;
}
.adm-subtabs .admin-tab.on {
  background: rgba(56, 189, 248, 0.16);
  border-color: rgba(56, 189, 248, 0.55);
  color: #7dd3fc;
  box-shadow: none;
}
/* Cabeçalhos de seção com mais presença. */
.admin-box .idle-hunt-section {
  margin: 14px 0 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #7dd3fc;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  padding-bottom: 6px;
}
/* Cards de resumo (KPIs). */
.admin-box .adm-cards {
  gap: 8px;
  padding: 4px 0 10px;
}
.admin-box .adm-card {
  border-radius: 12px;
  padding: 10px 12px;
}
/* Tabelas de auditoria. */
.admin-box .adm-mtable {
  border-radius: 10px;
  border-color: rgba(148, 163, 184, 0.14);
}
/* Resultado de comando: pill discreto e legível. */
.admin-box .admin-result {
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
}
/* Buscas do admin respiram um pouco mais. */
.admin-box .admin-search {
  margin-bottom: 10px;
}

/* ═══ Admin: comandos e ações como CARDS clicáveis (sem botão Executar) ═══ */

.admin-box .adm-cmd,
.admin-box .adm-act {
  display: flex;
  align-items: center;
  gap: 10px;
  grid-template-columns: none;
  padding: 9px 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.admin-box .adm-cmd:hover,
.admin-box .adm-act:hover {
  border-color: rgba(56, 189, 248, 0.45);
  background: rgba(56, 189, 248, 0.08);
}
.admin-box .adm-cmd:active,
.admin-box .adm-act:active {
  transform: scale(0.995);
}
.admin-box .adm-cmd:focus-visible,
.admin-box .adm-act:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.6);
  outline-offset: 2px;
}
.admin-box .adm-cmd.danger,
.admin-box .adm-act.danger {
  border-color: rgba(248, 113, 113, 0.25);
}
.admin-box .adm-cmd.danger:hover,
.admin-box .adm-act.danger:hover {
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(248, 113, 113, 0.07);
}
/* O ícone da ação/comando: chip fixo à esquerda. */
.adm-cmd-icon,
.adm-act-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(79, 142, 247, 0.14);
  border: 1px solid rgba(79, 142, 247, 0.25);
  font-size: 15px;
  line-height: 1;
}
.adm-cmd.danger .adm-cmd-icon,
.adm-act.danger .adm-act-icon {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.3);
}
/* O código do comando vira um chip mono. */
.admin-box .adm-cmd-name {
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 7px;
  background: rgba(56, 189, 248, 0.08);
}
.admin-box .adm-cmd.danger .adm-cmd-name {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.08);
}
.admin-box .adm-cmd-info {
  flex: 1 1 auto;
}
/* Parâmetro em coluna fixa; "—" sem parâmetro. */
.admin-box .adm-cmd-param {
  flex: 0 0 190px;
  min-width: 0;
}
.admin-box .adm-cmd-noparam {
  flex: 0 0 auto;
}
/* A seta de "clique pra executar" no fim do card. */
.adm-cmd-go,
.adm-act-go {
  flex: 0 0 auto;
  color: var(--phw-text-muted);
  font-size: 12px;
  transition: color 0.15s ease, transform 0.15s ease;
}
.adm-cmd:hover .adm-cmd-go,
.adm-act:hover .adm-act-go {
  color: #7dd3fc;
  transform: translateX(2px);
}
.adm-cmd.danger:hover .adm-cmd-go,
.adm-act.danger:hover .adm-act-go {
  color: #fda4af;
}
/* Telas estreitas: o parâmetro desce pra linha de baixo. */
@media (max-width: 700px) {
  .admin-box .adm-cmd {
    flex-wrap: wrap;
  }
  .admin-box .adm-cmd-param {
    flex: 1 1 100%;
  }
}

/* ═══ Admin: Info completa — identidade em KPIs, históricos e hunts ═══════ */

/* A identidade do personagem vira uma grade de KPIs com ações inline. */
.adm-detail-cards {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}
.adm-kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
.adm-kpi-head .adm-card-l {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-detail-cards .adm-card-v {
  font-size: 14px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Linhas estáticas (últimas hunts): sem cursor de clique. */
.admin-box .adm-act.adm-static {
  cursor: default;
}
.admin-box .adm-act.adm-static:hover {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.035);
}

/* ═══ Admin: Info completa — grids mais largos (ações cabem nos cards) ═══ */
.admin-box .inv-grid {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.admin-box .admin-cell-actions {
  flex-wrap: wrap;
}

/* ═══ Loja de Diamantes: tag UNIQUE nos itens/pokémons únicos ═══════════ */
.coin-shop-head {
  flex-wrap: wrap;
}
.coin-shop-tags {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.coin-shop-unique {
  flex: 0 0 auto;
  color: #ffd166;
  background: rgba(250, 204, 21, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.45);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ═══ Selo de item/pokémon ÚNICO (inventário, party e tooltips) ══════════ */
.inv-unique {
  position: absolute;
  top: 1px;
  left: 2px;
  z-index: 4;
  font-size: 10px;
  line-height: 1;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
  pointer-events: none;
}
.party-square .ps-unique {
  position: absolute;
  top: 2px;
  left: 3px;
  z-index: 4;
  font-size: 11px;
  line-height: 1;
  display: none;
  filter: drop-shadow(0 1px 2px #000);
  pointer-events: none;
}
.party-square.unique .ps-unique {
  display: block;
}
.party-tip-unique {
  color: #ffd166;
  font-weight: 800;
}
.inv-tip-row .v.unique {
  color: #ffd166;
  font-weight: 800;
}
/* A Loja de Diamantes fica no cluster da direita, encostada na carteira. */
#topbar .top-store-inline {
  margin-left: auto;
}
#topbar .topbar-diamonds {
  margin-left: 0;
}

/* ═══ PERSONALIZAR POKÉMON — helds X/Y/Memória + transformações ══════════ */
.personal-modal {
  position: relative;
  width: min(760px, 96vw) !important;
}
.personal-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 14px 0;
  flex-shrink: 0;
}
.personal-tab {
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.05);
  color: #9fb3c8;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.personal-tab:hover {
  color: #e6f1ff;
  border-color: rgba(56, 189, 248, 0.45);
}
.personal-tab.on {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #38bdf8, #4f8ef7 55%, #8b5cf6);
}
.personal-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  min-height: 0;
}
.personal-msg {
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.1);
  color: #bae6fd;
  font-size: 12px;
}
.personal-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.personal-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 10px 10px;
  border: 1px dashed rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  min-height: 178px;
}
.personal-slot.filled {
  border-style: solid;
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(56, 189, 248, 0.06);
}
.personal-slot-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #7dd3fc;
  text-transform: uppercase;
}
.personal-slot-art {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
}
.personal-slot-art img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  image-rendering: pixelated;
}
.personal-slot-empty {
  font-size: 26px;
  color: rgba(148, 163, 184, 0.5);
}
.personal-slot-name {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: #e7edfd;
}
.personal-slot-tier {
  font-size: 10px;
  color: #8b9bb8;
}
.personal-slot-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
  flex-wrap: wrap;
  justify-content: center;
}
.personal-mini {
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #dbe4f8;
  border-radius: 7px;
  padding: 4px 9px;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
}
.personal-mini:hover {
  border-color: rgba(56, 189, 248, 0.55);
  color: #fff;
}
.personal-mini.del {
  color: #fda4af;
  border-color: rgba(248, 113, 113, 0.35);
}
.personal-mini.del:hover {
  background: rgba(248, 113, 113, 0.16);
}
.personal-btn {
  align-self: flex-start;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: #dbe4f8;
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}
.personal-btn.primary {
  background: linear-gradient(135deg, #38bdf8, #4f8ef7 55%, #8b5cf6);
  border-color: transparent;
  color: #fff;
}
.personal-btn:hover {
  filter: brightness(1.1);
}
.personal-note {
  font-size: 11px;
  line-height: 1.5;
  color: #8b9bb8;
}
.personal-memory {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 11px;
  background: rgba(56, 189, 248, 0.06);
}
.personal-memory-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #7dd3fc;
}
.personal-memory-sub {
  font-size: 11px;
  color: #b9c8e8;
}
.personal-transform-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 42vh;
  overflow-y: auto;
}
.personal-transform {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}
.personal-transform.current {
  border-color: rgba(56, 189, 248, 0.55);
  background: rgba(56, 189, 248, 0.1);
}
.personal-transform img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  image-rendering: pixelated;
}
.personal-transform-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.personal-transform-info b {
  font-size: 12px;
  color: #f4f7ff;
}
.personal-transform-info small {
  font-size: 10px;
  color: #8b9bb8;
}
.personal-transform-actions {
  display: flex;
  gap: 6px;
}
.personal-empty {
  text-align: center;
  color: #8b9bb8;
  font-size: 12px;
  padding: 16px;
}
.personal-picker {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(3, 6, 14, 0.72);
  border-radius: inherit;
}
.personal-picker-panel {
  width: min(520px, 100%);
  max-height: 82%;
  display: flex;
  flex-direction: column;
  background: #0f1628;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.personal-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}
.personal-picker-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #dbe4f8;
}
.personal-picker-list {
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.personal-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #e7edfd;
  text-align: left;
  cursor: pointer;
}
.personal-pick:hover {
  border-color: rgba(56, 189, 248, 0.5);
  background: rgba(56, 189, 248, 0.1);
}
.personal-pick img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
  flex: 0 0 auto;
}
.personal-pick-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.personal-pick-info b {
  font-size: 12px;
}
.personal-pick-info small {
  font-size: 10px;
  color: #8b9bb8;
}
.personal-pick-count {
  font-size: 10px;
  font-weight: 800;
  color: #bae6fd;
}
@media (max-width: 560px) {
  .personal-slots {
    grid-template-columns: 1fr;
  }
  .personal-slot {
    min-height: 0;
  }
}

/* ═══ Ditto transformado: selo no card e nos tooltips ═══════════════════ */
.party-square .ps-transform {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-size: 11px;
  line-height: 1;
  display: none;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px #000);
}
.party-square.transformed .ps-transform {
  display: block;
}
.party-tip-transform {
  color: #c4b5fd;
  font-weight: 800;
}
.inv-tip-row .v.transform {
  color: #c4b5fd;
  font-weight: 800;
}