/* Teste v338: limpeza da interface legada e responsividade da UI v332. */

/* Estes dois HUDs foram aposentados antes da migração da interface. */
.world-panel > .zonebar,
#stage > .game-hud {
  display: none !important;
}
.world-panel { grid-template-rows: minmax(0, 1fr) !important; }

/* Barra principal: mantém o modelo completo no desktop e cabe em notebooks. */
#stage .unified-client-actions.mainbar {
  width: min(999px, calc(100% - 16px)) !important;
  min-width: 0 !important;
  max-width: calc(100% - 16px) !important;
}
#stage .unified-client-actions.mainbar .mainbar-buttons {
  max-width: 100% !important;
  gap: 2px !important;
}
#stage .unified-client-actions.mainbar .mobile-menu-toggle {
  display: none;
}
#stage .unified-client-actions.mainbar .mainbar-tooltip {
  position: absolute !important;
  z-index: 5000 !important;
  margin: 0 !important;
}

/* Aura dourada pulsante destacando o botão de Diamantes na barra principal. */
#stage .unified-client-actions.mainbar .mainbar-button[data-id="diamond"] {
  animation: diamondMainbarPulse 1.8s ease-in-out infinite;
}
@keyframes diamondMainbarPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 214, 102, .6), 0 0 8px 1px rgba(255, 214, 102, .35); }
  50% { box-shadow: 0 0 0 5px rgba(255, 214, 102, 0), 0 0 14px 4px rgba(255, 214, 102, .6); }
}
@media (prefers-reduced-motion: reduce) {
  #stage .unified-client-actions.mainbar .mainbar-button[data-id="diamond"] {
    animation: none;
    box-shadow: 0 0 0 2px rgba(255, 214, 102, .55);
  }
}

/* Rail único: zoom e opacidade nunca ficam separados ou atrás das skills. */
#stage .viewport-controls-rail {
  position: absolute;
  z-index: 1400;
  right: 10px;
  bottom: 42px;
  display: grid;
  justify-items: end;
  gap: 5px;
  pointer-events: none;
}
#stage .viewport-controls-rail > .game-zoom,
#stage .viewport-controls-rail > .skill-opacity-control {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  transform: none !important;
  pointer-events: auto;
}
#stage .viewport-controls-rail > .skill-opacity-control {
  display: grid !important;
  grid-template-columns: auto 27px 39px 27px !important;
  align-items: center !important;
  gap: 4px !important;
  width: auto !important;
  min-width: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 3px 4px 3px 9px !important;
  border: 1px solid #ffffff2e !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg,#10211dda,#091612e8) !important;
  box-shadow: 0 5px 14px #0008 !important;
  color: #dce9e5 !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#stage .viewport-controls-rail > .skill-opacity-control > span {
  padding-right: 4px !important;
  color: #d9e6e2 !important;
  font-size: 8px !important;
  font-weight: 1000 !important;
  letter-spacing: .8px !important;
}
#stage .viewport-controls-rail > .skill-opacity-control > button {
  width: 27px !important;
  min-width: 27px !important;
  height: 25px !important;
  min-height: 25px !important;
  padding: 0 !important;
  border: 1px solid #ffffff25 !important;
  border-radius: 5px !important;
  background: #12251f !important;
  color: #e9f5f0 !important;
  font: 900 15px/23px Arial, sans-serif !important;
}
#stage .viewport-controls-rail > .skill-opacity-control > output {
  width: 39px !important;
  color: #75dabc !important;
  font-size: 8px !important;
  font-weight: 1000 !important;
  text-align: center !important;
}
#stage .viewport-controls-rail > .skill-opacity-control.skills-hidden {
  border-color: #984858 !important;
  background: linear-gradient(180deg,#2b171cdd,#170d10e8) !important;
}
#stage .viewport-controls-rail > .skill-opacity-control.skills-hidden > output { color: #ff7d88 !important; }

/* Badge de amigos no padrão dos demais avisos: canto superior e oculto em zero. */
#stage .mainbar-button { position: relative !important; }
#stage .mainbar-button #friend-unread {
  position: absolute !important;
  z-index: 6 !important;
  top: -3px !important;
  right: -3px !important;
  display: grid !important;
  place-items: center;
  min-width: 15px !important;
  width: auto !important;
  height: 15px !important;
  padding: 0 3px !important;
  margin: 0 !important;
  border: 1px solid #ffd6d9 !important;
  border-radius: 999px !important;
  background: #cf2638 !important;
  color: #fff !important;
  font: 900 8px/1 Arial, sans-serif !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.72) !important;
}
#stage .mainbar-button #friend-unread.hidden { display: none !important; }

/* Mais de seis golpes: todos aparecem e os slots encolhem progressivamente. */
#stage #pokemon-skills-window .move-slot {
  width: var(--move-slot-width, 94px) !important;
  flex: 0 0 var(--move-slot-width, 94px) !important;
  background-size: 100% 74px !important;
}
#stage #pokemon-skills-window .move-slot > .move-icon {
  left: 50% !important;
  transform: translateX(-50%);
}
#stage #pokemon-skills-window .move-slot > .move-name,
#stage #pokemon-skills-window .move-slot > .move-type {
  left: 4px !important;
  width: calc(100% - 8px) !important;
}
#stage #pokemon-skills-window .move-key-text,
.skills-config-item .config-move-key-text {
  display: grid !important;
  place-items: center;
  color: #dbc781 !important;
  font: 900 8px/1 Arial, sans-serif !important;
  letter-spacing: -.2px;
  background: linear-gradient(#1d2932,#0c1318);
  border: 1px solid #6e633f;
  border-radius: 2px;
}
#stage #pokemon-skills-window.has-many-moves .move-slot > .move-name { font-size: 8px !important; }
#stage #pokemon-skills-window.has-many-moves #pokemon-moves {
  max-width: 594px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: #9d813e transparent;
}
#stage #pokemon-skills-window.skills-window:not(.is-minimized),
#stage #pokemon-skills-window.skills-window:not(.is-minimized) > .skills-bar {
  width: var(--skills-window-width, 652px) !important;
}
#stage #pokemon-skills-window.skills-window > .skills-bar { touch-action: none; }

/* Escala de densidade também vale para notebooks e telas baixas. */
html:not(.compact-client-ui) #stage .unified-client-actions.mainbar {
  transform: translateX(-50%) scale(var(--responsive-desktop-ui-scale, 1)) !important;
  transform-origin: top center !important;
}
html:not(.compact-client-ui) #stage #pokemon-team-bar.team-bar {
  transform: scale(var(--responsive-team-scale, 1)) !important;
  transform-origin: top left !important;
}
html:not(.compact-client-ui) #stage #pokemon-skills-window.skills-window {
  left: 50% !important;
  transform: translateX(-50%) scale(var(--responsive-skills-scale, 1)) !important;
  transform-origin: bottom center !important;
}
html:not(.compact-client-ui) #stage #pokemon-skills-window.skills-window.user-positioned {
  transform: scale(var(--responsive-skills-scale, 1)) !important;
  transform-origin: top left !important;
}

/* Identidade do jogador usado pelo Treinador Misterioso. */
#stage .target-card .target-trainer {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 4px 0 5px;
  padding: 3px 6px;
  overflow: hidden;
  border: 1px solid rgba(231, 184, 69, .66);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(96, 66, 18, .92), rgba(42, 31, 14, .94));
  color: #ffe597;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .65px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#stage .target-card .target-trainer.hidden { display: none !important; }

.rare-capture-banner.mystery-victory-card {
  width: min(520px, calc(100vw - 20px));
  grid-template-columns: 56px minmax(0, 1fr) 170px;
}
.mystery-victory-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  gap: 6px;
  align-items: stretch;
  min-width: 0;
}
.mystery-victory-card .mystery-defeated-player {
  display: grid;
  align-content: center;
  min-width: 0;
  margin: 0;
  padding: 5px 7px;
  border: 1px solid rgba(255, 214, 112, .64);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(116, 76, 20, .46), rgba(48, 30, 13, .64));
  color: #ffe08a;
}
.mystery-victory-card .mystery-defeated-player small {
  color: #caa85d;
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .8px;
}
.mystery-victory-card .mystery-defeated-player strong {
  min-width: 0;
  overflow: hidden;
  color: #fff1b4;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1100px) and (min-width: 781px) {
  #stage .unified-client-actions.mainbar .mainbar-buttons {
    gap: 2px !important;
    padding-inline: 8px !important;
  }
  #stage .unified-client-actions.mainbar .mainbar-button {
    width: 31px !important;
    min-width: 31px !important;
    height: 38px !important;
    min-height: 38px !important;
    flex-basis: 31px !important;
  }
  #stage .unified-client-actions.mainbar .mainbar-button > img {
    max-width: 28px !important;
    max-height: 28px !important;
  }
}

@media (max-width: 780px), (hover: none) and (pointer: coarse) {
  #stage .unified-client-actions.mainbar {
    left: max(6px, env(safe-area-inset-left)) !important;
    right: auto !important;
    top: max(6px, env(safe-area-inset-top)) !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: calc(100vw - 12px) !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    transform: none !important;
    border: 1px solid #9c7c39 !important;
    border-radius: 5px !important;
    background: linear-gradient(180deg, #18242d, #0c141a) !important;
  }
  #stage .unified-client-actions.mainbar .mobile-menu-toggle {
    position: absolute;
    inset: 5px;
    z-index: 4;
    display: grid !important;
    place-items: center;
    width: 38px;
    height: 38px;
    min-height: 0;
    padding: 0;
    border: 1px solid #9c7c39;
    border-radius: 4px;
    background: #15212a;
    color: #f2d186;
    font: 800 21px/1 Arial, sans-serif;
  }
  #stage .unified-client-actions.mainbar > .mainbar-buttons {
    display: none !important;
  }
  #stage .unified-client-actions.mainbar.menu-open {
    width: min(372px, calc(100vw - 12px)) !important;
    height: auto !important;
    min-height: 146px !important;
    padding: 5px 5px 7px 49px !important;
    background: linear-gradient(180deg, rgba(18, 28, 36, .98), rgba(8, 14, 19, .98)) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .58) !important;
  }
  #stage .unified-client-actions.mainbar.menu-open > .mainbar-buttons {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  #stage .unified-client-actions.mainbar.menu-open .mainbar-button {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    flex-basis: 38px !important;
  }
  #stage .unified-client-actions.mainbar .mainbar-tooltip { display: none !important; }

  #stage #pokemon-team-bar.team-bar {
    left: 6px !important;
    right: auto !important;
    top: 64px !important;
    transform: scale(var(--responsive-team-scale, .72)) !important;
    transform-origin: top left !important;
  }
  #stage #pokemon-team-bar.team-bar.is-minimized,
  #stage #pokemon-team-bar.team-bar.collapsed {
    transform: scale(var(--responsive-team-scale, .82)) !important;
    transform-origin: top left !important;
  }
  #stage #pokemon-skills-window.skills-window,
  #stage #pokemon-skills-window.skills-window.is-minimized {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: max(6px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) scale(var(--responsive-skills-scale, .56)) !important;
    transform-origin: bottom center !important;
  }
  #stage #pokemon-skills-window.skills-window.user-positioned,
  #stage #pokemon-skills-window.skills-window.user-positioned.is-minimized {
    transform: scale(var(--responsive-skills-scale, .56)) !important;
    transform-origin: top left !important;
  }

  #game-chat.chat-shell {
    max-width: none !important;
    max-height: none !important;
    transform-origin: top left !important;
  }

  #stage .viewport-controls-rail {
    right: max(5px, env(safe-area-inset-right)) !important;
    top: max(64px, calc(env(safe-area-inset-top) + 58px)) !important;
    bottom: auto !important;
    transform: scale(.78) !important;
    transform-origin: top right !important;
  }
  #stage .unified-client-actions.mainbar.menu-open ~ .viewport-controls-rail {
    visibility: hidden !important;
  }

  .rare-capture-banner.mystery-victory-card {
    right: 6px;
    bottom: max(94px, calc(env(safe-area-inset-bottom) + 88px));
    width: min(390px, calc(100vw - 12px));
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .mystery-victory-card .mystery-victory-details {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) 72px;
  }
}

@media (max-width: 390px) {
  #stage .unified-client-actions.mainbar.menu-open {
    padding-left: 47px !important;
  }
  #stage .unified-client-actions.mainbar.menu-open .mainbar-button {
    width: 35px !important;
    min-width: 35px !important;
    flex-basis: 35px !important;
  }
}

/* O recap de derrota (.modal, z-index:20) tem um backdrop full-screen com
   blur/escurecimento que cobria o teamboard (z-index:8), dando a impressão
   de que a equipe tinha sumido justamente no momento em que o jogador mais
   precisa ver quais Pokémon desmaiaram. Mantém o teamboard nítido acima do
   backdrop nesse caso específico. */
body:has(#death-recap-system:not(.hidden)) #pokemon-team-bar {
  z-index: 21;
}

/* Percentual de XP do treinador na barra + estimativa de tempo pro próximo
   nível — reduz jogador achando que "parou de upar" quando na verdade só
   está no meio de um nível que exige muito mais XP. */
#trainer-xp-percent {
  color: var(--gold, #e6b84a);
  font-weight: 900;
}
#trainer-xp-eta {
  display: block;
  margin-top: 4px;
  color: var(--muted, #728078);
  font-size: 8px;
  line-height: 1.3;
}

/* Mesmo indicador de % + tempo pro próximo nível, agora também dentro do
   Hunt Analyzer — é o painel que o jogador já olha pra acompanhar a sessão,
   então faz mais sentido a estimativa aparecer ali também. */
.analyzer-level-progress {
  margin: 9px 0;
  padding: 9px 11px;
  border: 1px solid #8a7135;
  border-radius: 8px;
  background: linear-gradient(100deg, #282619, #151a1d);
}
.analyzer-level-progress > span {
  display: block;
  margin-bottom: 5px;
  color: #e5b73a;
  font-size: 10px;
  font-weight: 800;
}
.analyzer-level-progress .progress {
  height: 5px;
  margin: 0;
}
#analyzer-trainer-eta {
  display: block;
  margin-top: 5px;
  color: #b9c2b4;
  font-size: 9px;
  line-height: 1.35;
}

/* XP/h só das capturas (primeira captura de cada espécie), dentro do
   próprio card "CAPTURADOS" do Hunt Analyzer. */
.analyzer-subrate {
  display: block;
  margin-top: 3px;
  color: #7ee7aa;
  font-size: 9px;
  font-weight: 700;
}

/* Trava de segurança independente da classe "hidden": o botão Admin fica
   escondido por padrão via seletor de ID (não depende de nenhum toggle de
   classe rodar corretamente). Só volta a aparecer quando o JS confirmar a
   conta como admin e adicionar "is-admin-visible". */
#admin-teleport-button {
  display: none !important;
}
#admin-teleport-button.is-admin-visible {
  display: grid !important;
}

/* Loja de Diamantes: aviso compacto de Boost de XP / Shiny Charm ativos,
   logo abaixo do saldo. Some sozinho quando nenhum dos dois está ativo. */
.active-buffs-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid #4a7a5c;
  border-radius: 8px;
  background: linear-gradient(100deg, #16241c, #101a15);
}
.active-buffs-status span {
  color: #8ef0b0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}

/* Bandeja de buffs ativos (Boost de XP / Shiny Charm): fica ABAIXO da barra
   principal (mainbar termina em top:5px + height:61px = 66px), nunca dentro
   dela — some sozinha quando nenhum dos dois buffs está ativo. */
#stage .mainbar-buff-tray {
  position: absolute;
  z-index: 1179;
  left: 50%;
  top: 70px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  pointer-events: none;
}
@media (max-width: 1020px) {
  #stage .mainbar-buff-tray {
    left: 8px;
    transform: none;
  }
}
#stage .mainbar-buff-button {
  position: relative;
  width: 40px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  border: 1px solid #4a7a5c;
  border-radius: 6px;
  background: rgba(10, 14, 10, .82);
  cursor: pointer;
  pointer-events: auto;
  overflow: visible;
}
#stage .mainbar-buff-button.hidden {
  display: none;
}
#stage .mainbar-buff-button img {
  width: auto;
  height: auto;
  max-width: 30px;
  max-height: 30px;
  object-fit: contain;
}
/* Arte dos Pacotes Fundadores (bundles) — substitui o ícone de engrenagem
   genérico que aparecia como fallback quando um offer não tinha item/ball/
   shopArt próprio. Tamanho contido a 76px: a primeira linha do grid do
   card (#diamond-shop-system .diamond-offer) é fixa em 92px — qualquer
   coisa maior vazava por cima do card e "empurrava" o título visualmente. */
.diamond-bundle-art {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.diamond-bundle-art img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 6px 12px #000a);
}
/* Causa raiz do título sumindo: style.css força
   ".diamond-offer.diamond-bundle .diamond-offer-art{min-height:112px}",
   20px MAIOR que a linha do grid do card (92px, ver v392-shop-house-
   fishing.css). Isso faz a moldura da imagem crescer e cobrir o topo do
   título, que fica na linha seguinte do grid. Corrigindo o min-height na
   origem (com seletor mais específico) em vez de só compensar com gap. */
#diamond-shop-system .diamond-offer.diamond-bundle .diamond-offer-art {
  min-height: 92px;
}
#diamond-shop-system .diamond-offer.diamond-bundle {
  gap: 12px;
}
#diamond-shop-system .diamond-offer.diamond-bundle .diamond-offer-copy > b {
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

/* Polimento visual da Loja de Diamantes: mais profundidade e resposta ao
   hover nos cards e nas abas, sobre a mesma paleta azul/dourada da loja. */
#diamond-shop-system .diamond-offer {
  background: linear-gradient(160deg, #17293c, #0d1721 65%);
  box-shadow: 0 6px 18px #0006, inset 0 1px 0 #ffffff0d;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#diamond-shop-system .diamond-offer:hover {
  transform: translateY(-4px);
  border-color: #5aa0d8;
  box-shadow: 0 16px 34px #000a, 0 0 0 1px #5aa0d84d;
}
#diamond-shop-system .diamond-offer-art {
  box-shadow: inset 0 0 22px #0007, inset 0 0 0 1px #ffffff08;
}
#diamond-shop-system .diamond-offer-copy > b {
  letter-spacing: .2px;
}
#diamond-shop-system .diamond-offer button:not(:disabled) {
  background: linear-gradient(180deg, #4a95ff, #2256bd);
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
#diamond-shop-system .diamond-offer button:not(:disabled):hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}
#diamond-category-tabs button {
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
#diamond-category-tabs button:not(.active):hover {
  border-color: #5aa0d8;
  color: #cfe3f0;
  transform: translateY(-1px);
}

/* Botões do Boost de XP e da Shiny Charm: destacados dos demais com um
   gradiente quente e um brilho pulsante sutil, já que são os dois itens
   mais novos da loja. */
#diamond-shop-system .diamond-offer button[data-diamond-offer="xp-boost"],
#diamond-shop-system .diamond-offer button[data-diamond-offer="shiny-charm"] {
  background: linear-gradient(135deg, #ffb020, #ff5f7a 55%, #b355ff);
  border-color: #ffd27a;
  box-shadow: 0 0 0 1px #ffd27a66, 0 10px 26px #ff5f6d40;
  animation: buffButtonGlow 2.4s ease-in-out infinite;
}
#diamond-shop-system .diamond-offer button[data-diamond-offer="xp-boost"]:hover:not(:disabled),
#diamond-shop-system .diamond-offer button[data-diamond-offer="shiny-charm"]:hover:not(:disabled) {
  filter: brightness(1.15);
  transform: translateY(-1px);
}
@keyframes buffButtonGlow {
  0%, 100% { box-shadow: 0 0 0 1px #ffd27a66, 0 10px 26px #ff5f6d40; }
  50% { box-shadow: 0 0 0 1px #ffd27acc, 0 12px 34px #ff5f6d80; }
}
@media (prefers-reduced-motion: reduce) {
  #diamond-shop-system .diamond-offer button[data-diamond-offer="xp-boost"],
  #diamond-shop-system .diamond-offer button[data-diamond-offer="shiny-charm"] {
    animation: none;
  }
}

.mainbar-buff-timer {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  color: #ffe9a8;
  background: rgba(10, 14, 10, .88);
  padding: 1px 4px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

/* Novo bloco de categoria + busca do "Criar Oferta" do Market. O grid de
   .create-market-offer é fixo em 5 colunas por !important espalhado em
   vários arquivos versionados (v295/v296), casando 1-a-1 com os 5 campos
   originais (item, quantidade, preço, moeda, botão) — um filho novo a mais
   quebraria essa contagem. Forçando esse bloco a ocupar a linha inteira
   (como o <strong> do título já faz) ele fica de fora dessa contagem. */
.player-market-panel .create-market-offer .offer-item-picker {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
}
.player-market-panel .create-market-offer .offer-item-picker select,
.player-market-panel .create-market-offer .offer-item-picker input {
  flex: 1 1 140px;
  min-width: 0;
  height: 28px;
  border: 1px solid #38515c;
  border-radius: 7px;
  background: #071219;
  color: #e6e8e7;
  font-size: 9px;
  padding: 0 8px;
}