/* Dados placeholder do reskin (Fase 2) — sem backend ainda. */
/* Caixa "Bem-vindo" desativada por enquanto (a navegação é pela navbar/mapa).
!important pra vencer o display:block que o backToDashboard seta no elemento. */
#welcome-panel { display: none !important; }
#conteudo .panel-rpg { background: #282828; border-radius: 10px; padding: 22px;
color: #e8eef0; font-family: 'Open Sans', Arial, sans-serif; text-align: center; width: 100%; }
#conteudo .panel-rpg h2 { color: #2FB2EF; margin-top: 0; }
.btn-batalhar { background: #2FB2EF; color: #fff; border: 0; border-radius: 6px;
padding: 12px 28px; font-size: 16px; cursor: pointer; text-decoration: none; display: inline-block; margin-top: 12px; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn-batalhar.btn-disabled { background: #3a4650; color: #9fb2bd; cursor: not-allowed; opacity: .7; }
#btn-trainer { background: #e0762f; }
#btn-multi { background: #8e44c4; }
#myteam img { width: 30px; height: 30px; }
.MyTrainner:has(#myteam) { flex-direction: column; align-items: center; }
/* Footer colado no fim da tela quando o conteúdo é curto (sem espaço sobrando). */
html, body#page-index { height: 100%; }
body#page-index { display: flex; flex-direction: column; min-height: 100vh; }
body#page-index > .nk-main { flex: 1 0 auto; display: flex; flex-direction: column; }
body#page-index > .nk-main > .container { flex: 1 0 auto; }
.nk-footer { flex-shrink: 0; }
/* Footer "Follow us": Facebook/WhatsApp/Discord no MESMO hexágono dos ícones do jogo (Event.png),
pequenos. Sobrescreve o círculo branco do template antigo. */
.nk-social-links-2 li a {
width: 36px; height: 36px; padding: 0;
display: flex; align-items: center; justify-content: center;
background: url('/old/layout/images/NewLayout/Event.png?v=1205') no-repeat center / contain !important;
border: none !important; border-radius: 0 !important; box-shadow: none !important;
color: #fff !important; text-shadow: 0 1px 2px #000, 0 0 3px #000;
transition: transform .12s, filter .12s;
}
.nk-social-links-2 li a:hover { transform: translateY(-2px); filter: brightness(1.15); }
.nk-social-links-2 li a .fa { font-size: 15px; line-height: 1; color: #fff; }
.nk-social-links-2 li a svg { width: 19px; height: auto; fill: #fff; filter: drop-shadow(0 1px 2px #000); }
.nk-social-facebook:hover .fa { color: #4c86ff; } /* tint da marca no hover */
.nk-social-whatsapp:hover .fa { color: #25d366; }
.nk-social-discord:hover svg { fill: #5865f2; }
/* Botões de golpe — visual da base antiga (fundo por tipo + categoria + PP). */
#controls .label { display: block; margin: 8px 0 4px; color: #9fb2bd; font-size: 13px; text-align: center; }
/* Contador de espectadores (👁️ N) no topo-centro da cena de batalha. */
#battle-spec { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 8;
background: rgba(12,17,26,.82); color: #fff; font-weight: 800; font-size: 13px; line-height: 1;
padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
box-shadow: 0 2px 8px rgba(0,0,0,.45); pointer-events: none; white-space: nowrap; }
/* Timer do PVP (⏱ Ns) — mesma pílula do contador de espectadores, no topo-centro. */
#pvp-timer { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 9;
background: rgba(12,17,26,.82); color: #fff; font-weight: 800; font-size: 13px; line-height: 1;
padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
box-shadow: 0 2px 8px rgba(0,0,0,.45); pointer-events: none; white-space: nowrap; }
#pvp-timer.low { color: #ff6b6b; border-color: rgba(255,107,107,.5); }
/* Quando o timer do PVP está visível, o olho de espectadores desce pra não sobrepor
(classe posta por pvpTimerSet/Stop — vale p/ jogador E espectador). */
.pvp-has-timer #battle-spec { top: 52px; }
/* PVP: itens (Mochila) e Fugir ficam VISÍVEIS mas desabilitados (cinza, sem clique). */
.battle-pvp .selector.bag, .battle-pvp #bm-run {
filter: grayscale(1) brightness(.6) !important; opacity: .5; cursor: not-allowed !important;
pointer-events: none; }
/* Toggles de gimmick (Mega/Z/Dynamax/Terastal) — aparecem só quando a sim
sinaliza disponibilidade. Cor por tipo de gimmick. */
.gimmicks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 6px; }
/* Cada gimmick é um ícone clicável 50x50 (não checkbox). currentColor define o
brilho/borda quando ativo, vindo das classes .gk-* abaixo. */
.gimmick-toggle { width: 50px; height: 50px; padding: 0; border: 0;
border-radius: 12px; background: rgba(0,0,0,.25); cursor: pointer; overflow: hidden;
display: inline-flex; align-items: center; justify-content: center; line-height: 1;
transition: transform .12s ease, box-shadow .12s ease; }
.gimmick-toggle img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.gimmick-toggle:hover { transform: translateY(-2px); }
.gimmick-toggle.noimg { font-size: 10px; font-weight: 700; text-align: center; padding: 2px; }
.gimmick-toggle.active { box-shadow: 0 0 0 2px currentColor, 0 0 10px 2px currentColor; }
.gk-mega, .gk-megax, .gk-megay, .gk-ultra { color: #ff7ad9; }
.gk-zmove { color: #ffd24a; }
.gk-dynamax { color: #ff5a87; }
.gk-terastallize { color: #5ad0ff; }
/* As 4 moves ficam lado a lado numa única linha. */
.moves { display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px; margin: 4px 0; }
.btn-type {
color: #fff; background-repeat: no-repeat; background-size: cover; background-position: center;
height: 57px; flex: 1 1 0; min-width: 0; max-width: 154px; margin: 0; border: 0; opacity: .88;
text-shadow: #000 1px -1px 2px, #000 -1px 1px 2px, #000 1px 1px 2px, #000 -1px -1px 2px;
cursor: pointer; border-radius: 4px; position: relative; vertical-align: top;
text-align: left; padding: 7px 9px; font-family: 'Open Sans', Arial, sans-serif; }
.btn-type:hover:not(:disabled) { opacity: 1; }
.btn-type:disabled { filter: grayscale(75%); opacity: .45; cursor: default; }
/* MOBILE: botões da batalha precisam ser "toque limpo". Sem isto, segurar um botão
com texto (golpe/troca) dispara a seleção/menu do sistema no celular e ROUBA o toque,
fazendo o touchend NÃO virar clique (o golpe não era selecionado, principalmente no PVP).
touch-action:manipulation tira o delay/zoom de duplo-toque. */
.btn-type, .selector, .battle-pokemon, .gimmick-toggle, .bag-item {
-webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none;
user-select: none; touch-action: manipulation; }
/* Garante que os golpes fiquem POR CIMA de qualquer elemento irmão (se algo invisível
estiver cobrindo a área das moves, elas ainda recebem o toque). */
#controls .battle-menu-wrap { position: relative; z-index: 40; }
#controls .moves { position: relative; z-index: 41; }
#controls .moves .btn-type { position: relative; z-index: 42; }
.btn-type .movename { display: block; font-size: 13px; font-weight: 700; line-height: 1.1;
overflow: hidden; text-overflow: clip; white-space: nowrap; padding-right: 52px; }
.btn-type .movepp { position: absolute; right: 9px; bottom: 6px; font-size: 11px; font-weight: 700; }
/* Badge de categoria: spritesheet 41x54 dividida por 3 = 41x18 por fatia.
Reduzido 30% (fator .7): 28.7x12.6 por fatia, folha 28.7x37.8. */
.move-categorie {
display: inline-block; width: 28.7px; height: 12.6px; color: transparent;
background: url(/old/layout/images/moves_categories.png?v=1205) no-repeat;
background-size: 28.7px 37.8px;
position: absolute; right: 7px; top: 7px; }
.move-categorie.physical { background-position: 0 0; }
.move-categorie.special { background-position: 0 -12.6px; }
.move-categorie.status { background-position: 0 -25.2px; }
/* Lista de troca (switch) — visual do jogo antigo: card slate com ícone do
pokémon à esquerda, nome + nível e barra de HP (progress.gif). */
.switch-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
.dbl-slot-hdr { text-align: center; font-size: 12px; font-weight: 700; color: #9fd4ff; padding: 3px 0 4px; letter-spacing: .02em; }
.battle-pokemon {
position: relative; box-sizing: border-box; width: 150px; height: 50px;
padding: 8px 8px 8px 46px; text-align: left; cursor: pointer;
background-repeat: no-repeat; background-position: 5px center;
background-color: #34465f; border: 0; border-bottom: 2px solid #27374e;
border-right: 1px solid #27374e; border-radius: 5px;
box-shadow: rgba(14, 13, 13, .4) 0 0 15px;
font-size: 11px; font-weight: 700; color: #cdd8ea;
font-family: 'Open Sans', Arial, sans-serif; transition: background-color .15s; }
.battle-pokemon:hover { background-color: #3d5170; }
.battle-pokemon:disabled { opacity: .5; cursor: default; }
.battle-pokemon .bp-name { display: block; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; }
.battle-pokemon .bp-name small { color: #9eadcd; font-weight: 700; }
.hp_red { background: #cccccc; border: 1px solid #f2f2f2; border-radius: 4px;
height: 6px; width: 96px; margin-top: 7px; overflow: hidden; }
.hp_red .progress { background: url('/old/layout/images/progress.gif?v=1205') left center / cover no-repeat;
border-radius: 4px; height: 100%; max-width: 100%; transition: width .4s; }
/* ====== Menu de batalha (estilo jogo antigo): Atacar / Mochila / Pokémon / Fugir.
Dois blocos: o menu (4 botões-imagem) e o conteúdo que alterna por aba. Ficam
lado a lado e empilham (um sob o outro) quando falta largura. Cada botão é um
quadrante; juntos (com as sobreposições) formam o quadro com a pokébola central. */
.battle-menu-wrap { display: flex; flex-wrap: wrap; justify-content: center;
align-items: center; gap: 16px; }
.battle-menu { flex: 0 0 auto; }
.battle-menu-content { flex: 1 1 320px; min-width: 0; max-width: 440px; }
.buttons-battle { width: 276px; font-size: 0; line-height: 1; margin: 0 auto; text-align: center; }
/* box-sizing/max-* explícitos: o tema global força border-box e uma regra
genérica .pokemon impõe max-width: 96px — aqui o botão precisa dos 141px cheios. */
.selector { display: inline-block; box-sizing: content-box; width: 141px; height: 50px;
max-width: none !important; max-height: none !important; padding: 0; border: 0;
background-color: transparent; background-repeat: no-repeat; background-size: 141px 50px;
cursor: pointer; vertical-align: top; transition: filter .15s, transform .08s; }
.selector:hover { filter: brightness(1.12); }
.selector:active { transform: translateY(1px); }
.selector.attack { background-image: url(/old/layout/images/layout/battle/attack.png?v=1205); margin-bottom: -4px; }
.selector.bag { background-image: url(/old/layout/images/layout/battle/bag.png?v=1205); margin-left: -6px; margin-bottom: -4px; }
.selector.pokemon { background-image: url(/old/layout/images/layout/battle/pokemon.png?v=1205); }
.selector.run { background-image: url(/old/layout/images/layout/battle/run.png?v=1205); margin-left: -6px; }
.selector.attack.active { background-image: url(/old/layout/images/layout/battle/attack-hover.png?v=1205); }
.selector.bag.active { background-image: url(/old/layout/images/layout/battle/bag-hover.png?v=1205); }
.selector.pokemon.active { background-image: url(/old/layout/images/layout/battle/pokemon-hover.png?v=1205); }
.bm-tab[hidden] { display: none; }
.bag-empty { padding: 22px 10px; text-align: center; color: #9fb2bd; font-size: 13px; }
/* Lista de itens da Mochila: cartões com ícone + nome + quantidade. */
.bag-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 2px;
max-height: 168px; overflow-y: auto; }
.bag-item { display: flex; align-items: center; gap: 8px; flex: 1 1 calc(50% - 8px);
min-width: 0; box-sizing: border-box; padding: 6px 9px; border: 1px solid #3a4a54;
border-radius: 8px; background: #1f2a30; color: #e8eef0; cursor: pointer;
text-align: left; font-size: 13px; transition: background .12s, border-color .12s; }
.bag-item:hover:not(:disabled) { background: #28363d; border-color: #5fb7d6; }
.bag-item:disabled { opacity: .4; cursor: default; }
.bag-icon { width: 28px; height: 28px; flex: 0 0 28px; image-rendering: pixelated; }
.bag-name { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bag-qty { flex: 0 0 auto; color: #9fd0e6; font-weight: 600; }
/* Pokébola arremessada na captura: o container é posicionado por JS (arco);
a img interna gira no voo e balança (wobble) ao pousar no selvagem. */
.capture-ball { position: absolute; top: 0; left: 0; width: 30px; height: 30px;
z-index: 50; pointer-events: none; will-change: transform; }
.capture-ball .cb-img { display: block; width: 30px; height: 30px; image-rendering: pixelated;
background: url(/sprites/itemicons/poke-ball.png?v=1205) no-repeat center / contain;
transform-origin: 50% 50%; }
/* No pouso, o pivô vai pra base pra a bola "rocar" no chão (não orbitar). */
.capture-ball .cb-img.wobble { transform-origin: 50% 85%; animation: cb-wobble .5s ease-in-out 3; }
@keyframes cb-wobble { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-24deg); }
75% { transform: rotate(24deg); } }
/* Botão "trocar avatar" da barra (graphic Change-Avatar.png vem da goodgames.css). */
.Bar .change-avatar { cursor: pointer; }
/* Time da home: o #conteudo é .row (flexbox do Bootstrap, com margens negativas de
15px) e os blocos sem classe col-* encolhem pro conteúdo e grudam à esquerda.
Replica o col-lg-12 que envolvia o #showteam no home.php antigo (largura total +
padding 15px p/ cancelar a margem negativa do .row) p/ o .MyTeam centralizar. */
#team-panel { flex: 0 0 100%; width: 100%; padding-left: 15px; padding-right: 15px; }
#showteam { width: 100%; }
#team-panel .MyTeam { justify-content: center; }
/* Grade de seleção de avatar (SweetAlert2). */
.av-pick-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-height: 60vh; overflow-y: auto; }
.av-pick { width: 96px; cursor: pointer; border: 3px solid transparent; border-radius: 10px;
padding: 4px; background: #1f2a30; transition: border-color .12s, transform .12s; }
.av-pick img { width: 100%; height: 120px; object-fit: contain; display: block; image-rendering: pixelated; }
.av-pick:hover { transform: translateY(-2px); }
.av-pick.sel { border-color: #2FB2EF; box-shadow: 0 0 10px #2fb2ef88; }
/* ---- Menu do treinador: sprite de corpo inteiro (#my_avatar do trainer.php) com
os ícones hexagonais do jogo antigo (.Events / Event.png) em arco sobre a
cabeça. Clicar no treinador abre a troca de personagem (.change-avatar). ---- */
.radial-menu { position: relative; width: 300px; height: 330px; margin: 0 auto; }
/* Treinador de corpo inteiro ao fundo, ancorado na base (como o #my_avatar do original).
Usa a variação numerada escolhida no "trocar avatar" da barra. */
.radial-avatar { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
width: 240px; height: 310px; background: center bottom / contain no-repeat;
opacity: .92; z-index: 1; pointer-events: none; }
/* Ícone hexagonal: moldura Event.png do jogo antigo. */
.radial-item { position: absolute; top: 0; left: 50%; width: 60px; height: 60px; margin-left: -30px;
padding: 0; border: none; background: transparent; cursor: pointer; z-index: 3;
transition: transform .12s; }
.radial-item .ic { display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%; color: #fff; font-size: 22px;
background: url('/old/layout/images/NewLayout/Event.png?v=1205') no-repeat center / contain;
text-shadow: 0 1px 2px #000, 0 0 3px #000; transition: filter .12s, transform .12s; }
.radial-item:hover .ic { filter: brightness(1.18); transform: scale(1.12); }
.radial-item:active .ic { transform: scale(.92); }
.radial-item.radial-soon .ic { filter: grayscale(.75) brightness(.85); }
.radial-item.radial-soon { cursor: not-allowed; }
.radial-item.ev-ind { cursor: default; }
.radial-item.ev-ind .ic { animation: evpulse 1.7s ease-in-out infinite; }
@keyframes evpulse { 0%,100% { filter: drop-shadow(0 0 1px rgba(255,216,107,.5)); } 50% { filter: drop-shadow(0 0 7px #ffd86b); } }
.radial-item .ev-badge { top: 3px; right: 3px; }
.radial-item.ri-social .ic svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 2px #000); transition: fill .12s; }
.radial-item.ri-wa:hover .ic { color: #25d366; } /* verde WhatsApp no hover */
.radial-item.ri-dc:hover .ic { color: #5865f2; } /* blurple Discord no hover */
/* Sociais na COLUNA DO MEIO (nc-mid), SÓ na seleção de personagem (radial oculto). Centralizado na vertical. */
#nochar-social { display: none; }
body.ss-nochar .nc-mid { display: flex; align-items: center; justify-content: center; } /* centraliza o grupo na altura da linha do Gold */
body.ss-nochar #nochar-social { display: flex; justify-content: center; align-items: center; gap: 22px; }
#nochar-social .radial-item { position: static; transform: none; margin: 0; width: 92px; height: 92px; }
#nochar-social .radial-item.ri-social .ic svg { width: 44px; height: 44px; }
.evdrop-radial { cursor: pointer; }
.evdrop-radial .ic { animation: evpulse 1.7s ease-in-out infinite; }
.evdrop-img { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 1px 2px #000); pointer-events: none; }
/* ===== Loja do Evento (Event Drop) — painel estilo PokéMarket, sem abas, 2 seções ===== */
.evd-bal { display: inline-flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-left: auto; }
.evd-kchip { display: inline-flex; align-items: center; gap: 6px; background: #0b1422; border: 1px solid #243349; border-radius: 999px; padding: 4px 11px 4px 7px; font-size: 12px; color: #cdd8ea; font-weight: 600; }
.evd-kchip b { color: #ffce54; }
.evd-kchip-ic, .evd-cic, .evd-pic, .evd-pmon { display: inline-block; image-rendering: pixelated; background-position: center; background-repeat: no-repeat; background-size: contain; }
.evd-kchip-ic { width: 20px; height: 20px; }
.evd-coin, .evd-vip { display: inline-block; }
.evd-sec { margin-bottom: 16px; }
#evdrop-mk .shop-grid { grid-template-columns: repeat(auto-fit, 172px); justify-content: center; }
.evd-sec-h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: #cfe0f5; margin: 4px 0 12px; padding-bottom: 8px; border-bottom: 1px solid #1d293b; }
.evd-sec-h i { color: #ffce54; }
.evd-sec-sub { font-size: 11px; color: #8fa6c2; font-weight: 600; }
.evd-sub { -webkit-line-clamp: 2 !important; }
.evd-card .sc-foot { flex-direction: row !important; align-items: center; justify-content: space-between; gap: 8px; }
.evd-cost { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: #eef3f9; white-space: nowrap; background: rgba(11,18,30,.8); border: 1px solid rgba(255,255,255,.13); border-radius: 999px; padding: 3px 9px 3px 7px; box-shadow: 0 2px 6px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06); }
.evd-cost .evd-cic { width: 20px; height: 20px; }
.evd-pic, .evd-pmon { width: 42px; height: 42px; }
.evd-coin { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); }
.evd-silver { background: radial-gradient(circle at 35% 30%, #fff, #aebccd 62%, #7d8da3); }
.evd-gold { background: radial-gradient(circle at 35% 30%, #fff3c0, #e6b54a 62%, #b8851d); }
.evd-vip { width: 30px; height: 30px; background: url('/old/images/vip.gif?v=1205') center/contain no-repeat; image-rendering: pixelated; }
.evd-shiny { color: #6bd6ff; }
.evd-card.evd-soldout { opacity: .5; }
.evd-card .evd-buy { flex: 0 0 auto; padding: 5px 16px; }
.evd-empty, .evd-loading { text-align: center; color: #8fa6c2; padding: 22px; font-weight: 600; }
@media (max-width: 560px) { .evd-bal { margin-left: 0; flex-basis: 100%; justify-content: flex-start; } }
/* ===== Especialistas: Move Tutor (custo) + Natures ===== */
.tut-cost { display: flex; gap: 6px; justify-content: center; margin-top: 3px; }
.tut-c { font-size: 11px; font-weight: 800; padding: 2px 8px 3px; border-radius: 999px; background: rgba(11,18,30,.8); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 2px 6px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06); }
.tut-c.s { color: #eef3f9; }
.tut-c.g { color: #ffce54; }
.tut-move.tut-poor { opacity: .55; }
.nat-cur { text-align: center; color: #cdd8ea; font-size: 13px; margin: 4px 0 14px; }
.nat-cur b { color: #ffce54; }
.nat-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.nat-card { background: #0e1726; border: 1px solid #1f2c40; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.nat-h { font-weight: 800; color: #eaf2ff; font-size: 15px; }
.nat-d { font-size: 12px; color: #9fb2cc; line-height: 1.35; flex: 1; }
.nat-row { display: flex; gap: 6px; }
.nat-row select { flex: 1; min-width: 0; padding: 7px 8px; font-size: 12px; background: #0b1422; color: #eaf1ff; border: 1px solid #25344a; border-radius: 8px; }
.nat-go { background: linear-gradient(180deg,#3fb763,#2c9249); color: #fff; border: 0; border-radius: 9px; padding: 9px 12px; font-weight: 800; font-size: 13px; cursor: pointer; transition: filter .12s; }
.nat-go:hover:not(:disabled) { filter: brightness(1.1); }
.nat-go:disabled { opacity: .5; cursor: default; filter: grayscale(.5); }
.nat-info { margin: 14px 2px 2px; padding: 11px 14px; background: rgba(255,206,84,.06); border: 1px solid rgba(255,206,84,.28); border-left: 3px solid #ffce54; border-radius: 10px; color: #c9d5e6; font-size: 12.5px; line-height: 1.5; }
.nat-info b { color: #ffce54; }
.cur-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.cur-dot.s { background: linear-gradient(160deg,#eef3f9,#aebccd); }
.cur-dot.g { background: linear-gradient(160deg,#ffe08a,#e0a72a); }
.tut-c { display: inline-flex; align-items: center; gap: 4px; }
.nat-go .cur-dot { vertical-align: middle; margin: 0 1px; }
/* Arco superior (meia-lua) sobre a cabeça do treinador. 7 posições simétricas. */
.ri-pos-0 { transform: translate(-150px, 96px); }
.ri-pos-1 { transform: translate(-120px, 30px); }
.ri-pos-2 { transform: translate(-68px, -6px); }
.ri-pos-3 { transform: translate(0px, -20px); }
.ri-pos-4 { transform: translate(68px, -6px); }
.ri-pos-5 { transform: translate(120px, 30px); }
.ri-pos-6 { transform: translate(150px, 96px); }
@media (max-width: 560px) { .radial-menu { transform: scale(.82); margin: -28px auto; } }
/* Atalhos de batalha (Caça / Treinador) abaixo do megafone — hex centralizados lado a lado. */
.quick-battle { display: flex; justify-content: center; align-items: flex-start; gap: 3px; margin: 12px auto 0; flex-wrap: wrap; }
.qb-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; border: none; background: transparent; cursor: pointer; }
.qb-item .ic { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: #fff; font-size: 18px;
background: url('/old/layout/images/NewLayout/Event.png?v=1205') no-repeat center / contain;
text-shadow: 0 1px 2px #000, 0 0 3px #000; transition: filter .12s, transform .12s; }
.qb-item .ic-swords { font-size: 20px; }
.qb-item:hover .ic { filter: brightness(1.18); transform: scale(1.1); }
.qb-item:active .ic { transform: scale(.92); }
.qb-lbl { font-size: 10.5px; font-weight: 700; color: #eaf1ff; text-shadow: 0 1px 2px #000; }
/* No conteúdo, os golpes viram grade 2x2 (como o jogo antigo). flex-grow:0 pra
um golpe sozinho na linha (1 ou 3 golpes) NÃO esticar — ocupa só a coluna dele. */
.battle-menu-content .moves { flex-wrap: wrap; }
.battle-menu-content .btn-type { flex: 0 1 calc(50% - 6px); }
@media (max-width: 560px) {
.battle-menu-content { flex-basis: 100%; max-width: none; }
}
@media (max-width: 360px) {
.buttons-battle { width: 232px; }
.selector { width: 116px; height: 42px; background-size: 116px 42px; }
.selector.bag, .selector.run { margin-left: -5px; }
}
/* === Mobile (retrato OU paisagem curta): reduz a UI da batalha ~40% (fontes/log/moves)
e deixa o botão de fechar o log MUITO maior/visível (antes era um sliver de 24px). === */
@media (max-width: 560px), (max-height: 480px) {
/* Rótulos e textos do menu/golpes −40% */
#controls .label { font-size: 8px; margin: 5px 0 3px; }
.btn-type { height: 44px; padding: 5px 8px; }
.btn-type .movename { font-size: 8px; padding-right: 34px; }
.btn-type .movepp { font-size: 7px; right: 7px; bottom: 4px; }
.move-categorie { transform: scale(.72); transform-origin: top right; }
.battle-pokemon { font-size: 8px; height: 44px; padding-left: 42px; }
.battle-pokemon .hp_red { height: 5px; width: 84px; margin-top: 5px; }
.bag-item, .bag-empty, .bag-name { font-size: 8px; }
.bag-qty { font-size: 8px; }
}
/* O battle.css do Showdown assume box-sizing: content-box. O tema (bootstrap)
força border-box globalmente, o que achatava a barra de HP (o .hp virava só
as bordas, sem preenchimento). Restaura content-box no escopo da batalha. */
#battle-frame, #battle-frame * { box-sizing: content-box; }
/* Confirmação de Fugir (SweetAlert temático, combinando com os modais do jogo). */
#battle-panel { position: relative; } /* contexto p/ confinar o modal de Fugir só na batalha */
.ss-swal-cont.swal2-container { position: absolute !important; inset: 0 !important; padding: 12px; }
/* Escurece SÓ a janela da batalha (overlay próprio dentro do #battle-panel; controle total). */
.ss-flee-dim { position: absolute; inset: 0; z-index: 9000; background: rgba(3,5,9,.62); border-radius: inherit; pointer-events: auto; animation: ss-dim-in .18s ease; } /* acima dos controles (z40-42), abaixo do modal (z100050); bloqueia cliques nos botões */
@keyframes ss-dim-in { from { opacity: 0; } to { opacity: 1; } }
.ss-swal.swal2-popup { width: auto; min-width: 280px; max-width: 96%; padding: 20px 22px 16px; background: linear-gradient(180deg, #141a26, #0e121b); border: 1px solid #2b3346; border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.03); color: #cdd8ea; }
.ss-swal-title { color: #f1f5fc !important; font-weight: 800 !important; font-size: 20px !important; padding: 0 !important; }
.ss-swal-run { display: flex; flex-direction: column; align-items: center; gap: 11px; margin: 10px 0 2px; }
.ss-swal-run-ico { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; background: radial-gradient(circle at 50% 35%, rgba(224,57,75,.22), rgba(224,57,75,.05)); border: 1px solid rgba(224,57,75,.5); }
.ss-swal-run-tx { color: #aebbcf; font-size: 14px; line-height: 1.4; }
.ss-swal-actions { gap: 10px !important; margin-top: 8px !important; }
.ss-swal-confirm, .ss-swal-cancel { border: 0 !important; border-radius: 10px !important; padding: 10px 22px !important; font-weight: 800 !important; font-size: 14px !important; cursor: pointer; transition: filter .12s, background .12s; }
.ss-swal-confirm { background: linear-gradient(180deg, #e0394b, #b82a3a) !important; color: #fff !important; box-shadow: 0 3px 12px rgba(224,57,75,.3); }
.ss-swal-confirm:hover { filter: brightness(1.1); }
.ss-swal-cancel { background: #2a3346 !important; color: #cdd8ea !important; }
.ss-swal-cancel:hover { background: #37425a !important; }
@keyframes ss-swal-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.ss-swal-in { animation: ss-swal-in .18s ease-out; }
@keyframes ss-swal-out { to { opacity: 0; transform: scale(.96); } }
.ss-swal-out { animation: ss-swal-out .12s ease-in forwards; }
/* Splash da Z-Move: arte cobrindo a cena com a MESMA pegada do banner de Vitória —
entra deslizando de lado com leve overshoot, segura, e sai com pop + fade (~1,75s). */
.ss-zmove-ov { position: absolute; inset: 0; z-index: 46; display: flex; align-items: center; justify-content: center; pointer-events: none; overflow: hidden; }
.ss-zmove-ov img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 0 22px rgba(0,0,0,.7)); will-change: transform, opacity; animation: ssZmoveIn 1.75s cubic-bezier(.2,.85,.3,1.15) forwards; }
@keyframes ssZmoveIn {
0% { opacity: 0; transform: translateX(-55%) scale(1.3) skewX(-10deg); }
12% { opacity: 1; transform: translateX(3%) scale(1) skewX(0deg); }
18% { transform: translateX(0) scale(1); }
72% { opacity: 1; transform: translateX(0) scale(1.03); }
100% { opacity: 0; transform: translateX(9%) scale(1.13) skewX(6deg); }
}
/* Fundo de DUELO para batalhas de Treinador (NPC) e PVP. */
#battle-panel.battle-trainer #battle-frame .backdrop,
#battle-panel.battle-pvp #battle-frame .backdrop { background-image: url('/old/images/attack/backgrounds/Duel-Battle-New.png?v=1205') !important; }
/* Sombra nos sprites do pokémon (drop-shadow, como o jogo antigo). */
#battle-frame img[src$=".gif"] { filter: drop-shadow(0 4px 3px rgba(0,0,0,.55)); }
/* ====== Barras de vida/EXP do jogo antigo (molduras new_bar / new_bar2) ======
Reskin da statbar do Showdown. As molduras novas são 190x36 (px nativos): a
imagem é ancorada na BASE da statbar (sem esticar) e o nome do pokémon fica
ACIMA dela. Geometria das fendas (medida nos PNGs): pokébola x0-30, rótulos
"HP"/"EXP" x32-56, sulco de carbono x~58-176. O HP (largura via JS) e o EXP
(largura via --exp, 0 a 1) são posicionados dentro do sulco. lstatbar =
selvagem (só HP, centralizado), rstatbar = seu pokémon (HP em cima + EXP). */
#battle-frame .statbar {
width: 190px !important; height: 52px !important; min-height: 52px !important;
padding: 0 !important; background-repeat: no-repeat !important;
background-position: left bottom !important;
background-size: 190px 36px !important; }
#battle-frame .lstatbar { background-image: url('/old/layout/images/attack/new_bar2.png?v=1205'); }
#battle-frame .rstatbar { background-image: url('/old/layout/images/attack/new_bar.png?v=1205'); }
#battle-frame .statbar strong {
position: absolute; top: 1px; left: 30px; right: 6px; margin: 0 !important;
text-align: left !important; font-size: 11px; line-height: 1.1;
color: #fff !important; text-shadow: 0 1px 2px #000, 0 0 2px #000;
white-space: nowrap; overflow: hidden; }
/* Nome do pokémon desce: oponente (lstatbar) +10px, seu pokémon (rstatbar) +7px. */
#battle-frame .lstatbar strong { top: 11px; }
#battle-frame .rstatbar strong { top: 8px; }
#battle-frame .statbar .hpbar {
position: absolute !important; left: 49px; width: 111px !important; height: 4px !important;
padding: 0 !important; border: 0 !important; border-radius: 2px !important;
background: rgba(0,0,0,.35) !important; }
#battle-frame .lstatbar .hpbar { top: 31px; left: 52px; }
#battle-frame .rstatbar .hpbar { top: 28px; }
#battle-frame .statbar .hpbar .prevhp {
height: 4px !important; background: transparent !important; border-radius: 2px !important; }
#battle-frame .statbar .hpbar .hp {
height: 4px !important; border: 0 !important; border-radius: 2px !important;
background: url('/old/layout/images/progress.gif?v=1205') left center / 111px 4px no-repeat !important; }
#battle-frame .statbar .hpbar .hp-yellow { background: #f5d538 !important; }
#battle-frame .statbar .hpbar .hp-red { background: #ee4928 !important; }
#battle-frame .statbar .hpbar .hptext {
position: absolute !important; top: -2px !important; left: auto !important; right: 0 !important;
width: auto !important; height: auto !important; padding: 0 1px !important;
background: transparent !important; color: #fff !important;
text-shadow: 0 0 2px #000, 0 0 2px #000 !important; font-size: 8px !important;
border-radius: 0 !important; }
#battle-frame .statbar .hpbar .hptextborder { display: none !important; }
/* Barra de EXP: só no seu pokémon (rstatbar), na fenda logo abaixo do HP.
Largura controlada por --exp (0 a 1); placeholder até a Fase 3 dar o EXP real. */
#battle-frame .rstatbar { --exp: 0; }
#battle-frame .rstatbar::after {
content: ''; position: absolute; left: 60px; top: 37px;
width: 106px; height: 3px; border-radius: 2px;
background: linear-gradient(#46a8ff, #0074D9);
transform: scaleX(var(--exp)); transform-origin: left center;
transition: transform .6s ease; }
#battle-frame .rstatbar.no-anim::after { transition: none; }
/* O aliado (slot direito do SEU lado) deve ter a MESMA barra dos rivais: só HP,
sem EXP. Recebe a moldura e o posicionamento da lstatbar (new_bar2.png). */
#battle-frame .rstatbar.rightstatbar::after { display: none; }
#battle-frame .rstatbar.rightstatbar { background-image: url('/old/layout/images/attack/new_bar2.png?v=1205'); }
#battle-frame .rstatbar.rightstatbar strong { top: 11px; }
#battle-frame .rstatbar.rightstatbar .hpbar { top: 31px; left: 52px; }
#battle-frame .statbar .status {
position: absolute !important; top: 16px; left: 32px; min-height: 0 !important; }
/* No 2x2 as barras de HP dos inimigos se sobrepõem. A do Rival (lado esquerdo)
deve ficar à frente da do Rival 2 (lado direito). */
#battle-frame .lstatbar.leftstatbar { z-index: 6; }
#battle-frame .lstatbar.rightstatbar { z-index: 5; }
/* Sobe (a posição `top` vem inline da cena; margem negativa desloca sem brigar).
Pikachu (meu) sobe 20px. Rival 2 (Tyranitar) começa na borda do quadro, então
só -10px: corta o espaço vazio acima do nome (que fica a 11px do topo) sem
esconder o nome. */
#battle-frame .rstatbar.leftstatbar { margin-top: -20px; }
#battle-frame .lstatbar.rightstatbar { margin-top: -10px; }
/* Área da batalha + painel de log deslizante com seta na direita. */
#battle-area { position: relative; width: -moz-fit-content; width: fit-content;
margin: 0 auto; overflow: hidden; }
/* Seta ancorada na base-direita (longe do time inimigo, que fica no topo). */
#log-toggle { position: absolute; bottom: 80px; right: 0; z-index: 20;
width: 24px; height: 56px; border: 0; cursor: pointer; padding: 0; line-height: 56px;
background: rgba(20,26,30,.85); color: #2FB2EF; font-size: 22px; font-weight: 700;
border-radius: 6px 0 0 6px; transition: right .28s ease; }
#log-toggle:hover { background: rgba(40,50,58,.95); }
#battle-area.log-open #log-toggle { right: 300px; }
#log.battlelog-panel { position: absolute; top: 0; right: 0; width: 300px; height: 100%;
overflow-y: auto; z-index: 19; background: rgba(17,22,26,.95); color: #e8eef0;
text-align: left; padding: 6px 10px; border-radius: 8px 0 0 8px;
box-shadow: -6px 0 18px rgba(0,0,0,.55);
transform: translateX(100%); transition: transform .28s ease; }
#battle-area.log-open #log.battlelog-panel { transform: translateX(0); }
#log.battlelog-panel .message-log { font-size: 12px; }
/* Mobile (retrato OU paisagem curta): log com fonte −40%, painel mais estreito e
botão de abrir/fechar BEM maior (antes era um sliver de 24px, difícil de tocar).
Posto DEPOIS da base acima pra vencer por ordem (mesma especificidade). */
@media (max-width: 560px), (max-height: 480px) {
#log.battlelog-panel { width: 240px; padding: 5px 8px; }
#log.battlelog-panel .message-log { font-size: 7px; }
#log.battlelog-panel .message-log h2 { font-size: 9px; }
#battle-area.log-open #log-toggle { right: 240px; }
/* Seta menor e colada no canto inferior-direito (não cobre o time inimigo do topo). */
#log-toggle { width: 32px; height: 48px; line-height: 48px; font-size: 22px;
bottom: 6px;
background: rgba(20,26,30,.96); border: 1px solid rgba(255,255,255,.2);
box-shadow: -3px 0 10px rgba(0,0,0,.5); }
#tooltipwrapper .tooltip { font-size: 10px; }
}
/* A batalha do Showdown é 640x360 fixo. fitBattle() (JS) escala via transform
pra caber no container; transform-origin no topo-esquerda casa com a battle-area. */
#battle-frame { transform-origin: top left; }
/* Tooltip dos golpes: o BattleTooltips cria #tooltipwrapper no com
z-index auto. Os sprites/elementos da cena de batalha usam z-index altos no
mesmo stacking context raiz e acabavam pintando POR CIMA da tooltip (ficava
invisível). Elevamos o wrapper pra garantir que apareça na frente, como antes. */
#tooltipwrapper { z-index: 10000 !important; }
/* O Bootstrap define .tooltip { opacity: 0 } e o Showdown usa a MESMA classe
.tooltip — o battle.css estiliza a caixa mas não declara opacity, então o 0 do
Bootstrap vencia e a tooltip ficava transparente (invisível). Forçamos opaca,
escopado no wrapper pra não mexer em tooltips do Bootstrap em outros lugares. */
#tooltipwrapper .tooltip { opacity: 1 !important; }
/* ---------- Seletor de idioma (bandeiras no topo) ---------- */
#main-nav .lang-select img { width: 22px; height: auto; vertical-align: middle;
border-radius: 2px; opacity: .55; transition: opacity .15s ease, transform .15s ease; }
#main-nav .lang-select a { padding: 0 3px; }
#main-nav .lang-select a:hover img { opacity: 1; }
#main-nav .lang-select a.active img { opacity: 1; transform: scale(1.12);
box-shadow: 0 0 0 1px #2FB2EF; }
/* ---------- Menu hambúrguer (mobile) ---------- */
.nk-nav-table { position: relative; }
/* !important vence a regra do tema (.nk-nav-table > * { display: table-cell }). */
.nav-burger { display: none !important; }
/* Navbar fixa no topo (sticky) — substitui o sticky-JS do tema antigo (corrige a barra cortada ao rolar). */
#showmenu .nk-header { position: sticky; top: 0; z-index: 1500; }
/* Desktop: submenu "Minha Conta" abre no HOVER (igual ao antigo), alem do clique. */
@media (min-width: 992px) {
#main-nav .nk-account:hover > .acc-menu { display: block; }
#main-nav .nk-account > .acc-menu { margin-top: 20px; }
/* ponte invisível no gap acima do menu — mantém o hover (não fecha ao descer o mouse). */
#main-nav .nk-account > .acc-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
}
/* ---------- Menu mobile off-canvas (fiel ao tema antigo goodgames) ---------- */
@media (max-width: 991px) {
.nav-burger { display: block !important; position: absolute; right: 12px; top: 50%;
transform: translateY(-50%); background: none; border: 0; cursor: pointer; z-index: 3100; padding: 0; }
.nav-burger .ButtonMobile { display: block; width: 38px; height: 45px !important; }
/* O tema esconde a logo no mobile (.nk-nav-logo display:none) → a navbar colapsa pra ~6px
e o conteúdo sobe pro topo. Forçamos a logo visível e damos altura à barra. */
#showmenu .nk-navbar-top .nk-nav-table { position: relative; min-height: 54px; }
#showmenu .nk-navbar-top .nk-nav-logo { display: inline-flex !important; align-items: center; height: 54px; padding-left: 12px; }
#showmenu .nk-navbar-top .nk-nav-logo img { width: auto; height: 38px; }
#main-nav.nk-nav-right {
display: block !important; position: fixed; top: 0; right: 0; height: 100vh;
width: 78vw; max-width: 300px; margin: 0; padding: 64px 0 24px; list-style: none;
background: #1b2430; box-shadow: -8px 0 26px rgba(0,0,0,.6); z-index: 3000;
transform: translateX(100%); transition: transform .28s ease; overflow-y: auto; }
#main-nav.nk-nav-right.open { transform: translateX(0); }
#main-nav.nk-nav-right li { display: block; float: none; border-bottom: 1px solid rgba(255,255,255,.06); }
#main-nav.nk-nav-right > li > a { display: block; padding: 14px 20px; text-align: left; color: #cdd8ea; font-size: 14px; }
#main-nav.nk-nav-right > li > a:hover { background: #283649; color: #fff; }
/* Especificidade alta p/ vencer "#main-nav.nk-nav-right li { display:block }" (senão empilham). */
#main-nav.nk-nav-right li.lang-select { display: flex; justify-content: center; gap: 16px; padding: 16px 20px; }
#main-nav.nk-nav-right li.lang-select a { display: inline-flex; padding: 4px; }
#main-nav .lang-select img { width: 30px; }
/* O painel off-canvas precisa ser OPACO: a .nk-navbar do tema tem opacity:.8 e isso
"vaza" pro painel (compositing). Com o menu aberto, força opaco. */
body.mnav-open #showmenu .nk-navbar { opacity: 1; }
#main-nav .nk-account .acc-menu { position: static; display: none; min-width: 0; margin: 0; padding: 0; background: rgba(0,0,0,.18); border: 0; box-shadow: none; }
#main-nav .nk-account.open .acc-menu { display: block; }
#main-nav .nk-account .acc-menu li a { padding: 12px 20px 12px 38px; font-size: 13px; }
#mnav-overlay { display: none; position: fixed; inset: 0; background: rgba(8,12,16,.6); z-index: 2900; }
#mnav-overlay.open { display: block; }
/* Com o menu aberto, eleva o contexto do header ACIMA do overlay — senão o overlay
(fora do header, z-index 2900) cobre o painel (preso no contexto do header, 1500)
e qualquer clique no painel acaba acertando o overlay, fechando o menu. */
body.mnav-open #showmenu .nk-header { z-index: 3100; }
}
/* Modo EMBED (iframe do Painel Admin → Editor de Mapas): mostra só o editor. */
body.ss-embed .nk-header { display: none !important; }
body.ss-embed .nk-footer, body.ss-embed footer, body.ss-embed .nk-gap-2, body.ss-embed .nk-gap-3 { display: none !important; }
body.ss-embed .container > .row.vertical-gap:not(#conteudo) { display: none !important; } /* esconde a "home" (time/radial/moedas) */
body.ss-embed .nk-main { padding: 0 !important; }
body.ss-embed .container { max-width: 100% !important; padding: 6px !important; }
body.ss-embed { background: #0c1118 !important; }
/* ---------- Box Pokémon (réplica de pages/box.php + box.css) ---------- */
.ssbox-overlay { position: fixed; inset: 0; background: rgba(8,12,16,.80);
z-index: 1000; display: none; align-items: flex-start; justify-content: center;
overflow-y: auto; padding: 100px 10px 22px; } /* padding-top 100 = abaixo da navbar (90px) */
.ssbox-overlay.open { display: flex; }
/* Box ancorada DENTRO da janela do mapa (igual a batalha/centro) quando aberta no Safari. */
.ssbox-overlay.ssbox-docked { position: absolute; z-index: 7; padding: 12px 8px; background: rgba(8,12,16,.55); }
.ssbox-overlay.ssbox-docked .ssbox-panel { width: min(740px, 96%); }
.ssbox-panel { width: min(760px, 96vw); background: linear-gradient(180deg, #1a2230, #131a26); color: #cdd8ea;
border: 1px solid #2a3a52; border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.6);
font-family: 'Open Sans', Arial, sans-serif; overflow: hidden; }
.ssbox-head { display: flex; align-items: center; justify-content: space-between;
padding: 13px 16px; background: linear-gradient(180deg, #243250, #1a2336); border-bottom: 1px solid #2a3a52; }
.ssbox-title { font-weight: 800; font-size: 16px; letter-spacing: .3px; color: #eaf1ff; }
.ssbox-title small { color: #9eb6d8; font-weight: 700; margin-left: 6px; font-size: 12px; }
.ssbox-close { background: none; border: 0; color: #9fb0c4; font-size: 24px; line-height: 1;
cursor: pointer; padding: 0 4px; transition: color .12s; }
.ssbox-close:hover { color: #fff; }
.ssbox-body { padding: 14px 16px 18px; }
.ssbox-handwrap { text-align: center; margin-bottom: 8px; font-size: 10.5px; color: #8fa6c8; font-weight: 800;
text-transform: uppercase; letter-spacing: .8px; }
/* Mão (time) — SEM o fundo hand3.png: slots arredondados limpos e modernos. Grid de 6
colunas (tamanho FIXO). Quando não couber, vira 3x2 (não redimensiona os slots). */
.ssbox-hand { width: fit-content; max-width: 100%; margin: 0 auto 16px; padding: 8px 10px;
display: grid; grid-template-columns: repeat(6, 44px); gap: 7px; justify-content: center;
background: rgba(0,0,0,.22); border: 1px solid #243046; border-radius: 14px; }
.ssbox-hand .ssbox-cell { width: 44px; height: 44px; background: #141c29; border: 1px solid #29374f;
border-radius: 11px; transition: border-color .12s, background .12s; }
.ssbox-hand .ssbox-cell:first-child { box-shadow: inset 0 0 0 1px rgba(255,208,90,.25); } /* líder (1º) sutil */
.ssbox-hand .ssbox-cell.ssbox-drophl { border-color: #ffd86b; background: #20304a; }
.ssbox-hand .ssbox-mon > img { width: 34px; height: 34px; }
.ssbox-nav { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; }
.ssbox-nav .ssbox-arrow { background: none; border: 0; cursor: pointer; padding: 2px 8px; color: #cfe0ff; font-size: 18px; }
.ssbox-nav .ssbox-arrow:hover { color: #fff; }
.ssbox-nav .ssbox-arrow:disabled { opacity: .35; cursor: default; }
.ssbox-select { background: url('/old/layout/images/box/Simple_top.png?v=1205') no-repeat; background-size: 100% 100%;
color: #fff; border: 0; padding: 4px 10px; min-width: 190px; text-align: center; text-align-last: center;
font: 14px monospace; cursor: pointer;
text-shadow: -.5px 0 1px #000, .5px 0 1px #000, 0 .5px 1px #000, 0 -.5px 1px #000; }
.ssbox-select option { color: #000; }
.ssbox-cfg { background: #34465f; border: 1px solid #27374e; color: #cdd8ea; border-radius: 5px;
cursor: pointer; font-size: 11px; font-weight: 700; padding: 4px 8px; }
.ssbox-cfg:hover { background: #3d5170; }
.ssbox-cfg.ssbox-relall { background: #6f2b2b; border-color: #8a3636; color: #f2d7d7; } /* "Soltar Box" — danger */
.ssbox-cfg.ssbox-relall:hover { background: #8a3636; }
/* Filtro da Box (nome/apelido/espécie + classificação) — desfoca quem não corresponde */
.ssbox-filter { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 8px; }
.ssbox-filter .fa { color: #7f93ad; font-size: 12px; }
.ssbox-filter input { background: #0c1320; border: 1px solid #27374e; color: #cdd8ea; border-radius: 5px;
padding: 4px 8px; font-size: 12px; width: 210px; outline: none; }
.ssbox-filter input:focus { border-color: #2FB2EF; }
.ssbox-filter select { background: #34465f; border: 1px solid #27374e; color: #cdd8ea; border-radius: 5px;
padding: 4px 6px; font-size: 12px; cursor: pointer; }
.ssbox-filter button { background: #34465f; border: 1px solid #27374e; color: #cdd8ea; border-radius: 5px;
cursor: pointer; font-size: 13px; font-weight: 700; padding: 2px 8px; line-height: 1.3; }
.ssbox-filter button:hover { background: #3d5170; }
/* Igual ao box.php antigo: blur(0.9px) + opacity .2 nos que NÃO batem com o filtro */
.ssbox-cell.ssbox-dim { filter: blur(0.9px); opacity: .2; }
.ssbox-cell.ssbox-dim .ssbox-mon { pointer-events: none; }
.ssbox-gridwrap { display: flex; justify-content: center; }
.ssbox-grid { display: grid; grid-template-columns: repeat(10, 46px); grid-auto-rows: 46px;
background: url('/old/layout/images/box/Simple.png?v=1205') no-repeat; background-size: 100% 100%;
border: 10px solid transparent; border-image: url('/old/layout/images/box/border2.png?v=1205') 10 round;
border-radius: 12px; }
.ssbox-cell { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
position: relative; box-sizing: border-box; }
.ssbox-cell.ssbox-drophl { background: rgba(255,255,255,.18); border-radius: 8px;
box-shadow: inset 0 0 0 2px #ffd86b; }
.ssbox-mon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
cursor: grab; position: relative; }
/* `> img` = SÓ o sprite (filho direto). Sem o `>`, estas regras de tamanho também pegavam a
![]()
da medalha dentro de .ssbox-champ e a inchavam ao tamanho do sprite. */
.ssbox-mon > img { width: 32px; height: 32px; image-rendering: pixelated; pointer-events: none; }
/* Aura de raridade (brilho girando sutil ATRÁS do sprite — só na box): verde=Inicial, amarelo=Lendário, roxo=Mítico */
.ssbox-mon.ssbox-aura { overflow: visible; }
.ssbox-mon.ssbox-aura > img { position: relative; z-index: 1; }
.ssbox-mon.ssbox-aura::before {
content: ''; position: absolute; left: 50%; top: 50%; width: 85%; height: 85%;
transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 0; opacity: .65;
-webkit-mask-image: radial-gradient(circle, #000 22%, rgba(0,0,0,.8) 52%, transparent 80%);
mask-image: radial-gradient(circle, #000 22%, rgba(0,0,0,.8) 52%, transparent 80%);
/* PERF: promove a camada -> pinta 1x e gira na GPU (composite), sem repintar o conic-gradient+mask a cada frame */
will-change: transform; backface-visibility: hidden;
animation: ssbox-aura-spin 7s linear infinite; }
.ssbox-mon.ssbox-aura-starter::before { background: repeating-conic-gradient(from 0deg, rgba(90,240,140,1) 0deg 6deg, transparent 6deg 16deg); }
.ssbox-mon.ssbox-aura-legend::before { background: repeating-conic-gradient(from 0deg, rgba(255,214,64,1) 0deg 6deg, transparent 6deg 16deg); }
.ssbox-mon.ssbox-aura-myth::before { background: repeating-conic-gradient(from 0deg, rgba(200,120,255,1) 0deg 6deg, transparent 6deg 16deg); }
@keyframes ssbox-aura-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.ssbox-mon.ui-draggable-dragging { cursor: grabbing; z-index: 5000; }
/* Seleção múltipla (segurar p/ selecionar; mover vários p/ outra box) */
.ssbox-overlay.ssbox-selecting .ssbox-mon { cursor: pointer; }
.ssbox-mon.ssbox-sel { outline: 3px solid #4fd07a; outline-offset: -2px; border-radius: 8px; box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 0 12px rgba(79,208,122,.5); }
.ssbox-mon.ssbox-sel::after { content: '\f00c'; font-family: 'FontAwesome'; position: absolute; top: -4px; left: -4px; width: 15px; height: 15px; line-height: 15px; text-align: center; font-size: 9px; color: #fff; background: #2fae5a; border: 1px solid #0b1a10; border-radius: 50%; z-index: 3; }
.ssbox-selbar { display: none; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 8px 2px 0; padding: 9px 12px; background: linear-gradient(180deg,#12351f,#0e2417); border: 1px solid #2f7d4c; border-radius: 11px; }
.ssbox-selbar.open { display: flex; animation: ss-selbar-in .16s ease; }
@keyframes ss-selbar-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ssbox-selinfo { color: #d8f0e0; font-size: 13px; font-weight: 700; }
.ssbox-selinfo b { color: #9fe9b8; }
.ssbox-selbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.ssbox-selbtn { border: 0; border-radius: 9px; padding: 8px 14px; font-weight: 800; font-size: 12.5px; cursor: pointer; color: #cfe0ee; background: #21344a; transition: filter .12s; }
.ssbox-selbtn:hover:not(:disabled) { filter: brightness(1.12); }
.ssbox-selbtn:disabled { opacity: .5; cursor: default; }
.ssbox-selbtn.ssbox-selmove { background: linear-gradient(180deg,#3fb763,#2c9249); color: #fff; }
.ssbox-selbtn.ssbox-sellock { background: linear-gradient(180deg,#d9a441,#b6801f); color: #fff; }
.ssbox-selbtn.ssbox-selrelease { background: linear-gradient(180deg,#d8524f,#a82f2c); color: #fff; }
.ssbox-selbtn.ssbox-selcancel { background: #3a2a2e; color: #f0c9cd; }
/* iOS/mobile: ao segurar p/ arrastar na Box, o long-press abria o menu "Salvar Imagem" no wallpaper
do fundo (.ssbox-grid) / no sprite. Desliga callout + seleção + arraste nativo nesses elementos,
e trava o touch no arrasto (touch-action:none) — só na área de drag, NÃO no campo de busca. */
.ssbox-gridwrap, .ssbox-grid, .ssbox-cell, .ssbox-mon, .ssbox-mon img, .ssbox-hand {
-webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.ssbox-mon, .ssbox-mon img { -webkit-user-drag: none; }
.ssbox-mon { touch-action: none; }
.ssbox-mon .ssbox-shiny { position: absolute; top: -2px; right: -1px; font-size: 10px; color: #ffd54a;
text-shadow: 0 0 2px #000, 0 0 2px #000; pointer-events: none; }
/* Medalha: rank 1/2/3 da espécie em Poder Total (mesmo cálculo do Top 3 da Pokédex). */
.ssbox-mon .ssbox-champ { position: absolute; top: -2px; left: 4px; z-index: 2; pointer-events: none; filter: drop-shadow(0 1px 1px #000); width: 32px; }
.ssbox-mon .ssbox-champ img { width: 12px; height: 12px; display: block; }
.ssbox-mon .ssbox-lockbadge { position: absolute; bottom: -3px; right: -2px; font-size: 9px; color: #ffd86b;
background: rgba(0,0,0,.55); border-radius: 50%; width: 14px; height: 14px; display: flex;
align-items: center; justify-content: center; pointer-events: none; }
/* Carrossel de fundo no diálogo "Personalizar box" */
.ssbg-carousel { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 2px; }
.ssbg-carousel .ssbg-arrow { background: #34465f; border: 1px solid #27374e; color: #cdd8ea; border-radius: 6px;
cursor: pointer; font-size: 18px; line-height: 1; padding: 10px 12px; }
.ssbg-carousel .ssbg-arrow:hover { background: #3d5170; color: #fff; }
.ssbg-preview { width: 230px; height: 130px; border-radius: 8px; background-size: cover; background-position: center;
border: 3px solid #27374e; box-shadow: inset 0 0 0 2px rgba(255,255,255,.06); }
.ssbg-name { text-align: center; font-weight: 700; color: #2c3e50; margin-top: 6px; }
.ssbox-extras { display: flex; gap: 9px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.ssbox-drop { flex: 0 0 98px; min-height: 56px; border: 1.5px dashed #3a4f70; border-radius: 11px;
background: rgba(40,55,80,.40); display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 4px; color: #aebbd6; font-size: 11px; font-weight: 700; text-align: center;
transition: border-color .12s, background .12s, color .12s; }
.ssbox-drop i { font-size: 18px; opacity: .9; }
.ssbox-drop.ssbox-drophl { border-color: #ffd86b; border-style: solid; color: #fff; background: #34496c; box-shadow: 0 0 0 3px rgba(255,216,107,.12); }
.ssbox-drop.ssbox-drop-release { border-color: #7a4141; color: #e6b3b3; background: rgba(70,40,40,.4); }
.ssbox-drop.ssbox-drop-release.ssbox-drophl { border-color: #ff8c8c; border-style: solid; color: #fff; background: #5a3030; }
.ssbox-drop.ssbox-drop-sell { border-color: #3f6b48; color: #b7e6c2; background: rgba(40,70,48,.4); }
.ssbox-drop.ssbox-drop-sell.ssbox-drophl { border-color: #6ee59a; border-style: solid; color: #fff; background: #2f5a3a; }
.eqi-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-height: 320px; overflow-y: auto; padding: 8px 2px; }
.eqi-item { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 96px; padding: 12px 6px 9px; border: 1px solid #25344a; border-radius: 12px; background: #0b1422; color: #cdd8ea; cursor: pointer; transition: border-color .12s, background .12s, transform .1s; }
.eqi-item:hover { border-color: #8a7dff; background: #15203a; transform: translateY(-2px); }
.eqi-ic { width: 24px; height: 24px; image-rendering: pixelated; transform: scale(1.3); margin: 2px 0 8px; }
.eqi-nm { font-size: 11px; font-weight: 700; text-align: center; line-height: 1.15; }
.eqi-qty { font-size: 11px; color: #8fd0ff; font-weight: 600; }
.nick-head { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 2px 0 10px; }
.nick-head .picon { display: inline-block; transform: scale(1.2); }
.nick-sp { font-size: 13px; color: #9fb2c8; font-weight: 700; }
.ss-swal-dark .swal2-input { background: #0b1422; border: 1px solid #2a3346; color: #eaf2ff; box-shadow: none; }
.ss-swal-dark .swal2-input::placeholder { color: #6f8197; }
.ss-swal-dark .swal2-input:focus { border-color: #8a7dff; box-shadow: 0 0 0 2px rgba(138,125,255,.25); }
.ssbox-empty { text-align: center; color: #9eadcd; font-size: 12px; padding: 6px 0 0; }
@media (max-width: 520px) {
.ssbox-grid { grid-template-columns: repeat(10, 30px); grid-auto-rows: 30px; border-width: 7px; }
.ssbox-overlay { padding: 70px 6px 16px; }
.ssbox-panel { width: 96vw; }
/* Só a GRADE encolhe no celular; a MÃO mantém o tamanho e vira 3x2. */
.ssbox-grid .ssbox-mon { width: 28px; height: 28px; }
.ssbox-grid .ssbox-mon > img { width: 24px; height: 24px; }
/* Medalha proporcional ao tile menor do celular (42px → 28px). */
.ssbox-grid .ssbox-mon .ssbox-champ { width: 24px; left: 2px; }
.ssbox-grid .ssbox-mon .ssbox-champ img { width: 10px; height: 10px; }
.ssbox-cell { width: 30px; height: 30px; }
.ssbox-hand { grid-template-columns: repeat(3, 44px); }
.ssbox-select { min-width: 128px; font-size: 12px; }
.ssbox-extras { gap: 6px; flex-wrap: wrap; }
.ssbox-extras .ssbox-drop { flex: 0 0 74px; min-height: 46px; }
/* Card do selvagem 30% menor no celular (ancorado no canto inferior esquerdo). */
#safari .sf-encounter { transform: scale(.7); transform-origin: bottom left; }
}
/* Celular na HORIZONTAL (tela baixa): o card de encontro também encolhe ~40%
(escala .6) pra não tampar metade do mapa. */
@media (max-height: 480px) {
#safari .sf-encounter { transform: scale(.6); transform-origin: bottom left; }
}
/* Menu "Minha Conta" (navbar) */
.nk-account { position: relative; }
#acc-toggle { cursor: pointer; }
.acc-menu { display: none; position: absolute; right: 0; top: 100%; min-width: 250px; margin: 0; padding: 9px 0; list-style: none; background: rgba(0,0,0,.85); border: 0; border-bottom: 4px solid #213571; border-radius: 0; box-shadow: 0 10px 28px rgba(0,0,0,.45); z-index: 2000; }
.nk-account.open .acc-menu { display: block; }
.acc-menu li { display: block; margin: 0; position: relative; }
.acc-menu li a { display: block; padding: 6px 17px; color: #fff; border-radius: 0; white-space: nowrap; font-size: 13px; transition: background .12s, color .12s; }
.acc-menu li a:hover { background: rgba(33,53,113,.6); color: #fff; }
.cur-add { position:absolute; right:7px; top:4px; width:22px; height:26px; border:0; padding:0; cursor:pointer; background:transparent url('/old/layout/images/NewLayout/more-coins-icon.png?v=1205') no-repeat; background-size:22px 52px; background-position:center 0; z-index:3; }
.cur-add:hover { background-position:center -26px; }
.cur-add:active { transform:scale(.9); }
#map-editor { color: #cdd8ea; font-family: 'Open Sans', Arial, sans-serif; font-size: 13px; text-align: left; }
#map-editor .me-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
#map-editor .me-title { font-size: 17px; font-weight: 700; color: #eaf1ff; }
#map-editor .me-wrap { display: flex; gap: 14px; align-items: flex-start; }
#map-editor .panel { background: #283649; border: 1px solid #1c2940; border-radius: 10px; padding: 12px 14px; box-shadow: 0 8px 26px rgba(0,0,0,.35); }
#map-editor .side { width: 300px; flex-shrink: 0; }
#map-editor .editor { flex: 1; min-width: 0; }
#map-editor h3 { margin: 0 0 8px; color: #eaf1ff; }
#map-editor label { display: block; font-weight: 700; font-size: 11px; color: #9eadcd; margin: 10px 0 4px; text-transform: uppercase; letter-spacing: .3px; }
#map-editor input[type=text], #map-editor select { width: 100%; background: #34465f; border: 1px solid #27374e; color: #eaf1ff; border-radius: 6px; padding: 7px 9px; font-size: 13px; }
#map-editor .row2 { display: flex; gap: 8px; }
#map-editor .row2 > div { flex: 1; }
#map-editor button { cursor: pointer; border: 0; border-radius: 6px; font-weight: 700; padding: 8px 12px; font-size: 12px; }
#map-editor .btn-primary { background: #2f6fed; color: #fff; }
#map-editor .btn-primary:hover { background: #3b7dff; }
#map-editor .btn-ghost { background: #34465f; color: #cdd8ea; }
#map-editor .btn-ghost:hover { background: #3d5170; }
#map-editor .btn-danger { background: #b23b3b; color: #fff; }
#map-editor .tools { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
#map-editor .tool, #map-editor .floorbtn { background: #34465f; color: #cdd8ea; border: 2px solid transparent; }
#map-editor .tool.active { border-color: #ffd86b; background: #41557a; color: #fff; }
#map-editor .floorbtn.active { border-color: #5aa0ff; background: #34507a; color: #fff; }
#map-editor .maplist { margin-top: 6px; max-height: 300px; overflow-y: auto; }
#map-editor .maplist .item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; cursor: pointer; }
#map-editor .maplist .item:hover { background: #31415b; }
#map-editor .maplist .item.sel { background: #3a4d6e; }
#map-editor .maplist .item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#map-editor .maplist .item .tag { font-size: 10px; color: #9eadcd; }
#map-editor .canvas-wrap { overflow: auto; max-height: 70vh; border: 1px solid #1c2940; border-radius: 8px; background: #11161f repeating-conic-gradient(#1a212e 0% 25%, #161c27 0% 50%) 0 0 / 24px 24px; }
#map-editor canvas { display: block; image-rendering: pixelated; cursor: crosshair; }
#map-editor .hint { color: #8aa4c0; font-size: 11px; margin-top: 6px; line-height: 1.5; }
#map-editor .msg { padding: 8px 10px; border-radius: 6px; margin-bottom: 8px; display: none; }
#map-editor .msg.ok { background: #244a2e; color: #b6f0c2; display: block; }
#map-editor .msg.err { background: #4a2424; color: #f0b6b6; display: block; }
#map-editor .stat { font-size: 11px; color: #9eadcd; font-weight: 400; }
#map-editor .zoombar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#map-editor input[type=checkbox] { width: auto; vertical-align: middle; }
@media (max-width: 860px) { #map-editor .me-wrap { flex-direction: column; } #map-editor .side { width: 100%; } }
#safari { color: #cdd8ea; font-family: 'Open Sans', Arial, sans-serif; max-width: 1000px; margin: 0 auto; }
#safari .sf-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
#safari .sf-title { font-size: 17px; font-weight: 700; color: #eaf1ff; }
#safari .sf-btn { cursor: pointer; border: 0; border-radius: 6px; font-weight: 700; padding: 8px 12px; font-size: 12px; background: #34465f; color: #cdd8ea; }
#safari .sf-btn:hover { background: #3d5170; }
#safari .sf-list { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* slick base (mesma do login) + carrossel de seleção de mapa */
.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; user-select: none; touch-action: pan-y; }
.slick-list { position: relative; display: block; overflow: hidden; margin: 0 26px; padding: 0; }
.slick-list:focus { outline: none; }
.slick-slider .slick-track, .slick-slider .slick-list { transform: translate3d(0,0,0); }
.slick-track { position: relative; top: 0; left: 0; display: block; }
.slick-track:before, .slick-track:after { display: table; content: ''; }
.slick-track:after { clear: both; }
.slick-slide { display: none; float: left; height: 100%; min-height: 1px; }
.slick-initialized .slick-slide { display: block; }
.slick-arrow { position: absolute; top: 42%; transform: translateY(-50%); z-index: 5; width: 24px; height: 50px; border: none; border-radius: 6px; cursor: pointer; background: rgba(47,178,239,.16); color: #2FB2EF; font-size: 22px; line-height: 50px; padding: 0; }
.slick-arrow:hover { background: rgba(47,178,239,.32); }
.slick-prev { left: -4px; } .slick-next { right: -4px; }
#sf-list .sf-pick-title { text-align: center; color: #eaf1ff; font-weight: 800; font-size: 18px; margin: 6px 0 14px; }
.sf-mapcar { width: min(720px, 92%); margin: 0 auto; }
.sf-map-slide { box-sizing: border-box; padding: 8px; outline: none; text-align: center; }
.sf-map-cell { height: 140px; border: 2px solid #1c2940; border-radius: 10px; background: #11161f center/cover no-repeat; image-rendering: pixelated; transition: transform .2s, border-color .15s, opacity .15s; transform: scale(.82); opacity: .55; }
.slick-center .sf-map-cell { transform: scale(1); opacity: 1; border-color: #2FB2EF; box-shadow: 0 8px 26px rgba(0,0,0,.4); }
.sf-map-name { color: #eaf1ff; font-weight: 700; margin-top: 8px; font-size: 14px; opacity: .55; }
.sf-map-rg { color: #9eadcd; font-size: 11px; opacity: .55; }
.slick-center .sf-map-name, .slick-center .sf-map-rg { opacity: 1; }
.sf-pick-actions { text-align: center; margin-top: 16px; }
.sf-pick-go { background: #2FB2EF; color: #04263a; font-weight: 800; border: 0; border-radius: 9px; padding: 10px 28px; cursor: pointer; font-size: 15px; }
#safari .sf-card { width: 200px; background: #283649; border: 1px solid #1c2940; border-radius: 10px; overflow: hidden; cursor: pointer; box-shadow: 0 8px 26px rgba(0,0,0,.35); transition: transform .12s; }
#safari .sf-card:hover { transform: translateY(-3px); border-color: #5aa0ff; }
#safari .sf-card .thumb { height: 110px; background: #11161f center/cover no-repeat; image-rendering: pixelated; }
#safari .sf-card .meta { padding: 8px 10px; }
#safari .sf-card .nm { font-weight: 700; color: #eaf1ff; font-size: 13px; }
#safari .sf-card .tg { font-size: 11px; color: #9eadcd; margin-top: 2px; }
#safari .sf-empty { color: #9eadcd; padding: 20px; }
/* Menu de mapas no estilo do Safari antigo: quadrados ~46px com recorte do mapa,
opacidade baixa que acende no hover; o atual fica destacado. Nome no tooltip. */
#safari .sf-maps { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 8px; }
#safari .sf-maps .chip { position: relative; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 5px; background: #11161f center / 200% no-repeat; image-rendering: pixelated; opacity: .4; cursor: pointer; border: 2px solid transparent; transition: opacity .15s, transform .12s; }
#safari .sf-maps .chip:hover { opacity: 1; transform: translateY(-2px); }
#safari .sf-maps .chip.cur { opacity: 1; border-color: #ffd86b; }
#safari .sf-maps .chip .sf-walk { width: 34px; height: 34px; image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
/* Miniatura fixa "Minha Propriedade" no fim da barra — igual às de mapa (bg + sprite andando),
só com um divisor à esquerda p/ separá-la dos mapas. */
#safari .sf-maps .chip.sf-chip-prop { margin-left: 8px; }
#safari .sf-maps .chip.sf-chip-prop::before { content: ''; position: absolute; left: -6px; top: 8px; bottom: 8px; width: 1px; background: rgba(255,255,255,.18); }
#safari { max-width: 1400px; }
#safari .sf-stage { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; border: 2px solid #1c2940; border-radius: 10px; overflow: hidden; background: #0c1118; }
#safari canvas { display: block; image-rendering: pixelated; max-width: 100%; }
#safari .sf-hud { position: absolute; top: 8px; left: 10px; font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; }
/* Setas sobre o mapa (canto inferior direito), como no jogo antigo. */
/* Botões laterais do mapa (hexágonos .Events), canto direito centralizado na vertical. */
#safari .sf-side-btns { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 6;
display: flex; flex-direction: column; gap: 2px; }
#safari .sf-hexbtn { width: 45px; height: 45px; padding: 0; border: none; cursor: pointer;
background: url('/old/layout/images/NewLayout/Event.png?v=1205') no-repeat center / contain;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 18px; text-shadow: 0 1px 2px #000, 0 0 3px #000; transition: filter .12s, transform .12s; }
#safari .sf-hexbtn:hover { filter: brightness(1.15); transform: scale(1.08); }
#safari .sf-hexbtn:active { transform: scale(.93); }
/* Menu lateral no modo PROPRIEDADE: esconde os de pokémon, mostra Loja/Armazém. */
#safari .sf-prop-only { display: none; }
#safari .sf-stage.sf-property .sf-hide-prop { display: none; }
#safari .sf-stage.sf-property .sf-prop-only { display: flex; }
/* Menu lateral um pouco menor no celular (sobra mais espaço pras setas). */
@media (max-width: 520px) {
#safari .sf-hexbtn { width: 40px; height: 40px; font-size: 16px; }
}
/* Telas baixas (ex.: celular em tela cheia na vertical): o menu lateral
centralizado invadiria as setas. Ancora no topo (logo abaixo do botão de
maximizar), deixando todo o canto inferior-direito livre pras setas. */
@media (max-width: 760px) and (max-height: 640px) {
#safari .sf-side-btns { top: 52px; bottom: auto; transform: none; gap: 2px; }
#safari .sf-hexbtn { width: 37px; height: 37px; font-size: 15px; }
}
/* Botão maximizar/restaurar (canto sup. direito) — só no mobile/telas pequenas. */
#safari .sf-maxbtn { position: absolute; top: 8px; right: 8px; z-index: 7; width: 38px; height: 38px;
border: none; border-radius: 9px; background: rgba(20,27,38,.82); color: #eaf1ff; font-size: 16px;
cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
#safari .sf-maxbtn:active { transform: scale(.92); }
@media (max-width: 820px) { #safari .sf-maxbtn { display: flex; } }
#safari .sf-stage.centering .sf-maxbtn, #safari .sf-stage.battling .sf-maxbtn { display: none !important; }
/* Mapa em TELA CHEIA (mobile): a janela do mapa ocupa toda a viewport. */
#safari .sf-stage.sf-maxed { position: fixed; inset: 0; z-index: 9000; width: auto; height: auto;
max-width: none; margin: 0; border: 0; border-radius: 0; background: #0c1118;
display: flex; align-items: center; justify-content: center; }
body.sf-fullscreen { overflow: hidden; }
/* ===== Centro Pokémon — abre DENTRO da janela do mapa (igual a batalha) ===== */
#pkc-overlay { position: absolute; inset: 0; z-index: 7; display: none; align-items: center; justify-content: center;
background: rgba(8,12,16,.55); }
#pkc-overlay.pkc-floating { position: fixed; z-index: 9700; background: rgba(4,7,12,.72); }
/* Painel de Configurações do mapa (volume Música/Sounds + campo de visão). */
#sf-config-ov { position: absolute; inset: 0; z-index: 8; display: none; align-items: center; justify-content: center; background: rgba(8,12,16,.55); }
#sf-config-ov .sfcfg-box { width: min(380px, 92%); background: #141b26; border: 1px solid #33445c; border-radius: 12px; box-shadow: 0 14px 44px rgba(0,0,0,.6); color: #dfe8ff; font-family: 'Open Sans', Arial, sans-serif; overflow: hidden; }
#sf-config-ov .sfcfg-head { background: #1d2735; padding: 11px 14px; font-size: 15px; font-weight: 700; color: #eaf1ff; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #2c3a4f; }
#sf-config-ov .sfcfg-x { cursor: pointer; background: none; border: 0; color: #9fb0c4; font-size: 22px; line-height: 1; padding: 0 2px; }
#sf-config-ov .sfcfg-x:hover { color: #fff; }
#sf-config-ov .sfcfg-row { display: flex; align-items: center; gap: 10px; padding: 13px 14px; }
#sf-config-ov .sfcfg-lbl { flex: 0 0 108px; font-size: 13px; color: #cdd8ea; }
#sf-config-ov .sfcfg-row input[type=range] { flex: 1; accent-color: #4aa3ff; cursor: pointer; }
#sf-config-ov .sfcfg-val { flex: 0 0 30px; text-align: right; font-size: 12px; color: #9fd0e6; font-weight: 700; }
#sf-config-ov .sfcfg-fovbtns { display: flex; gap: 6px; flex: 1; }
#sf-config-ov .sfcfg-fovbtn { flex: 1; cursor: pointer; border: 1px solid #2c3a45; background: #1b2430; color: #cdd8ea; border-radius: 7px; padding: 8px 0; font-size: 13px; font-weight: 700; }
#sf-config-ov .sfcfg-fovbtn:hover { background: #243042; }
#sf-config-ov .sfcfg-fovbtn.active { background: #2f7fe0; border-color: #4aa3ff; color: #fff; }
/* Campo de visão: stepper [−] valor [+] (0.5x–1.5x, passo 0.25) */
#sf-config-ov .sfcfg-fovstep { display: flex; align-items: center; justify-content: center; gap: 12px; flex: 1; }
#sf-config-ov .sfcfg-fovpm { flex: 0 0 auto; min-width: 40px; padding: 6px 0; font-size: 18px; line-height: 1; }
#sf-config-ov .sfcfg-fovval { min-width: 50px; text-align: center; font-size: 14px; font-weight: 700; color: #eaf1ff; }
/* Switch on/off (mostrar pokémon que segue). */
#sf-config-ov .sfcfg-switch { position: relative; display: inline-block; width: 46px; height: 24px; margin-left: auto; cursor: pointer; }
#sf-config-ov .sfcfg-switch input { opacity: 0; width: 0; height: 0; }
#sf-config-ov .sfcfg-slider { position: absolute; inset: 0; background: #2c3a45; border-radius: 24px; transition: .15s; }
#sf-config-ov .sfcfg-slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #cdd8ea; border-radius: 50%; transition: .15s; }
#sf-config-ov .sfcfg-switch input:checked + .sfcfg-slider { background: #2f7fe0; }
#sf-config-ov .sfcfg-switch input:checked + .sfcfg-slider::before { transform: translateX(22px); background: #fff; }
/* Botão "Sair" (sai do mapa → tela inicial), no rodapé do painel de Configurações. */
#sf-config-ov .sfcfg-exitrow { border-top: 1px solid #2c3a4f; padding: 12px 14px; }
#sf-config-ov .sfcfg-exit { width: 100%; cursor: pointer; border: 0; border-radius: 8px; padding: 11px 0; font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(#e0584f, #b3352d); box-shadow: 0 3px 0 #7f1f19; display: flex; align-items: center; justify-content: center; gap: 8px; }
#sf-config-ov .sfcfg-exit:hover { filter: brightness(1.08); }
#sf-config-ov .sfcfg-exit:active { transform: translateY(2px); box-shadow: 0 1px 0 #7f1f19; }
/* Mapa borrado/escurecido atrás (mesmo efeito da batalha). */
#safari .sf-stage.centering > canvas { filter: blur(4px) brightness(.5); }
#safari .sf-stage.centering .sf-joystick, #safari .sf-stage.centering .sf-arrows, #safari .sf-stage.centering .sf-hud,
#safari .sf-stage.centering .sf-side-btns, #safari .sf-stage.centering .sf-chat { display: none; }
/* o card de encontro usa display:block inline (showEncounter) — precisa de !important */
#safari .sf-stage.centering .sf-encounter { display: none !important; }
.pkc-modal { position: relative; width: min(640px, 94%); max-height: 96%; overflow: hidden; background: #11305a;
border: 2px solid #0c2547; border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.pkc-x { position: absolute; top: 8px; right: 10px; z-index: 3; width: 30px; height: 30px; border: 0; border-radius: 8px;
background: rgba(0,0,0,.35); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.pkc-x:hover { background: rgba(0,0,0,.55); }
.pkc-npc { padding: 12px 16px 8px; text-align: center; color: #eaf2ff; }
.pkc-npc .pkc-title { display: block; font-weight: 800; font-size: 17px; }
.pkc-npc .pkc-sub { display: block; font-size: 12px; color: #b9cde8; margin-top: 2px; }
.pkc-scene { position: relative; width: 100%; aspect-ratio: 914 / 270;
background: url('/old/images/layout/joy.png?v=1205') no-repeat center / cover; }
/* Máquina de cura: 6 slots no topo-centro (sobre a imagem). */
.pkc-slots { position: absolute; left: 28.2%; top: 15%; width: 34%; height: 19%;
display: flex; align-items: center; justify-content: space-between; padding: 0 2px; gap: 1px; }
.pkc-slot { flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; }
.pkc-slot img { max-width: 100%; max-height: 100%; image-rendering: pixelated;
filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.pkc-slot.fnt img { filter: grayscale(1) brightness(.6); }
/* Botão Tratar: sobre o rótulo desenhado no balcão (transparente + brilho no hover). */
.pkc-heal { position: absolute; left: 45.5%; top: 79%; width: 11.5%; height: 11%;
border: 0; background: transparent; cursor: pointer; border-radius: 10px; }
.pkc-heal:hover { background: rgba(255,255,255,.18); box-shadow: 0 0 0 2px rgba(255,255,255,.35) inset; }
.pkc-heal:active { transform: scale(.95); }
.pkc-heal:disabled { cursor: default; opacity: .5; }
/* ===== Tooltip (réplica leve do "Tipped" do jogo antigo: classes tip_-) ===== */
.ss-tooltip { position: absolute; z-index: 100070; display: none; pointer-events: none;
background: #1a2230; color: #eaf2ff; border: 1px solid #3a4a63; border-radius: 6px;
padding: 6px 10px; font: 600 12px/1.3 'Open Sans', Arial, sans-serif; max-width: 240px;
box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.ss-tooltip .ss-tip-arrow { position: absolute; width: 0; height: 0; }
.ss-tooltip.pos-top .ss-tip-arrow { bottom: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #1a2230; transform: translateX(-50%); }
.ss-tooltip.pos-bottom .ss-tip-arrow { top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #1a2230; transform: translateX(-50%); }
.ss-tooltip.pos-left .ss-tip-arrow { right: -6px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #1a2230; transform: translateY(-50%); }
.ss-tooltip.pos-right .ss-tip-arrow { left: -6px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid #1a2230; transform: translateY(-50%); }
/* Joystick FLUTUANTE: escondido por padrão. Aparece no ponto onde o jogador toca/clica
o MAPA e arrasta (em qualquer lugar). pointer-events:none → puramente visual (o canvas
trata os eventos via setPointerCapture). É posicionado por JS (left/top) no toque. */
#safari .sf-joystick { position: fixed; left: 0; top: 0; width: 116px; height: 116px;
z-index: 8; display: none; pointer-events: none; touch-action: none;
-webkit-touch-callout: none; -webkit-user-select: none; user-select: none; opacity: .92; }
#safari .sf-joy-base { position: absolute; inset: 0; border-radius: 50%;
background: radial-gradient(circle at 50% 45%, rgba(28,40,58,.6), rgba(10,16,26,.5));
border: 2px solid rgba(255,255,255,.2); box-shadow: inset 0 3px 14px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.4); }
#safari .sf-joy-nub { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
border-radius: 50%; background: radial-gradient(circle at 35% 30%, #79b8ff, #2f6fd0);
border: 2px solid rgba(255,255,255,.6); box-shadow: 0 3px 10px rgba(0,0,0,.5); transition: transform .06s ease-out; pointer-events: none; }
#safari .sf-joystick.dragging .sf-joy-nub { transition: none; }
/* Setas (D-pad) — alternativa ao joystick, escolhida em Configurações do mapa.
Escondidas por padrão; aparecem só no modo 'dpad' (#safari[data-control="dpad"]). */
#safari .sf-arrows { position: absolute; right: 16px; bottom: 70px; width: 112px; height: 112px;
z-index: 8; opacity: .92; display: none; touch-action: none; -webkit-touch-callout: none; }
#safari[data-control="dpad"] .sf-arrows { display: block; }
#safari .sf-arrows img { position: absolute; width: 34px; height: 34px; cursor: pointer;
user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; pointer-events: auto; }
#safari .sf-arrows img:active { filter: brightness(1.4); }
#safari .sf-arrows .up { top: 0; left: 39px; }
#safari .sf-arrows .down { bottom: 0; left: 39px; }
#safari .sf-arrows .left { left: 0; top: 39px; }
#safari .sf-arrows .right { right: 0; top: 39px; }
/* Card de encontro (canto inferior esquerdo). */
#safari .sf-encounter { position: absolute; left: 14px; bottom: 64px; width: 210px; text-align: center; color: #fff; cursor: move; user-select: none; -webkit-user-select: none; touch-action: none; }
/* Movido pelo jogador: ancora por top-left (o padrão usa bottom; o scale mobile usa origin bottom-left). */
#safari .sf-encounter.sf-enc-moved { transform-origin: top left; }
#safari .sf-mon { position: relative; display: inline-block; padding-bottom: 8px; margin-bottom: 2px; }
#safari .sf-mon .sf-grass { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 118px; image-rendering: pixelated; pointer-events: none; }
#safari .sf-mon .sf-poke { position: relative; display: block; image-rendering: pixelated; filter: drop-shadow(0 3px 3px rgba(0,0,0,.55)); margin: 0 auto; }
#safari .sf-rare { position: absolute; left: 50%; bottom: -1.5px; transform: translateX(-50%); z-index: 3; white-space: nowrap; font-weight: 800; font-size: 11px; line-height: 1; padding: 0.5px 8px; border-radius: 10px; text-shadow: 0 1px 2px #000; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
#safari .sf-rare.leg { background: linear-gradient(#caa12a, #8a6d11); color: #fff; }
#safari .sf-rare.ini { background: linear-gradient(#2eae5a, #1c7d3f); color: #fff; }
#safari .sf-encounter .nm { font-weight: 800; font-size: 13px; text-shadow: -1px -1px 2px #000, 1px 1px 2px #000, 0 0 6px #000; }
#safari .sf-encounter .lv { font-weight: 700; font-size: 12px; text-shadow: -1px -1px 2px #000, 1px 1px 2px #000; margin-bottom: 8px; }
#safari .sf-encounter .lv .sf-caught { height: 16px; vertical-align: middle; margin-left: 4px; image-rendering: pixelated; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
#safari .sf-encounter .sf-atk { border: 0; border-radius: 8px; font-weight: 800; padding: 8px 24px; font-size: 13px; cursor: pointer; background: linear-gradient(#3b82f6, #1d4ed8); color: #fff; box-shadow: 0 3px 0 #14306e; }
#safari .sf-encounter .sf-atk:active { transform: translateY(2px); box-shadow: 0 1px 0 #14306e; }
#safari .sf-encounter .sf-tip { font-size: 10px; color: #dfe8ff; margin-top: 6px; text-shadow: 0 1px 2px #000; }
/* Aviso de time sem condições (no lugar do card do selvagem). */
#safari .sf-encounter .sf-faint { background: rgba(120,20,20,.92); border: 1px solid #ff6a6a; border-radius: 10px;
padding: 10px 12px; font-weight: 800; font-size: 13px; color: #fff; text-shadow: 0 1px 2px #000;
box-shadow: 0 4px 14px rgba(0,0,0,.5); }
#safari .sf-hint { text-align: center; color: #8aa4c0; font-size: 11px; margin-top: 8px; }
/* Campo de fala — DENTRO do mapa, centro-inferior (sobreposto à cena). */
#safari #sf-explore { position: relative; }
#safari .sf-chat { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
z-index: 6; display: flex; gap: 6px; justify-content: center; width: 80%; max-width: 460px; }
#safari .sf-chat input { flex: 1; padding: 8px 12px; border-radius: 8px;
border: 1px solid rgba(255,255,255,.22); background: rgba(12,17,26,.78); color: #e6eefc;
font-size: 13px; outline: none; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
#safari .sf-chat input::placeholder { color: #9fb2c8; }
/* Log do chat: aparece ao focar no campo; fundo escuro translúcido. */
/* Toast (padrão): flutua acima da barra SEM fundo e sem bloquear cliques no mapa. */
#safari .sf-chat-log { position: absolute; bottom: 58px; left: 50%; transform: translateX(-50%); width: min(440px, 84%); max-height: 168px; overflow-y: auto; display: none; flex-direction: column; gap: 3px; padding: 9px 12px; z-index: 6; pointer-events: none; }
#safari .sf-chat-log.show { display: flex; }
/* Chat ABERTO (foco no campo): aí sim ganha o fundo/caixa e fica rolável. */
#safari .sf-chat-log.open { background: rgba(7,11,18,.6); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; box-shadow: 0 8px 26px rgba(0,0,0,.5); backdrop-filter: blur(2px); pointer-events: auto; }
#safari .sf-chat-log .cl-line { color: #dce6f5; font-size: 13px; line-height: 1.4; word-break: break-word; text-shadow: 1px 1px 2px #000000; }
#safari .sf-chat-log .cl-line b { color: #8fd0ff; }
/* [Global] (/g): amarelo p/ jogador, vermelho p/ admin */
#safari .sf-chat-log .cl-global { color: #ffd54a; font-weight: 800; }
#safari .sf-chat-log .cl-global.adm { color: #ff5a5a; }
#safari .sf-chat-log .cl-line.cl-srv { color: #b9f6d6; }
#safari .sf-chat-log .cl-server { color: #34d399; font-weight: 800; }
#safari .sf-chat-log .cl-empty { color: #7f93ad; font-size: 12px; text-align: center; padding: 6px; }
#safari .sf-stage.battling .sf-chat-log, #safari .sf-stage.centering .sf-chat-log { display: none !important; }
#safari .sf-chat input:focus { border-color: #3b82f6; background: rgba(12,17,26,.92); }
#safari .sf-chat button { border: 0; border-radius: 8px; padding: 8px 16px; font-weight: 800; font-size: 13px;
cursor: pointer; color: #fff; background: linear-gradient(#3b82f6, #1d4ed8); box-shadow: 0 3px 0 #14306e; }
#safari .sf-chat button:active { transform: translateY(2px); box-shadow: 0 1px 0 #14306e; }
/* ===== Chat ARRASTÁVEL (alça) + REDIMENSIONÁVEL (canto) — wrapper ===== */
#safari #sf-chat-wrap { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 80%; max-width: 460px; }
/* Movido: ancora pela BASE (top:auto) — o campo fica fixo embaixo e o log cresce PRA CIMA. left+bottom vêm inline. */
#safari #sf-chat-wrap.moved { right: auto; top: auto; transform: none; }
/* Dentro do wrapper, log e barra param de se posicionar sozinhos (o wrapper posiciona). */
#safari #sf-chat-wrap .sf-chat-log { position: static; left: auto; bottom: auto; transform: none; width: 100%; }
#safari #sf-chat-wrap .sf-chat { position: static; left: auto; bottom: auto; transform: none; width: 100%; max-width: none; }
#safari .sf-chat-grip { display: flex; align-items: center; justify-content: center; padding: 0 9px; cursor: grab; color: #9fb2c8; background: rgba(12,17,26,.78); border: 1px solid rgba(255,255,255,.22); border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.4); touch-action: none; user-select: none; -webkit-user-select: none; font-size: 12px; }
#safari .sf-chat-grip:active { cursor: grabbing; }
/* Local/Global: chip compacto [L]/[G] + menu escuro (no tema). Verde = Local, âmbar = Global. */
/* NB: escopado sob .sf-chat p/ VENCER a regra genérica "#safari .sf-chat button" (senão o chip herda o azul/padding/sombra do Dizer). */
#safari .sf-chat-mode { position: relative; flex: 0 0 auto; align-self: stretch; }
#safari .sf-chat .scm-btn { display: flex; align-items: center; justify-content: center; gap: 3px; height: 100%; padding: 0 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,.22); background: rgba(12,17,26,.82); color: #b9f6d6; font-size: 12px; font-weight: 800; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
#safari .sf-chat .scm-btn:active { transform: none; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
#safari .sf-chat .scm-btn i { font-size: 9px; opacity: .75; }
#safari .sf-chat-mode[data-mode="G"] .scm-btn { color: #ffd54a; border-color: rgba(255,213,74,.5); }
#safari .sf-chat .scm-menu { position: absolute; bottom: calc(100% + 6px); left: 0; min-width: 96px; display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: 9px; background: rgba(7,11,18,.96); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 8px 26px rgba(0,0,0,.55); z-index: 10; }
#safari .sf-chat .scm-menu[hidden] { display: none; }
#safari .sf-chat .scm-opt { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: #dce6f5; font-size: 12.5px; font-weight: 700; line-height: 1.2; cursor: pointer; white-space: nowrap; box-shadow: none; }
#safari .sf-chat .scm-opt:active { transform: none; box-shadow: none; }
#safari .sf-chat .scm-opt:hover { background: rgba(59,130,246,.28); }
#safari .sf-chat .scm-opt[data-m="G"] { color: #ffd54a; }
#safari .sf-chat .scm-opt[data-m="L"] { color: #b9f6d6; }
/* Aba Skins da Bolsa */
.sk-bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; padding: 4px; }
.sk-bag-card { background: #0e1826; border: 1px solid #22344a; border-radius: 10px; padding: 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.sk-bag-card.on { border-color: #3fb763; box-shadow: 0 0 0 1px #3fb763 inset; }
.sk-bag-img { width: 56px; height: 56px; image-rendering: pixelated; background: #0a1220; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #4a5d76; font-size: 22px; overflow: hidden; }
/* Preview ANDANDO: charset 4x4 (linha 0 = frente); anima as 4 colunas (walk cycle), igual à criação de personagem. */
.sk-bag-walk { width: 56px; height: 56px; image-rendering: pixelated; background-repeat: no-repeat; background-size: 224px 224px; background-position: 0 0; animation: sk-walk .8s steps(4) infinite; }
@keyframes sk-walk { from { background-position-x: 0; } to { background-position-x: -224px; } }
/* Mini-sprite andando nos chips/linhas do storefront de Donate */
.dn-skinwalk { display: inline-block; vertical-align: middle; width: 22px; height: 22px; image-rendering: pixelated; background-repeat: no-repeat; background-size: 88px 88px; background-position: 0 0; animation: dn-skinwalk .8s steps(4) infinite; }
@keyframes dn-skinwalk { from { background-position-x: 0; } to { background-position-x: -88px; } }
.sk-bag-name { font-weight: 800; font-size: 12.5px; color: #e6eefc; }
.sk-bag-buffs { font-size: 11px; color: #9fe6c0; line-height: 1.3; }
.sk-bag-buffs.sk-bag-nobuff { color: #7f93ad; }
.sk-bag-note { font-size: 11px; color: #f0a0a8; }
.sk-bag-act .bag-btn { padding: 6px 12px; font-size: 12px; }
.sk-bag-act .sk-active { background: #2a3a52; cursor: default; opacity: .8; }
/* Alça de redimensionar (canto sup. direito) — só aparece com o chat aberto. */
#safari .sf-chat-resize { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 6px; background: rgba(59,130,246,.92); border: 1px solid rgba(255,255,255,.55); box-shadow: 0 2px 8px rgba(0,0,0,.5); cursor: nesw-resize; z-index: 8; display: none; touch-action: none; }
#safari #sf-chat-wrap.open .sf-chat-resize { display: block; }
#safari .sf-stage.battling #sf-chat-wrap, #safari .sf-stage.centering #sf-chat-wrap { display: none !important; }
#safari #sf-cv { cursor: pointer; touch-action: none; -webkit-touch-callout: none; }
/* Menu de contexto ao clicar num jogador em batalha. */
.sf-ctx { position: fixed; z-index: 100060; background: rgba(18,24,36,.97); border: 1px solid #2f4566; border-radius: 9px; box-shadow: 0 10px 28px rgba(0,0,0,.55); padding: 6px; min-width: 128px; }
.sf-ctx .sf-ctx-name { color: #cfe2ff; font-weight: 800; font-size: 11px; text-align: center; margin-bottom: 5px; }
.sf-ctx .sf-ctx-btn { display: block; width: 100%; border: 0; border-radius: 7px; padding: 6px 9px; margin-top: 4px; font-weight: 700; font-size: 11.5px; cursor: pointer; color: #fff; background: linear-gradient(#3b82f6, #1d4ed8); box-shadow: 0 2px 0 #14306e; }
.sf-ctx .sf-ctx-btn:first-of-type { margin-top: 0; }
.sf-ctx .sf-ctx-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #14306e; }
.sf-ctx .sf-ctx-btn.sf-ctx-trade { background: linear-gradient(#31b06a, #1f8a4e); box-shadow: 0 2px 0 #145f36; }
/* Menu do jogador em ÍCONES lado a lado (Desafiar PVP / Trocar / Ver Perfil). */
.sf-ctx .sf-ctx-row { display: flex; gap: 6px; justify-content: center; }
.sf-ctx .sf-ctx-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 9px; font-size: 17px; cursor: pointer; color: #fff; background: linear-gradient(#3b82f6, #1d4ed8); box-shadow: 0 2px 0 #14306e; transition: filter .12s, transform .08s; }
.sf-ctx .sf-ctx-ic:hover { filter: brightness(1.08); }
.sf-ctx .sf-ctx-ic:active { transform: translateY(1px); box-shadow: 0 1px 0 #14306e; }
.sf-ctx .sf-ctx-ic.sf-ctx-trade { background: linear-gradient(#31b06a, #1f8a4e); box-shadow: 0 2px 0 #145f36; }
.sf-ctx .sf-ctx-ic.sf-ctx-prof { background: linear-gradient(#7c6cf0, #5b47d6); box-shadow: 0 2px 0 #3a2c99; }
.sf-ctx .sf-ctx-emo { font-size: 18px; line-height: 1; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif; }
/* Barra "Assistindo" no lugar dos golpes (modo espectador). */
.spectator-bar { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px; color: #cfe2ff; font-weight: 700; font-size: 14px; }
.spectator-bar #spec-leave { border: 0; border-radius: 8px; padding: 8px 18px; font-weight: 800; cursor: pointer; color: #fff; background: linear-gradient(#ef4444, #b91c1c); box-shadow: 0 3px 0 #7f1620; }
.spectator-bar #spec-leave:active { transform: translateY(2px); box-shadow: 0 1px 0 #7f1620; }
/* Evolução: janela de confirmação (só p/ o batalhador) + sprite animado (todos). */
.ss-evo-prompt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 40; background: rgba(0,0,0,.28); }
/* Card branco de recompensas no fim da vitória */
/* Resultado DENTRO da janela da batalha (.innerbattle) — preenche o frame, NÃO é popup. */
.ss-win-card-ov { position: absolute; inset: 0; z-index: 42; overflow: hidden; animation: swcFade .2s ease; }
.ss-win-card { position: absolute; inset: 0; box-sizing: border-box; background: #fff; color: #1a2433; padding: 8px 12px 10px; overflow: auto; text-align: center; border-radius: 0; box-shadow: none; animation: swcFade .2s ease; }
.swc-title { font-weight: 900; font-size: 21px; color: #1a2433; margin-bottom: 12px; letter-spacing: .5px; }
.swc-sec { margin: 9px 0; text-align: left; }
.swc-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #6b7a90; margin-bottom: 4px; border-bottom: 1px solid #e6ebf2; padding-bottom: 3px; }
.swc-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; font-size: 13.5px; padding: 3px 0; }
.swc-nm { font-weight: 700; color: #26303f; }
.swc-v { font-weight: 800; color: #2563c9; white-space: nowrap; }
.swc-silver .swc-v { color: #b8860b; }
.swc-badge .swc-nm { color: #b8860b; font-weight: 800; }
.swc-ok { margin-top: 15px; background: linear-gradient(#3aa0ff, #2563c9); color: #fff; border: 0; border-radius: 9px; padding: 9px 32px; font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: 0 3px 0 #1c4ea0; }
.swc-ok:active { transform: translateY(2px); box-shadow: 0 1px 0 #1c4ea0; }
/* layout rico (tela de resultado): Estatísticas + Recompensas + botões */
.ss-win-card.swc-rich .swc-h { text-align: left; }
.swc-stats { display: flex; gap: 10px; margin: 4px 0 6px; }
.swc-stat { flex: 1; display: flex; align-items: center; gap: 9px; background: #f1f5fb; border: 1px solid #e3e9f2; border-radius: 11px; padding: 9px 11px; text-align: left; }
.swc-ic { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 900; box-shadow: inset 0 -2px 4px rgba(0,0,0,.15); }
.swc-coin { background: radial-gradient(circle at 35% 28%, #f4f8fc, #aebccd); border: 1px solid #9aa9bb; box-shadow: inset 0 -2px 4px rgba(0,0,0,.15); }
.swc-xp { background: linear-gradient(160deg, #5aa9ff, #2563c9); }
.swc-stxt b { display: block; font-size: 16px; font-weight: 900; color: #1a2433; line-height: 1.05; }
.swc-stxt small { font-size: 10px; color: #6b7a90; text-transform: uppercase; letter-spacing: .4px; }
.swc-rewards { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 6px 0 2px; }
.swc-rw { position: relative; width: 66px; background: #f1f5fb; border: 1px solid #e3e9f2; border-radius: 11px; padding: 9px 4px 7px; text-align: center; }
.swc-rw-ic { font-size: 26px; line-height: 1; display: block; }
.swc-rw-spr { display: block; margin: 0 auto; width: 24px; height: 24px; image-rendering: pixelated; }
.swc-rw-ic { text-align: center; }
.ss-win-data .swc-btns2 { display: flex; gap: 13px; justify-content: center; position: absolute; left: 0; right: 0; bottom: 12px; }
.ss-win-data .swc-prizes { display: contents; }
.ss-win-data .swc-btns2 .swc-confirm { width: 138px; font-size: 13px; }
.ss-win-data .swc-detail { text-align: left; margin-top: 8px; max-height: 32vh; overflow: auto; border-top: 1px solid #e6ebf2; padding-top: 7px; }
.swc-rw-q { position: absolute; top: -7px; right: -6px; background: #2563c9; color: #fff; font-size: 10px; font-weight: 800; border-radius: 9px; padding: 1px 7px; box-shadow: 0 2px 5px rgba(0,0,0,.25); }
.swc-rw-nm { font-size: 10px; color: #26303f; font-weight: 700; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swc-rw-badge .swc-rw-nm { color: #b8860b; }
.swc-detail { text-align: left; margin: 6px 0 0; max-height: 130px; overflow: auto; border-top: 1px solid #e6ebf2; padding-top: 6px; }
.swc-btns { display: flex; gap: 10px; margin-top: 14px; }
.swc-b { flex: 1; border: 0; border-radius: 10px; padding: 10px 8px; font-weight: 800; font-size: 13px; cursor: pointer; }
.swc-b1 { background: linear-gradient(#3aa0ff, #2563c9); color: #fff; box-shadow: 0 3px 0 #1c4ea0; }
.swc-b2 { background: #e9eef5; color: #2a3a52; box-shadow: 0 3px 0 #c4cedb; }
.swc-b:active { transform: translateY(2px); box-shadow: none; }
@keyframes swcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes swcPop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
/* Botão Confirmar sobre o card do FX (m0014) — o card e os dados são desenhados no canvas */
.ss-win-confirm { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; z-index: 44; pointer-events: none; animation: swcFade .25s ease; }
.swc-confirm { pointer-events: auto; width: 154px; height: 46px; padding: 0; border: 0; background: url('/old/images/shop/Button.png?v=1205') center top/100% 200% no-repeat; color: #eaf1ff; font-weight: 800; font-size: 15px; text-shadow: 0 1px 2px rgba(0,0,0,.7); cursor: pointer; transition: filter .15s, transform .1s; filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.swc-confirm:hover { filter: brightness(1.06) drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.swc-confirm:active { transform: scale(.96); }
/* Dados da vitória organizados SOBRE o painel do card (transparente, dentro do frame). */
.ss-win-data { position: absolute; inset: 0; z-index: 43; pointer-events: none; animation: swcFade .25s ease; }
.ss-win-data .swc-data-in { position: absolute; left: 50%; transform: translateX(-50%); top: 93px; width: 80%; max-width: 330px; max-height: 52%; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.ss-win-data .swc-stats { margin: 0; }
.ss-win-data .swc-pklist { margin: 0; max-height: none; }
.ss-win-data .swc-rewards { margin: 0; }
/* lista de pokémon + stats em destaque (card de vitória) */
.swc-stat b { font-size: 18px; }
.swc-pklist { display: flex; flex-direction: column; gap: 5px; margin: 8px 0 2px; max-height: 150px; overflow: auto; }
.swc-pk { display: flex; align-items: center; gap: 9px; background: #f2f6fb; border: 1px solid #e3e9f2; border-radius: 9px; padding: 5px 9px; }
.swc-pk-ic { width: 30px; height: 30px; flex: 0 0 30px; image-rendering: pixelated; object-fit: contain; }
.swc-pk-nm { flex: 1; text-align: left; font-weight: 800; color: #26303f; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swc-pk-xp { font-weight: 800; color: #2563c9; font-size: 12px; white-space: nowrap; }
.swc-b1 { display: inline-block; margin-top: 14px; width: 150px; height: 44px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: url('/old/images/shop/Button.png?v=1205') center top/100% 200% no-repeat; color: #eaf1ff; font-size: 14px; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.7); cursor: pointer; transition: filter .15s, transform .1s; }
.swc-b1:hover { filter: brightness(1.06); }
.swc-b1:active { transform: scale(.96); box-shadow: none; }
/* card de CAPTURA: sprite grande + pokébola */
.ss-win-card.swc-catch .swc-catch-stage { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 124px; margin: 6px 0 2px; }
.swc-catch-spr { max-width: 156px; max-height: 132px; image-rendering: pixelated; filter: drop-shadow(0 6px 10px rgba(0,0,0,.28)); animation: swcPop .38s cubic-bezier(.2,.9,.3,1.3); }
.swc-catch-ico { width: 96px; height: 96px; }
.swc-catch-ball { position: absolute; right: 16%; bottom: 0; width: 42px; height: 42px; image-rendering: pixelated; animation: swcPop .5s ease; }
.swc-catch-nm { font-weight: 900; font-size: 19px; color: #1a2433; margin-top: 4px; }
.swc-catch-lv { font-size: 12px; color: #6b7a90; font-weight: 700; }
.swc-shiny { color: #f1b30a; }
.ss-win-card.swc-catch-sh .swc-catch-nm { color: #b8860b; }
.ss-evo-box { background: rgba(12,18,28,.94); border: 2px solid #2b3a52; border-radius: 12px; padding: 16px 20px; text-align: center; color: #eaf2ff; box-shadow: 0 10px 28px rgba(0,0,0,.55); max-width: 86%; }
.ss-evo-q { font-weight: 800; margin-bottom: 12px; font-size: 15px; }
.ss-evo-btns { display: flex; gap: 10px; justify-content: center; }
.ss-evo-btns button { border: 0; border-radius: 8px; padding: 8px 18px; font-weight: 800; cursor: pointer; color: #fff; }
.ss-evo-btns button:active { transform: translateY(2px); }
.ss-evo-yes { background: linear-gradient(#34d058, #1a9c3a); box-shadow: 0 3px 0 #137029; }
.ss-evo-no { background: linear-gradient(#ef4444, #b91c1c); box-shadow: 0 3px 0 #7f1620; }
#battle-frame .ss-evo-sprite { position: absolute; pointer-events: none; transition: filter .15s; }
#battle-frame .ss-evo-sprite.flash { filter: drop-shadow(0 4px 3px rgba(0,0,0,.55)) brightness(3) saturate(0) !important; }
/* Aprender golpe: janela de escolha (só p/ o batalhador). */
.ss-move-prompt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 40; background: rgba(0,0,0,.28); }
.ss-move-box { background: rgba(12,18,28,.94); border: 2px solid #2b3a52; border-radius: 12px; padding: 16px 18px; text-align: center; color: #eaf2ff; box-shadow: 0 10px 28px rgba(0,0,0,.55); max-width: 90%; }
.ss-move-q { font-weight: 800; margin-bottom: 12px; font-size: 14px; }
.ss-move-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; justify-items: center; }
.ss-move-slots button:not(.btn-type) { border: 0; border-radius: 8px; padding: 9px 10px; font-weight: 800; cursor: pointer; color: #fff; background: linear-gradient(#3b82f6, #1d4ed8); box-shadow: 0 3px 0 #163fa3; font-size: 13px; }
.ss-move-slots button:not(.btn-type):active { transform: translateY(2px); box-shadow: 0 1px 0 #163fa3; }
/* Botões estilo BATALHA (btn-type) nas janelas de aprender golpe: TAMANHO NATIVO da batalha
(base .btn-type: 57px alt + max-width 154), centralizados na célula. Só o mobile (regra base) reduz —
NÃO forçar height/max-width aqui, senão o fundo de tipo estica quando a caixa fica larga. */
.ss-move-slots .btn-type { width: 100%; opacity: .95; }
.ss-move-slots .btn-type:hover { opacity: 1; }
/* Golpe A APRENDER: botão destacado (dourado), não clicável — só mostra tooltip.
Mesmo tamanho nativo de um slot (grid p/ não colapsar a altura como o flex-column colapsava). */
.ss-move-newrow { display: grid; justify-items: center; gap: 5px; margin: 0 0 12px; }
.ss-move-newtag { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #ffd76a; text-align: center; }
/* Golpe novo + "Não aprender" LADO A LADO (o cancel saiu do rodapé — no mobile ele ficava
fora da tela; aqui fica no topo, sempre visível). align-items:center = cancel compacto ao lado. */
.ss-move-newrow-btns { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.btn-type.ss-move-new { width: calc(50% - 4px); opacity: 1; cursor: default; box-shadow: 0 0 0 2px #ffd76a, 0 2px 8px rgba(0,0,0,.45); }
/* Dentro do row: neutraliza o flex:1 1 0 base do .btn-type (senão o golpe novo cresceria e empurraria o cancel). */
.ss-move-newrow-btns .btn-type.ss-move-new { flex: 0 0 auto; width: 150px; max-width: 52%; }
/* Tooltip de golpe (aprender golpe) — sobre a janela (z acima do overlay 6000). */
.ss-mvtip { position: fixed; z-index: 6100; max-width: 250px; background: rgba(12,18,28,.98); border: 1px solid #2b3a52; border-radius: 8px; padding: 8px 10px; color: #eaf2ff; box-shadow: 0 8px 22px rgba(0,0,0,.6); font-size: 12px; text-align: left; pointer-events: none; }
.ss-mvtip-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.ss-mvtip-h b { font-size: 13px; }
.ss-mvtip-h .tt-type { color: #fff; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .03em; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.ss-mvtip-cat { font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 4px; text-transform: uppercase; }
.ss-mvtip-cat.cat-physical { background: #c0392b; } .ss-mvtip-cat.cat-special { background: #2e5fb0; } .ss-mvtip-cat.cat-status { background: #5b6673; }
.ss-mvtip-r { color: #b9c8dc; margin-bottom: 4px; } .ss-mvtip-r b { color: #fff; }
.ss-mvtip-d { color: #9fb0c4; line-height: 1.25; }
.ss-move-cancel { border: 0; border-radius: 8px; padding: 7px 14px; font-weight: 800; font-size: 12px; white-space: nowrap; cursor: pointer; color: #fff; background: linear-gradient(#ef4444, #b91c1c); box-shadow: 0 3px 0 #7f1620; }
.ss-move-cancel:active { transform: translateY(2px); box-shadow: 0 1px 0 #7f1620; }
/* Aprender golpe FORA de batalha (golpes de nível pendentes após Rare Candy): overlay fixo. */
.ss-learn-mask { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 6000; background: rgba(0,0,0,.55); padding: 16px; }
.ss-learn-mask .ss-move-box { width: 320px; max-width: 100%; }
/* Especialista de Moves (relembrar golpe) */
.esp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; max-height: 260px; overflow-y: auto; }
.esp-poke { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #1b2430; border: 1px solid #2c3a45; border-radius: 8px; padding: 8px 4px; cursor: pointer; color: #cdd8ea; }
.esp-poke:hover { background: #243042; }
.esp-poke img { width: 40px; height: 40px; image-rendering: pixelated; }
.esp-poke span { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.esp-poke small { font-size: 10px; color: #7d8ea0; }
.esp-moves { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; max-height: 300px; overflow-y: auto; }
.esp-move { text-align: left; background: linear-gradient(#3b82f6, #1d4ed8); border: 0; border-radius: 8px; padding: 9px 12px; color: #fff; font-weight: 700; cursor: pointer; box-shadow: 0 2px 0 #163fa3; }
.esp-move:hover { filter: brightness(1.1); }
.esp-move small { color: #cfe0ff; font-weight: 400; margin-left: 6px; }
.ss-move-box .hint { color: #9fb0c4; font-size: 12px; padding: 14px; }
/* Mobile: a janela de aprender golpe não pode ficar gigante — encolhe fonte/padding/botões. */
@media (max-width: 560px) {
.ss-move-box { padding: 11px 12px; border-radius: 10px; max-width: 86%; }
.ss-learn-mask .ss-move-box { width: 280px; }
.ss-move-q { font-size: 12px; margin-bottom: 9px; }
.ss-move-slots { gap: 6px; margin-bottom: 9px; }
.ss-move-slots button:not(.btn-type) { padding: 7px 6px; font-size: 11px; }
.ss-move-slots .btn-type { height: 46px; }
.ss-move-slots .btn-type .movename { font-size: 12px; padding-right: 46px; }
.ss-move-newrow { margin-bottom: 9px; gap: 4px; }
.ss-move-newrow-btns { gap: 8px; }
.ss-move-newrow-btns .btn-type.ss-move-new { width: 128px; max-width: 56%; }
.btn-type.ss-move-new { height: 46px; }
.btn-type.ss-move-new .movename { font-size: 12px; padding-right: 46px; }
.ss-mvtip { max-width: 78vw; font-size: 11.5px; }
.ss-move-cancel { padding: 6px 11px; font-size: 11px; }
/* Segurança: a janela não pode estourar a altura da área de batalha no mobile (senão o
conteúdo — inclusive o "Não aprender" — ficava cortado). Rola dentro da caixa se faltar espaço. */
.ss-move-prompt { padding: 8px; }
.ss-move-prompt .ss-move-box { max-height: 100%; overflow-y: auto; }
}
/* Batalha do Safari: flutua DENTRO da janelinha do mapa, sobre o mapa escuro+borrado.
Altura = conteúdo (não estica pra baixo); rola só se faltar espaço. */
#safari .sf-stage.battling > canvas { filter: blur(4px) brightness(.5); }
#safari .sf-stage.battling .sf-joystick, #safari .sf-stage.battling .sf-arrows, #safari .sf-stage.battling .sf-hud, #safari .sf-stage.battling .sf-side-btns, #safari .sf-stage.battling .sf-chat { display: none; }
#safari .sf-stage > #battle-panel { position: absolute !important; left: 50%; top: 50%; transform: translate(-50%, -50%);
z-index: 5; margin: 0 !important; width: 94% !important; max-width: 760px !important; height: auto;
max-height: 94%; overflow: auto; border-radius: 12px; padding: 10px;
background: rgba(20, 26, 38, .94); border: 1px solid #2a3a52; box-shadow: 0 12px 34px rgba(0,0,0,.6); }
/* SweetAlert sempre acima de tudo. */
.swal2-container { z-index: 100050 !important; }
/* SweetAlert sempre acima de tudo. */
.swal2-container { z-index: 100050 !important; }
#pokedex-panel { color: #cdd8ea; max-width: 1200px; margin: 0 auto; font-family: 'Open Sans', Arial, sans-serif; }
/* Fundo escuro translúcido (mesmo do catálogo de Itens) envolvendo toda a Pokédex. */
#pdx { background: rgba(6,10,16,.6); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 14px; }
#pdx .pdx-head { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
#pdx .pdx-title { font-size: 18px; font-weight: 800; color: #eaf1ff; }
#pdx .pdx-prog { font-size: 13px; color: #9fb3cc; }
#pdx .pdx-close { margin-left: auto; width: 30px; height: 30px; border: 0; border-radius: 8px; background: #34465f; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: none; }
#pdx .pdx-close:hover { background: #c0392b; }
/* Pokédex aberta SOBRE o mapa (overlay docado no .sf-stage). */
#pokedex-panel.pdx-overlay { position: absolute; inset: 0; z-index: 8; max-width: none; margin: 0; padding: 10px; overflow-y: auto; background: rgba(8,12,16,.55); }
#pokedex-panel.pdx-overlay #pdx { max-width: 1000px; margin: 0 auto; }
#pokedex-panel.pdx-overlay .pdx-close { display: block; } /* × só no overlay do mapa */
#pdx .pdx-body { display: flex; gap: 14px; align-items: flex-start; }
/* Rodapé: Iniciais/Lendas do mapa de Caça atual (só quando a Dex abre sobre o mapa) */
/* Rodape Iniciais/Lendas do mapa: cada grupo = mini-card, cabecalho em pill, chips centralizados */
#pdx .pdx-mapdex { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
#pdx .pdx-mapdex .pdx-md-grp { flex: 1 1 0; min-width: 220px; background: linear-gradient(180deg,#16202e,#111a26); border: 1px solid #243042; border-radius: 12px; padding: 12px 10px 14px; text-align: center; }
#pdx .pdx-mapdex .pdx-md-h { display: inline-flex; align-items: center; gap: 6px; margin: 0 auto 11px; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #cdd8ea; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
#pdx .pdx-mapdex .pdx-md-ini .pdx-md-h { color: #ffd86b; border-color: rgba(255,216,107,.35); background: rgba(255,216,107,.09); }
#pdx .pdx-mapdex .pdx-md-leg .pdx-md-h { color: #c9a0ff; border-color: rgba(201,160,255,.35); background: rgba(201,160,255,.09); }
#pdx .pdx-mapdex .pdx-md-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
#pdx .pdx-mapdex .pdx-md-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; padding: 7px 4px 6px; background: #0f1722; border: 1px solid #2a3a4d; border-radius: 10px; transition: transform .1s ease, border-color .1s ease; }
#pdx .pdx-mapdex .pdx-md-cell:hover { transform: translateY(-2px); border-color: #3f5573; }
#pdx .pdx-mapdex .pdx-md-cell img { width: 46px; height: 46px; object-fit: contain; image-rendering: pixelated; }
#pdx .pdx-mapdex .pdx-md-nm { font-size: 10px; font-weight: 600; color: #b7c6dc; text-align: center; line-height: 1.15; max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pdx .pdx-mapdex .pdx-md-load { color: #7f93ad; font-size: 12px; padding: 6px; text-align: center; }
#pdx .pdx-left { flex: 0 0 360px; max-width: 360px; }
#pdx .pdx-right { flex: 1; min-width: 0; background: #16202e; border: 1px solid #243042; border-radius: 12px; min-height: 540px; }
#pdx .pdx-filters { display: flex; gap: 6px; margin: 0 0 8px; flex-wrap: wrap; }
#pdx .pdx-search { flex: 1 1 100%; min-width: 0; background: #0f1722; border: 1px solid #2c3a45; border-radius: 8px; color: #eaf1ff; padding: 8px 10px; font-size: 13px; }
#pdx .pdx-sel { flex: 1; background: #0f1722; border: 1px solid #2c3a45; border-radius: 8px; color: #cdd8ea; padding: 7px 6px; font-size: 12px; }
#pdx .pdx-list { height: 540px; overflow: auto; background: #0f1722; border: 1px solid #243042; border-radius: 12px; padding: 4px; }
#pdx .pdx-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; cursor: pointer; }
#pdx .pdx-row:hover { background: #1d2a3a; }
#pdx .pdx-row.sel { background: #284166; }
#pdx .pdx-ic { width: 32px; height: 32px; image-rendering: auto; flex: 0 0 32px; }
#pdx .pdx-ic.pdx-unseen { filter: brightness(0.06); }
.pde-silho .pde-sprite img { filter: brightness(0); } /* não-capturado: silhueta preta */
#pdx .pdx-top { background: linear-gradient(180deg,#16202e,#111a26); border: 1px solid #243042; border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; }
#pdx .pdx-top-t { font-size: 12px; font-weight: 800; color: #ffd86b; letter-spacing: .4px; margin-bottom: 8px; text-transform: uppercase; }
#pdx .pdx-top-row { display: flex; gap: 10px; flex-wrap: wrap; }
#pdx .pdx-top-card { flex: 1 1 0; min-width: 150px; display: flex; align-items: center; gap: 8px; background: #0f1722; border: 1px solid #2a3a4d; border-radius: 10px; padding: 8px 10px; }
#pdx .pdx-top-medal { font-size: 20px; flex: 0 0 auto; }
#pdx .pdx-top-card img { width: 40px; height: 40px; image-rendering: auto; flex: 0 0 40px; }
#pdx .pdx-top-info { min-width: 0; }
#pdx .pdx-top-nm { font-size: 13px; font-weight: 700; color: #eaf1ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pdx .pdx-top-pw { font-size: 14px; font-weight: 800; color: #ffce54; }
#pdx .pdx-top-ow { font-size: 11px; color: #8fae8f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pdx .pdx-nm { flex: 1; font-size: 13px; color: #7f8da0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pdx .pdx-nm.on { color: #7ee08a; font-weight: 700; }
/* Pokébola desenhada em CSS: cheia (capturado) ou vazia (não). */
#pdx .pdx-ball { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #5b6b7d; background:
linear-gradient(#3a4658 0 50%, #2a3340 50% 100%); position: relative; opacity: .5; }
#pdx .pdx-ball::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: #5b6b7d; transform: translate(-50%, -50%); }
#pdx .pdx-ball.got { opacity: 1; border-color: #fff; background: linear-gradient(#e34b4b 0 50%, #f3f3f3 50% 100%); }
#pdx .pdx-ball.got::after { background: #fff; box-shadow: 0 0 0 1.5px #333; }
#pdx .pdx-loading { padding: 24px; text-align: center; color: #7f8da0; }
/* Estado vazio/não-visto (igual ao da Bolsa sem itens): ícone grande + título + texto. */
#pdx .pdx-empty { min-height: 480px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 24px; }
#pdx .pdx-empty-ic { font-size: 56px; color: #3a4a63; margin-bottom: 16px; }
#pdx .pdx-empty-t { font-size: 18px; font-weight: 700; color: #cdd8ea; margin-bottom: 6px; }
#pdx .pdx-empty-s { font-size: 13px; color: #7d8ea0; max-width: 300px; line-height: 1.5; }
/* Detalhe */
#pdx .pde-head { display: flex; align-items: baseline; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #243042; }
#pdx .pde-num { color: #9fb3cc; font-weight: 700; }
#pdx .pde-name { font-size: 18px; font-weight: 800; color: #eaf1ff; }
#pdx .pde-rar { margin-left: auto; font-size: 12px; padding: 2px 9px; border-radius: 999px; background: #2c3a45; color: #cdd8ea; }
#pdx .pde-rar.r4, #pdx .pde-rar.r6 { background: #6b3fa0; color: #fff; }
#pdx .pde-rar.r5 { background: #2f7fe0; color: #fff; }
#pdx .pde-sprites { display: flex; justify-content: center; gap: 10px; padding: 10px; }
#pdx .pde-sprite { width: 48%; max-width: 200px; height: 150px; background: #0f1722; border: 1px solid #243042; border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; }
#pdx .pde-sprite img { max-width: 130px; max-height: 130px; image-rendering: auto; }
#pdx .pde-sprite .tag { position: absolute; bottom: 4px; right: 6px; font-size: 10px; color: #9fb3cc; }
#pdx .pde-types { display: flex; gap: 6px; justify-content: center; padding: 4px 0 10px; }
#pdx .pde-types .tt-type { font-size: 11px; padding: 3px 12px; border-radius: 4px; }
#pdx .pde-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 4px 16px 10px; font-size: 13px; }
#pdx .pde-grid .k { color: #9fb3cc; }
#pdx .pde-grid .v { color: #eaf1ff; text-align: right; }
#pdx .pde-sec { padding: 8px 16px; border-top: 1px solid #243042; }
#pdx .pde-sec h4 { margin: 0 0 6px; font-size: 13px; color: #9fb3cc; font-weight: 700; }
#pdx .pde-maps { display: flex; flex-direction: column; gap: 6px; }
#pdx .pde-map { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 12px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid #232c3e; border-radius: 10px; font-size: 12.5px; color: #cdd8ea; transition: border-color .12s, background .12s, transform .1s; }
#pdx .pde-map:hover { border-color: #3a5680; background: linear-gradient(180deg, rgba(74,163,255,.1), rgba(74,163,255,.03)); }
#pdx .pde-map-l { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
#pdx .pde-map-pin { flex: 0 0 auto; color: #6f86a6; }
#pdx .pde-map:hover .pde-map-pin { color: #4aa3ff; }
#pdx .pde-map b { color: #eaf2ff; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pdx .pde-map-rg { flex: 0 0 auto; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: #9fb3cc; background: rgba(159,179,204,.1); border: 1px solid rgba(159,179,204,.2); border-radius: 999px; padding: 2px 7px; }
#pdx .pde-mapch { flex: 0 0 auto; color: #6ee59a; font-weight: 800; font-size: 12.5px; font-variant-numeric: tabular-nums; letter-spacing: .2px; }
#pdx .pde-ev { display: inline-block; margin-left: 5px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid transparent; vertical-align: middle; }
#pdx .pde-ev b { font-weight: 800; }
#pdx .pde-ev-hp { color: #6ee59a; background: rgba(110,229,154,.13); border-color: rgba(110,229,154,.32); }
#pdx .pde-ev-atk { color: #f5a623; background: rgba(245,166,35,.13); border-color: rgba(245,166,35,.32); }
#pdx .pde-ev-def { color: #f8d44c; background: rgba(248,212,76,.13); border-color: rgba(248,212,76,.32); }
#pdx .pde-ev-spa { color: #4db3ff; background: rgba(77,179,255,.13); border-color: rgba(77,179,255,.32); }
#pdx .pde-ev-spd { color: #6ee5c8; background: rgba(110,229,200,.13); border-color: rgba(110,229,200,.32); }
#pdx .pde-ev-spe { color: #ff8fc0; background: rgba(255,143,192,.13); border-color: rgba(255,143,192,.32); }
#pdx .pde-gen { display: inline-block; margin-left: 5px; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; border: 1px solid transparent; vertical-align: middle; }
#pdx .pde-gen-m { color: #7fb3ff; background: rgba(127,179,255,.13); border-color: rgba(127,179,255,.32); }
#pdx .pde-gen-f { color: #ff8fc0; background: rgba(255,143,192,.13); border-color: rgba(255,143,192,.32); }
#pdx .pde-gen-n { color: #9fb3cc; background: rgba(159,179,204,.12); border-color: rgba(159,179,204,.3); }
#pdx .pde-grid .v .pde-ab { display: inline-block; margin-left: 5px; padding: 1px 9px; border-radius: 8px; font-size: 11.5px; font-weight: 700; background: rgba(255,255,255,.05); border: 1px solid #2a3346; color: #cdd8ea; vertical-align: middle; }
#pdx .pde-ab small { opacity: .6; font-weight: 600; }
#pdx .pde-ab-h { color: #c8b7f0; background: rgba(140,116,200,.12); border-color: rgba(140,116,200,.45); }
#pdx .pde-stats .bar { display: flex; align-items: center; gap: 8px; margin: 2px 0; font-size: 12px; }
#pdx .pde-stats .bk { flex: 0 0 64px; color: #9fb3cc; }
#pdx .pde-stats .bn { flex: 0 0 30px; text-align: right; color: #eaf1ff; }
#pdx .pde-stats .bt { display: block; flex: 1; height: 8px; background: #0f1722; border-radius: 5px; overflow: hidden; }
#pdx .pde-stats .bf { display: block; height: 100%; background: linear-gradient(90deg, #4aa3ff, #5ad0ff); }
#pdx .pde-moves { display: flex; flex-wrap: wrap; gap: 4px; }
#pdx .pde-mv { font-size: 11px; background: #1d2a3a; border: 1px solid #2c3a45; border-radius: 6px; padding: 3px 7px; color: #cdd8ea; }
#pdx .pde-mv b { color: #7ee08a; }
#pdx .pde-tms { display: flex; flex-wrap: wrap; gap: 6px; }
#pdx .pde-tm { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border: 1px solid #2a3346; border-radius: 8px; background: #131a26; font-size: 12px; color: #cdd8ea; }
#pdx .pde-tm-ic { width: 22px; height: 22px; background-size: contain; background-repeat: no-repeat; background-position: center; image-rendering: pixelated; flex: 0 0 22px; }
#pdx .pde-tm-nm { font-weight: 600; }
#pdx .pde-effrow { display: flex; align-items: flex-start; gap: 8px; margin: 5px 0; }
#pdx .pde-effrow .el { flex: 0 0 92px; font-size: 12px; color: #9fb3cc; padding-top: 4px; }
#pdx .pde-effbadges { flex: 1; display: flex; flex-wrap: wrap; gap: 7px; }
#pdx .pde-eff-it { display: inline-flex; align-items: center; gap: 3px; }
#pdx .pde-eff-it .tt-type { font-size: 10px; padding: 2px 7px; border-radius: 4px; }
#pdx .pde-eff-it b { font-size: 11px; color: #eaf1ff; }
/* ---- Dex: Golpes em ABAS (Por Nível / TM-TR / Ovo) ---- */
/* Abas de Golpes com o MESMO visual do PokéMarket (botão-sprite Button.png; ativo = topo do sprite). */
#pdx .pde-movebox .pde-mvtabs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 2px 0 12px; padding-top: 2px; }
#pdx .pde-mvtab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 108px; height: 42px; padding: 0 16px; background: url('/old/images/shop/Button.png?v=1205') center bottom/100% 200% no-repeat; border: 0; color: #eaf1ff; font-size: 12px; font-weight: 800; cursor: pointer; text-shadow: 0 1px 2px rgba(0,0,0,.7); transition: filter .15s, transform .1s; }
#pdx .pde-mvtab:hover { filter: brightness(1.06); }
#pdx .pde-mvtab:active { transform: scale(.96); }
#pdx .pde-mvtab.active { background-position: center top; }
#pdx .pde-mvpanel[hidden] { display: none; }
#pdx .pde-eggmoves .pde-eggmv { background: #1f2a1d; border-color: #33452c; color: #cfe6c0; }
/* ---- Dex: chance real de shiny (por mapa + taxa base) ---- */
#pdx .pde-shiny { color: #ffd95e; font-weight: 800; font-size: 11px; margin-left: 4px; white-space: nowrap; }
#pdx .pde-shinyrate { display: inline-flex; align-items: center; gap: 5px; color: #ffe08a; font-weight: 800; font-size: 12px; background: linear-gradient(180deg, rgba(255,217,94,.16), rgba(255,217,94,.05)); border: 1px solid rgba(255,217,94,.34); border-radius: 999px; padding: 3px 11px; box-shadow: 0 1px 7px rgba(255,200,60,.13); }
#pdx .pde-shinyrate .tt-shiny { font-size: 12px; filter: drop-shadow(0 0 4px rgba(255,214,107,.5)); }
/* ---- Dex: legenda de bônus (bloco próprio) + stat de shiny separados ---- */
#pdx .pde-bufflegend { display: flex; flex-direction: column; gap: 9px; margin: 0 0 11px; padding: 10px 12px; background: rgba(255,255,255,.025); border: 1px solid #232c3e; border-radius: 10px; }
#pdx .pde-bl-bonus { display: flex; flex-direction: column; gap: 5px; }
#pdx .pde-bl-bonushead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; }
#pdx .pde-bl-lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: #7d8ea0; }
#pdx .pde-bl-note { font-size: 10.5px; color: #8298ac; line-height: 1.35; }
#pdx .pde-bl-note::before { content: '↑'; color: #6ee59a; font-weight: 800; margin-right: 4px; }
#pdx .pde-bl-stat { display: flex; align-items: center; gap: 9px; }
#pdx .pde-bl-bonus + .pde-bl-stat { padding-top: 9px; border-top: 1px solid rgba(255,255,255,.07); }
#pdx .pde-bl-statlbl { font-size: 10.5px; color: #9fb3cc; }
#pdx .pde-bufflegend .pde-buffs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; }
#pdx .pde-buffchip { font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid #2c3a45; color: #cdd8ea; letter-spacing: .2px; }
#pdx .pde-buffchip.vip { color: #ffd95e; background: rgba(255,217,94,.12); border-color: rgba(255,217,94,.35); }
#pdx .pde-buffchip.badge { color: #6ee59a; background: rgba(110,229,154,.12); border-color: rgba(110,229,154,.32); }
#pdx .pde-buffchip.dex { color: #7fb3ff; background: rgba(127,179,255,.12); border-color: rgba(127,179,255,.32); }
#pdx .pde-buffchip.skin { color: #ff8fc0; background: rgba(255,143,192,.12); border-color: rgba(255,143,192,.32); }
/* ---- Dex: Vantagens e Desvantagens (agrupado por severidade) ---- */
#pdx .pde-effbox .pde-effrow { align-items: center; gap: 10px; margin: 6px 0; padding: 6px 9px; border-radius: 8px; border-left: 3px solid transparent; background: rgba(255,255,255,.02); }
#pdx .pde-effbox .pde-effrow.weak { border-left-color: #e5604d; }
#pdx .pde-effbox .pde-effrow.resist { border-left-color: #6ee59a; }
#pdx .pde-effbox .pde-effrow.immune { border-left-color: #7d8ea0; }
#pdx .pde-effbox .pde-effrow .el { display: flex; align-items: center; gap: 6px; flex: 0 0 96px; padding-top: 0; }
#pdx .pde-effbox .pde-effrow .el i { font-style: normal; font-size: 10px; font-weight: 800; min-width: 16px; text-align: center; padding: 1px 5px; border-radius: 999px; background: rgba(255,255,255,.08); color: #cdd8ea; }
#pdx .pde-effbox .pde-effrow.weak .el { color: #f0a99e; }
#pdx .pde-effbox .pde-effrow.weak .el i { background: rgba(229,96,77,.2); color: #f0a99e; }
#pdx .pde-effbox .pde-effrow.resist .el { color: #9fe4b8; }
#pdx .pde-effbox .pde-effrow.resist .el i { background: rgba(110,229,154,.18); color: #9fe4b8; }
#pdx .pde-effbox .pde-effrow.immune .el { color: #b7c3d0; }
#pdx .pde-effbox .pde-effrow.immune .el i { background: rgba(125,142,160,.2); color: #b7c3d0; }
#pdx .pde-effbox .pde-eff-it { gap: 0; border-radius: 6px; overflow: hidden; border: 1px solid #2a3346; }
#pdx .pde-effbox .pde-eff-it .tt-type { font-size: 10px; padding: 3px 8px; border-radius: 0; text-transform: uppercase; letter-spacing: .3px; }
#pdx .pde-effbox .pde-eff-it b { font-size: 10.5px; padding: 3px 6px; background: #0f1722; color: #eaf1ff; }
#pdx .pde-effbox .pde-eff-it.m4 b { background: #7a1d12; color: #ffd7cf; }
#pdx .pde-effbox .pde-eff-it.m2 b { background: #5a2c10; color: #ffd9b0; }
#pdx .pde-effbox .pde-eff-it.mh b { background: #123a24; color: #bff0cf; }
#pdx .pde-effbox .pde-eff-it.mq b { background: #0d4a2a; color: #a6f0c4; }
#pdx .pde-effbox .pde-eff-it.m0 b { background: #2a3140; color: #b7c3d0; }
#pdx .pde-eff-none { font-size: 12px; color: #9fb3cc; padding: 4px 2px; }
#pdx .pde-evo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#pdx .pde-evocol { display: flex; flex-wrap: wrap; gap: 8px 10px; max-width: 320px; justify-content: center; }
#pdx .pde-evo .ev { display: flex; flex-direction: column; align-items: center; font-size: 11px; color: #cdd8ea; width: 78px; text-align: center; }
#pdx .pde-evo .ev .evm { font-size: 9px; color: #8fd0a0; margin-top: 1px; line-height: 1.15; word-break: break-word; display: flex; align-items: center; justify-content: center; gap: 2px; min-height: 24px; }
#pdx .pdx-itemico { display: inline-block; width: 24px; height: 24px; vertical-align: middle; image-rendering: pixelated; }
#pdx .pde-evo .ev img { width: 32px; height: 32px; image-rendering: auto; }
#pdx .pde-evo .arr { color: #9fb3cc; }
/* Selo de forma registrada na Dex (capturada/vista) — só nas Formas Alternativas. */
#pdx .pde-evo .ev .pde-fmark { display: inline-block; margin-top: 2px; font-size: 11px; font-weight: 800; line-height: 1; }
#pdx .pde-evo .ev .pde-fmark.caught { color: #2ecc71; }
#pdx .pde-evo .ev .pde-fmark.seen { color: #7c8aa0; font-size: 9px; }
#pdx .pde-evo .ev.fcaught { box-shadow: inset 0 0 0 1px rgba(46,204,113,.55); border-radius: 7px; }
#pdx .pde-evo .ev.fseen img { filter: grayscale(.35) brightness(.92); }
#pdx .pde-evo .ev.pde-clk { cursor: pointer; border-radius: 8px; padding: 3px 2px; transition: background .12s ease, transform .12s ease; }
#pdx .pde-evo .ev.pde-clk:hover, #pdx .pde-evo .ev.pde-clk:focus { background: rgba(120,170,255,.14); transform: translateY(-1px); outline: none; }
#pdx .pde-evo .ev.sel { background: rgba(120,170,255,.22); box-shadow: inset 0 0 0 1px rgba(140,180,255,.55); border-radius: 8px; padding: 3px 2px; }
@media (max-width: 760px) {
#pdx .pdx-body { flex-direction: column; }
#pdx .pdx-left { flex: 1 1 auto; max-width: 100%; width: 100%; }
#pdx .pdx-list { height: 300px; }
#pdx .pdx-body { align-items: stretch; }
#pdx .pdx-right { min-height: 0; width: 100%; }
#pdx .pdx-empty { min-height: 260px; }
/* Sprites do detalhe maiores no celular (o painel é mais largo aqui). */
#pdx .pde-sprite { height: 180px; max-width: none; }
#pdx .pde-sprite img { max-width: 150px; max-height: 160px; }
#pdx .pde-grid { grid-template-columns: 1fr; gap: 3px 0; }
#pdx .pde-grid .v { text-align: left; }
}
#items-panel { color: #cdd8ea; max-width: 1100px; margin: 0 auto; font-family: 'Open Sans', Arial, sans-serif; }
#items-cat .ic-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; flex-wrap: wrap; }
#items-cat .ic-title { font-size: 18px; font-weight: 800; color: #eaf1ff; display: inline-flex; align-items: center; gap: 9px; }
#items-cat .ic-title .ic-ic { color: #4aa3ff; font-size: 18px; }
#items-cat .ic-btn { cursor: pointer; border: 0; border-radius: 6px; font-weight: 700; padding: 8px 12px; font-size: 12px; background: #34465f; color: #cdd8ea; }
#items-cat .ic-btn:hover { background: #3d5170; }
#items-cat .ic-search { flex: 1 1 200px; min-width: 150px; max-width: 320px; background: #0f1722; border: 1px solid #2c3a45; border-radius: 9px; padding: 9px 12px; color: #eaf1ff; font-size: 13px; transition: border-color .15s; }
#items-cat .ic-search:focus { outline: none; border-color: #2FB2EF; }
/* Fundo escuro uniforme em todas as categorias. */
#items-cat .ic-cat { margin: 0 0 14px; padding: 12px 14px 14px; border-radius: 12px; background: #0f1722; border: 1px solid #243042; }
#items-cat .ic-cat:last-child { margin-bottom: 0; }
#items-cat .ic-cat h3 { font-size: 12px; color: #9fd0e6; margin: 2px 0 10px; border-bottom: 1px solid #2c3a45; padding-bottom: 7px; display: flex; justify-content: space-between; align-items: baseline; text-transform: uppercase; letter-spacing: .5px; }
#items-cat .ic-cat h3 .ic-count { color: #7d8ea0; font-weight: 400; font-size: 12px; text-transform: none; }
/* Aviso informativo por categoria (ex.: mecânica de captura). */
#items-cat .ic-note { color: #9fb3cc; font-size: 11.5px; margin: -2px 0 11px; padding: 8px 11px; background: rgba(74,163,255,.07); border: 1px solid rgba(74,163,255,.20); border-radius: 9px; line-height: 1.45; }
#items-cat .ic-note i { color: #4aa3ff; margin-right: 6px; }
#items-cat .ic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; }
#items-cat .ic-item { position: relative; display: flex; align-items: flex-start; gap: 11px; background: #131b25; border: 1px solid #243042; border-radius: 10px; padding: 10px 12px; transition: border-color .12s, background .12s; }
#items-cat .ic-item:hover { border-color: #2FB2EF; background: #16202c; }
/* Badge "NEW" no canto do card (itens recém-adicionados). */
#items-cat .ic-new { position: absolute; top: -6px; right: -5px; width: 16px; height: 16px; image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
#items-cat .ic-icon { width: 24px; height: 24px; flex: 0 0 24px; margin-top: 2px; image-rendering: pixelated; }
#items-cat .ic-info { min-width: 0; flex: 1; }
#items-cat .ic-row1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#items-cat .ic-name { font-size: 13.5px; font-weight: 700; color: #eaf1ff; }
#items-cat .ic-chip { font-size: 10.5px; font-weight: 700; color: #cfe6ff; background: #15324a; border: 1px solid #2a5170; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
#items-cat .ic-chip.ball { color: #ffd07a; background: rgba(255,180,60,.10); border-color: rgba(255,180,60,.45); }
#items-cat .ic-chip.heal { color: #9fe6a0; background: rgba(80,200,90,.10); border-color: rgba(80,200,90,.40); }
#items-cat .ic-desc { color: #aebccd; font-size: 12px; line-height: 1.45; margin-top: 4px; }
/* item_key só p/ admin */
#items-cat .ic-key { display: inline-block; margin-top: 6px; font-family: 'Consolas', ui-monospace, monospace; font-size: 10.5px; color: #7fd0ff; background: rgba(60,130,200,.12); border: 1px solid rgba(80,150,220,.28); border-radius: 5px; padding: 1px 6px; letter-spacing: .02em; }
#items-cat .ic-empty { color: #7d8ea0; font-size: 13px; padding: 24px; text-align: center; }
@media (max-width: 600px) { #items-cat .ic-grid { grid-template-columns: 1fr; } }
/* ===== Databases públicas (Itens / Moves / Habilidades) — estilo Pokédex. ===== */
#moves-panel, #abilities-panel, #items-panel { color: #cdd8ea; max-width: 1200px; margin: 0 auto; font-family: 'Open Sans', Arial, sans-serif; }
/* Container translúcido escuro (igual à Pokédex/catálogo). */
.ssdb { background: rgba(6,10,16,.6); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 14px; max-width: 1200px; margin: 0 auto; }
.ssdb .ssdb-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.ssdb .ssdb-title { font-size: 18px; font-weight: 800; color: #eaf1ff; display: inline-flex; align-items: center; gap: 9px; }
.ssdb .ssdb-title .ssdb-ic { color: #4aa3ff; font-size: 19px; }
.ssdb .ssdb-search { flex: 1 1 200px; min-width: 150px; max-width: 320px; background: #0f1722; border: 1px solid #2c3a45; border-radius: 9px; padding: 9px 12px; color: #eaf1ff; font-size: 13px; transition: border-color .15s; }
.ssdb .ssdb-search:focus { outline: none; border-color: #2FB2EF; }
.ssdb .ssdb-sel { background: #0f1722; border: 1px solid #2c3a45; border-radius: 9px; padding: 9px 10px; color: #cdd8ea; font-size: 12px; cursor: pointer; }
.ssdb .ssdb-sel:focus { outline: none; border-color: #2FB2EF; }
.ssdb .ssdb-sel option { background: #1b242c; color: #e8eef0; }
.ssdb-body { background: #0f1722; border: 1px solid #243042; border-radius: 12px; max-height: 72vh; overflow-y: auto; }
.ssdb-count { color: #8aa0b8; font-size: 11.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; padding: 11px 16px 7px; }
.ssdb-empty { color: #7d8ea0; font-size: 13px; padding: 34px; text-align: center; }
/* ---- Database de Pokémon (aba Pokémons) ---- */
.pdb-bar .pdb-id-in { max-width: 78px; text-align: center; }
/* Um ÚNICO container de rolagem (H+V): overflow-x:auto aninhado dentro do overflow-y:auto
travava a rolagem horizontal no toque (mobile) e as colunas "sumiam". */
.pdb-body { padding: 0; min-height: 55vh; overflow: auto; -webkit-overflow-scrolling: touch; }
.pdb-body.pdb-loading { opacity: .55; transition: opacity .12s; }
.pdb-body::-webkit-scrollbar { height: 9px; width: 9px; }
.pdb-body::-webkit-scrollbar-thumb { background: #33445c; border-radius: 5px; }
.pdb-scroll { min-width: 100%; width: max-content; }
.pdb-msg { color: #7d8ea0; font-size: 13px; padding: 30px; text-align: center; }
.pdb-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 720px; }
.pdb-table thead th { position: sticky; top: 0; z-index: 1; background: #4f8f3f; color: #fff; font-weight: 700; padding: 8px 6px; text-align: center; white-space: nowrap; border-bottom: 2px solid #3c6f30; }
.pdb-table thead th.pdb-l { text-align: left; padding-left: 12px; }
.pdb-table tbody td { padding: 7px 6px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.05); color: #d7e0ec; white-space: nowrap; }
.pdb-table tbody td.pdb-l { text-align: left; padding-left: 12px; }
.pdb-table tbody tr:hover { background: rgba(74,163,255,.07); }
.pdb-dim { color: #6f7f96; }
.pdb-name { display: inline-flex; align-items: center; gap: 6px; }
.pdb-ic { display: inline-block; width: 40px; height: 30px; }
.pdb-type { display: inline-block; padding: 2px 7px; border-radius: 4px; color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.pdb-tier { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #23324a; color: #bcd2f0; font-weight: 700; font-size: 11px; }
.pdb-ev { color: #a7c6a0; font-size: 11.5px; white-space: normal; min-width: 120px; }
.pdb-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 12px 0 2px; }
.pdb-pg { background: #16202e; border: 1px solid #2c3a45; color: #cdd8ea; border-radius: 8px; padding: 6px 12px; cursor: pointer; }
.pdb-pg:disabled { opacity: .4; cursor: default; }
.pdb-pginfo { color: #8aa0b8; font-size: 12px; }
@media (max-width: 600px) {
.pdb-body { min-height: 60vh; max-height: 68vh; }
.pdb-table { min-width: 640px; font-size: 11.5px; }
.pdb-table thead th, .pdb-table tbody td { padding: 6px 5px; }
.pdb-ic { width: 32px; height: 24px; }
.pdb-type { padding: 2px 5px; font-size: 9px; }
.pdb-ev { min-width: 96px; font-size: 11px; }
}
/* ---- Linha de golpe (grid: tipo | conteúdo) ---- */
.mdb-row { display: grid; grid-template-columns: 66px 1fr; gap: 13px; align-items: center;
padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,.05); transition: background .12s; }
.mdb-row:last-child { border-bottom: 0; }
.mdb-row:hover { background: rgba(74,163,255,.07); }
.mdb-type { display: flex; justify-content: center; }
.tt-type-pill { display: inline-block; width: 100%; max-width: 62px; text-align: center; color: #fff; font-weight: 700;
text-transform: uppercase; font-size: 10px; letter-spacing: .4px; padding: 4px 0; border-radius: 5px;
text-shadow: 0 1px 1px rgba(0,0,0,.5); box-shadow: 0 1px 3px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18); }
.mdb-main { min-width: 0; }
.mdb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mdb-name { font-weight: 700; color: #eaf1ff; font-size: 14px; }
.mdb-cat { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #fff;
padding: 2px 8px; border-radius: 999px; }
.mdb-cat.physical { background: #c0392b; } .mdb-cat.special { background: #2f6fd0; } .mdb-cat.status { background: #6b7785; }
.mdb-chips { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; align-items: center; }
.mdb-chip { font-size: 11px; color: #9fb3cc; background: #182433; border: 1px solid #283849; border-radius: 999px;
padding: 2px 10px; white-space: nowrap; }
.mdb-chip b { color: #eaf1ff; font-weight: 700; }
.mdb-chip.contact { color: #ffd07a; border-color: rgba(255,180,60,.45); background: rgba(255,180,60,.10); font-weight: 700; }
.mdb-desc { color: #aebccd; font-size: 12px; margin-top: 5px; line-height: 1.45; }
/* ---- Linha de habilidade ---- */
.adb-row { padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,.05); transition: background .12s; }
.adb-row:last-child { border-bottom: 0; }
.adb-row:hover { background: rgba(74,163,255,.07); }
.adb-head { display: flex; align-items: center; gap: 8px; }
.adb-name { font-weight: 700; color: #eaf1ff; font-size: 14px; }
/* Avaliação em 5 estrelas: fundo cinza + preenchimento colorido por nota. */
.adb-rate { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.adb-stars { position: relative; display: inline-block; font-size: 14px; line-height: 1; letter-spacing: 2px; }
.adb-stars .adb-stars-bg { color: #36465a; }
.adb-stars .adb-stars-fg { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; }
.adb-rate-n { color: #8aa0b8; font-size: 11px; font-weight: 700; min-width: 26px; text-align: right; }
.adb-desc { color: #aebccd; font-size: 12px; margin-top: 5px; line-height: 1.45; }
@media (max-width: 600px) {
.mdb-row { grid-template-columns: 56px 1fr; gap: 9px; padding: 10px 11px; }
.mdb-chips { width: 100%; margin-left: 0; margin-top: 5px; }
.adb-row { padding: 10px 11px; }
}
/* ===== BOLSA (visual baseado no bolsa.php do jogo antigo) ===== */
#bag-panel { color: #cdd8ea; max-width: 1100px; margin: 0 auto; font-family: 'Open Sans', Arial, sans-serif; }
/* Modo OVERLAY: Bolsa ancorada DENTRO da janela do mapa (igual a Box/Centro). */
#bag-panel.bag-overlay { position: absolute; inset: 0; z-index: 8; max-width: none; margin: 0; padding: 12px; overflow-y: auto; background: rgba(8,12,16,.55); }
#bag-panel.bag-overlay #bag { max-width: 820px; margin: 0 auto; background: #0e131c; border: 1px solid #243042; border-radius: 12px; padding: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.6); }
#bag-panel.bag-overlay .bag-fundo { min-height: 260px; }
#bag .bag-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; flex-wrap: wrap; }
#bag .bag-title { font-size: 17px; font-weight: 700; color: #eaf1ff; }
#bag .bag-close { margin-left: auto; cursor: pointer; background: none; border: 0; color: #9fb0c4; font-size: 26px; line-height: 1; padding: 0 6px; }
#bag .bag-close:hover { color: #fff; }
#bag .bag-btn { cursor: pointer; border: 0; border-radius: 6px; font-weight: 700; padding: 8px 12px; font-size: 12px; background: #34465f; color: #cdd8ea; }
#bag .bag-btn:hover { background: #3d5170; }
/* Tabs da Bag — mesmo visual das do PokéMarket (Button.png) */
#bag .bag-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
#bag .bag-tab { cursor: pointer; border: 0; display: inline-flex; align-items: center; gap: 5px; min-width: 92px; height: 40px; padding: 0 12px; font-size: 12px; font-weight: 800; color: #eaf1ff; text-shadow: 0 1px 2px rgba(0,0,0,.7); background: url('/old/images/shop/Button.png?v=1205') center bottom/100% 200% no-repeat; transition: filter .15s, transform .1s; }
#bag .bag-tab:hover { filter: brightness(1.06); }
#bag .bag-tab:active { transform: scale(.97); }
#bag .bag-tab.active { background-position: center top; }
#bag .bag-tab .bag-tab-n { color: rgba(234,241,255,.72); font-weight: 600; }
/* Fundo da bolsa: textura bgbolsa.png repetida, igual ao .bolsafundo antigo. */
#bag .bag-fundo { background: url(/rpg-images/backpack/bgbolsa.png?v=1205) repeat; border: 1px solid #ccc; border-radius: 5px; min-height: 502px; padding: 6px; overflow: hidden; }
/* Célula 50x50 igual ao .item antigo. */
#bag .bag-item { position: relative; width: 50px; height: 50px; border: 1px solid #ccc; float: left; margin: 5px; cursor: pointer; background: rgba(255,255,255,.92); border-radius: 3px; }
#bag .bag-item:hover { border-color: #fff; background: #fff; }
/* Borda vermelha = item que NÃO pode ser vendido (no_sell). Igual ao .cb do bolsa.php. */
#bag .bag-item.no-sell { box-shadow: 0 0 9px #f00 inset; border-color: #f00; }
#bag .bag-item .bag-ic { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); image-rendering: pixelated; }
#bag .bag-item .bag-ic-img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
/* Badge de quantidade no canto inferior direito (igual ao .qtd antigo). */
#bag .bag-item .bag-qtd { position: absolute; right: 0; bottom: 0; min-width: 16px; padding: 0 3px; font-size: 11px; line-height: 15px; text-align: center; color: #222; font-weight: 700; background: rgba(163,159,159,.9); border-radius: 6px 0 0 0; }
#bag .bag-new { position: absolute; top: -6px; right: -5px; width: 16px; height: 16px; image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
#bag .bag-empty { color: #8a9bb0; font-size: 13px; padding: 56px 24px; text-align: center; clear: both; }
#bag .bag-empty-ic { display: block; font-size: 52px; color: #3a4a63; margin: 0 auto 14px; }
#bag .bag-empty-t { font-size: 17px; font-weight: 700; color: #cdd8ea; margin-bottom: 6px; }
#bag .bag-empty-s { font-size: 13px; color: #7d8ea0; max-width: 320px; margin: 0 auto; line-height: 1.5; }
/* Janela de detalhes do item (modal), baseada no popup do bolsa.php. */
#bag .bag-pop { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); }
#bag .bag-pop-box { width: 350px; max-width: 92vw; background: #141b26; border: 1px solid #33445c; border-radius: 10px; box-shadow: 0 12px 44px rgba(0,0,0,.6); overflow: hidden; color: #dfe8ff; }
#bag .bag-pop-head { background: #1d2735; padding: 10px 14px; font-size: 15px; font-weight: 700; color: #eaf1ff; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #2c3a4f; }
#bag .bag-pop-x { cursor: pointer; color: #8a9bb0; font-size: 20px; line-height: 1; background: none; border: 0; padding: 0 2px; }
#bag .bag-pop-x:hover { color: #fff; }
#bag .bag-pop-body { display: flex; gap: 14px; padding: 14px; }
#bag .bag-pop-img { flex: 0 0 64px; width: 64px; height: 64px; background: rgba(255,255,255,.92); border: 1px solid #ccc; border-radius: 6px; position: relative; }
#bag .bag-pop-img.no-sell { box-shadow: 0 0 9px #f00 inset; border-color: #f00; }
#bag .bag-pop-img .bag-ic { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.5); transform-origin: center; image-rendering: pixelated; }
#bag .bag-pop-img .bag-ic-img { width: 40px; height: 40px; object-fit: contain; transform: translate(-50%, -50%); }
#bag .bag-pop-info { flex: 1; min-width: 0; font-size: 13px; }
#bag .bag-pop-qty { color: #9fd0e6; margin-bottom: 6px; }
#bag .bag-pop-qty b { color: #eaf1ff; }
#bag .bag-pop-desc { color: #cdd8ea; line-height: 1.45; }
#bag .bag-pop-nosell { margin-top: 10px; color: #ff5b5b; font-weight: 700; text-align: center; }
#bag .bag-pop-foot { padding: 0 14px 14px; text-align: center; }
/* Seletor de Pokémon compatível com a pedra. */
#bag .bag-pop-sel { padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-height: 320px; overflow-y: auto; }
#bag .bag-poke { position: relative; width: 84px; cursor: pointer; text-align: center; border: 1px solid #2c3a45; border-radius: 8px; padding: 8px 4px; background: #1b2430; }
/* Item que o pokémon já segura (canto sup. direito da célula) + botão desequipar. */
#bag .bag-held { position: absolute; top: 2px; right: 2px; line-height: 0; }
#bag .bag-held-ic { display: inline-block; width: 24px; height: 24px; image-rendering: pixelated; }
#bag img.bag-held-ic { object-fit: contain; }
#bag .bag-unequip { position: absolute; top: -7px; right: -7px; width: 15px; height: 15px; border-radius: 50%; border: 1px solid #fff; background: #c0392b; color: #fff; font-size: 11px; line-height: 12px; text-align: center; cursor: pointer; padding: 0; }
#bag .bag-unequip:hover { background: #e74c3c; }
#bag .bag-poke:hover { background: #243042; border-color: #3a5070; }
/* Ícone em tamanho real (32×32), sem upscaling. */
#bag .bag-poke img { display: block; margin: 0 auto; width: 32px; height: 32px; image-rendering: pixelated; }
#bag .bag-poke-lv { display: block; font-size: 10px; color: #9fd0e6; }
#bag .bag-poke-nm { display: block; font-size: 11px; color: #dfe8ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bag .bag-poke-fnt { display: block; font-size: 10px; font-weight: 700; color: #ff5b5b; }
/* Barra de HP + status no seletor de Medicina. */
#bag .bag-hpbar { display: block; height: 5px; border-radius: 3px; background: #2a3647; margin: 4px 2px 1px; overflow: hidden; }
#bag .bag-hpfill { display: block; height: 100%; border-radius: 3px; }
#bag .bag-hpfill.hp-hi { background: #5cd65c; }
#bag .bag-hpfill.hp-mid { background: #f0c419; }
#bag .bag-hpfill.hp-lo { background: #e8503a; }
#bag .bag-hptxt { display: block; font-size: 9px; color: #9fb0c4; }
#bag .bag-poke-st { display: inline-block; margin-top: 2px; font-size: 9px; font-weight: 700; color: #fff; padding: 0 4px; border-radius: 3px; line-height: 14px; }
#bag .bag-poke-st.st-psn, #bag .bag-poke-st.st-tox { background: #a040a0; }
#bag .bag-poke-st.st-brn { background: #e8503a; }
#bag .bag-poke-st.st-par { background: #c9a000; }
#bag .bag-poke-st.st-slp { background: #7a7a8a; }
#bag .bag-poke-st.st-frz { background: #3aa0c9; }
.shop-mk { max-width: 1200px; margin: 0 auto; }
.shop-mk .shop-wallet { display:flex; gap:8px; margin-left:auto; align-items:center; }
.shop-mk .shop-coin { display:flex; align-items:center; gap:6px; font-weight:800; font-size:13px; padding:6px 12px; border-radius:20px; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.06); white-space:nowrap; }
.shop-mk .shop-coin.silver { color:#e3eaf4; } .shop-mk .shop-coin.gold { color:#ffce54; }
.shop-mk .shop-coin .dot { width:12px; height:12px; border-radius:50%; display:inline-block; }
.shop-mk .shop-coin.silver .dot { background:linear-gradient(160deg,#eef3f9,#aebccd); }
.shop-mk .shop-coin.gold .dot { background:linear-gradient(160deg,#ffe08a,#e0a72a); }
#shop-tabs { display:flex; gap:7px; flex-wrap:wrap; margin:2px 0 14px; }
/* Button.png = 2 metades empilhadas: metade de BAIXO = normal, metade de CIMA = selecionada. */
#shop-tabs .shop-tab { display:inline-flex; align-items:center; justify-content:center; gap:6px; width:125px; height:42px; padding:0 3px; background:url('/old/images/shop/Button.png?v=1205') center bottom/100% 200% no-repeat; border:0; color:#eaf1ff; font-size:12px; font-weight:800; cursor:pointer; text-shadow:0 1px 2px rgba(0,0,0,.7); transition:filter .15s,transform .1s; }
#shop-tabs .shop-tab:hover { filter:brightness(1.06); }
#shop-tabs .shop-tab:active { transform:scale(.96); }
#shop-tabs .shop-tab.active { background-position:center top; }
#shop-tabs .shop-tab .n { font-size:11px; font-weight:800; background:rgba(0,0,0,.22); border-radius:9px; padding:0 7px; min-width:18px; text-align:center; }
#shop-tabs .shop-tab.active .n { background:rgba(255,255,255,.22); }
/* Tabs da página de Doações (Doações / Recompensas) — mesmo visual das do PokéMarket */
#donate-tabs { display:flex; gap:7px; flex-wrap:wrap; justify-content:center; margin:2px 0 14px; }
#donate-tabs .shop-tab { display:inline-flex; align-items:center; justify-content:center; width:150px; height:42px; padding:0 3px; background:url('/old/images/shop/Button.png?v=1205') center bottom/100% 200% no-repeat; border:0; color:#eaf1ff; font-size:12px; font-weight:800; cursor:pointer; text-shadow:0 1px 2px rgba(0,0,0,.7); transition:filter .15s,transform .1s; }
#donate-tabs .shop-tab:hover { filter:brightness(1.06); }
#donate-tabs .shop-tab:active { transform:scale(.96); }
#donate-tabs .shop-tab.active { background-position:center top; }
/* Tabs das Databases (Itens/Moves/Habilidades) — mesmo visual das do PokéMarket */
.db-tabs { display:flex; gap:5px; justify-content:center; flex-wrap:wrap; margin:0 auto 12px; padding-top:2px; }
.db-tab { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:130px; height:42px; padding:0 16px; background:url('/old/images/shop/Button.png?v=1205') center bottom/100% 200% no-repeat; border:0; color:#eaf1ff; font-size:12px; font-weight:800; cursor:pointer; text-shadow:0 1px 2px rgba(0,0,0,.7); transition:filter .15s,transform .1s; }
.db-tab:hover { filter:brightness(1.06); }
.db-tab:active { transform:scale(.96); }
.db-tab.active { background-position:center top; }
.shop-mk .shop-sec { margin-bottom:18px; }
.shop-mk .shop-sec-title { font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#8aa0b8; padding:6px 4px 10px; display:flex; align-items:center; gap:8px; }
.shop-mk .shop-sec-title .ln { flex:1; height:1px; background:rgba(255,255,255,.08); }
.shop-mk .shop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:12px; }
.shop-mk .shop-card { display:flex; flex-direction:column; aspect-ratio:202/288; background:url('/old/images/shop/Card.png?v=1205') center/100% 100% no-repeat; border:0; border-radius:0; padding:16px 6px 17px; transition:transform .12s,filter .15s; }
.shop-mk .shop-card:hover { transform:translateY(-3px); filter:brightness(1.07) drop-shadow(0 10px 22px rgba(0,0,0,.45)); }
.shop-mk .sc-top { display:flex; flex-direction:column; align-items:center; gap:4px; margin-bottom:2px; text-align:center; }
.shop-mk .sc-icon { width:56px; height:56px; flex:0 0 56px; display:flex; align-items:center; justify-content:center; background:#0b1422b3; border:1px solid #1d293b; border-radius:10px; overflow:hidden; }
.shop-mk .sc-icon span { image-rendering:pixelated; }
/* Skin de mapa no PokéMarket: sprite ANDANDO (charset 4x4, linha da frente) — cabe no slot de 56px. */
.shop-mk .sc-skinwalk { display:inline-block; width:40px; height:40px; image-rendering:pixelated; background-repeat:no-repeat; background-size:160px 160px; background-position:0 0; animation:sc-skinwalk .8s steps(4) infinite; }
@keyframes sc-skinwalk { from { background-position-x:0; } to { background-position-x:-160px; } }
/* Buffs da skin no card do PokéMarket: chips verdes (+X% Shiny/Exp/Lenda/Silver). */
.shop-mk .sc-skinbuffs { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin:2px 0 6px; }
.shop-mk .sc-buffchip { font-size:11px; font-weight:800; color:#8ff0b0; background:#123024; border:1px solid #1f5238; border-radius:20px; padding:2px 9px; white-space:nowrap; }
/* ===== Passe de Batalha ===== */
#bp-home { width:100%; margin:0 0 12px; }
.bph-card { display:flex; align-items:center; gap:14px; background:linear-gradient(120deg,#241a3a,#182036); border:1px solid #3a2f5e; border-radius:16px; padding:12px 16px; box-shadow:0 4px 14px rgba(0,0,0,.28); }
.bph-ico { width:44px; height:44px; flex:0 0 44px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:linear-gradient(180deg,#ffce54,#e0a72a); color:#3a2600; font-size:22px; }
.bph-mid { flex:1; min-width:0; }
.bph-name { color:#eaf1ff; font-weight:800; font-size:15px; }
.bph-lvl { color:#c9b8ff; font-weight:700; font-size:12px; margin-left:4px; }
.bph-prem { background:linear-gradient(180deg,#ffce54,#e0a72a); color:#3a2600; font-size:10px; font-weight:900; border-radius:20px; padding:2px 8px; margin-left:6px; vertical-align:middle; }
.bph-bar { height:9px; border-radius:20px; background:#0c1322; border:1px solid #2a2450; overflow:hidden; margin:6px 0 4px; }
.bph-bar i { display:block; height:100%; background:linear-gradient(90deg,#7c5cff,#b388ff); }
.bph-sub { font-size:11.5px; color:#9fb2cc; } .bph-claimable { color:#7fe0a0; }
.bph-right { display:flex; flex-direction:column; gap:7px; }
.bph-right button { position:relative; border:0; border-radius:10px; padding:9px 16px; font-weight:800; font-size:13px; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.bph-right .bph-open { background:linear-gradient(180deg,#7c5cff,#5a3fd6); color:#fff; }
.bph-open:hover { filter:brightness(1.08); }
.bph-right .bph-missions { background:#26334a; color:#eaf1ff; border:1px solid rgba(255,255,255,.1); }
.bph-right .bph-missions:hover { background:#2f4059; }
.bph-badge { background:#e0708a; color:#fff; border-radius:20px; padding:0 6px; font-size:11px; margin-left:2px; }
.bph-badge.alt { background:#7c5cff; }
@media (max-width:560px){ .bph-right { flex-direction:row; flex-basis:100%; } .bph-right button { flex:1; } }
@media (max-width:560px){ .bph-card { flex-wrap:wrap; } .bph-mid { order:3; flex-basis:100%; } }
#bp-mk { max-width:1200px; margin:0 auto; }
.bp-head { background:linear-gradient(120deg,#241a3a,#182036); border:1px solid #3a2f5e; border-radius:14px; padding:14px 16px; margin-bottom:14px; }
.bp-hd-row { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.bp-hd-name { color:#eaf1ff; font-weight:800; font-size:18px; }
.bp-hd-ends { color:#c9b8ff; font-size:12px; }
.bp-hd-lvl { color:#9fb2cc; font-size:13px; margin:6px 0 4px; } .bp-hd-lvl b { color:#eaf1ff; font-size:16px; }
.bp-hd-bar { position:relative; height:16px; border-radius:20px; background:#0c1322; border:1px solid #2a2450; overflow:hidden; }
.bp-hd-bar i { display:block; height:100%; background:linear-gradient(90deg,#7c5cff,#b388ff); }
.bp-hd-bar span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.bp-hd-actions { margin-top:10px; }
.bp-buy { background:linear-gradient(180deg,#ffce54,#e0a72a); color:#3a2600; border:0; border-radius:10px; padding:10px 16px; font-weight:800; cursor:pointer; }
.bp-hd-prem { color:#7fe0a0; font-weight:800; }
.bp-sec-h { color:#cdd8ea; font-weight:800; font-size:14px; margin:16px 0 8px; display:flex; align-items:center; gap:10px; }
.bp-legend { font-weight:600; font-size:11px; display:flex; gap:8px; }
.bp-lg { border-radius:20px; padding:1px 8px; } .bp-lg.free { background:#26334a; color:#cdd8ea; } .bp-lg.prem { background:linear-gradient(180deg,#ffce54,#e0a72a); color:#3a2600; }
/* Carrossel de recompensas: setas nas laterais + trilha rolável no meio. */
.bp-carousel { display:flex; align-items:stretch; gap:8px; }
.bp-cbtn { flex:0 0 40px; border:1px solid #2a2450; background:linear-gradient(180deg,#1d2740,#141b2e); color:#c9b8ff; border-radius:12px; cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; transition:filter .12s, transform .1s; }
.bp-cbtn:hover { filter:brightness(1.25); } .bp-cbtn:active { transform:scale(.94); }
.bp-track { flex:1; min-width:0; display:flex; gap:8px; overflow-x:auto; padding:4px 2px 10px; scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:#3a3060 transparent; }
.bp-track::-webkit-scrollbar { height:8px; } .bp-track::-webkit-scrollbar-thumb { background:#3a3060; border-radius:20px; }
@media (max-width:560px){ .bp-cbtn { flex-basis:30px; font-size:14px; } }
.bp-col { flex:0 0 108px; display:flex; flex-direction:column; gap:6px; }
.bp-col-lvl { text-align:center; font-weight:900; color:#9fb2cc; background:#0e1623; border:1px solid #1d293b; border-radius:8px; padding:3px 0; font-size:13px; }
.bp-col.reached .bp-col-lvl { color:#3a2600; background:linear-gradient(180deg,#ffce54,#e0a72a); border-color:#e0a72a; }
.bp-col.cur .bp-col-lvl { box-shadow:0 0 0 2px #7c5cff; }
.bp-cell { min-height:114px; } .bp-cell.prem.off { opacity:.5; }
/* padding-bottom generoso: a "cauda" (cadeado/botão/check) é ABSOLUTA no rodapé, então TODO nó
(cheio, vazio, resgatável, travado) tem a MESMA altura — nada desalinha entre colunas. */
.bp-node { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:4px; background:linear-gradient(180deg,#141f30,#0c1420); border:1px solid #26344a; border-radius:11px; padding:10px 5px 28px; min-height:114px; text-align:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 2px 7px rgba(0,0,0,.28); transition:border-color .12s, transform .1s, box-shadow .12s; }
.bp-node:not(.empty):hover { border-color:#3a5680; transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 6px 16px rgba(0,0,0,.4); }
.bp-node.empty { background:transparent; border:1px dashed #1d293b; }
.bp-cell.prem .bp-node:not(.empty) { border-color:#4a3a1e; background:#1a1508; }
.bp-node b { font-size:11px; color:#eaf1ff; line-height:1.1; word-break:break-word; }
/* Alinhamento uniforme: TODO ícone (pokémon/item/moeda) ocupa o MESMO slot de 44px de altura,
centralizado; o rótulo reserva 2 linhas → as recompensas nunca "pulam" de linha em linha. */
.bp-node > .bp-itemico, .bp-node > .bp-rico:not(.bp-skin) { height:44px; display:inline-flex; align-items:center; justify-content:center; }
.bp-node > .bp-itemico { width:40px; background-position:center; background-size:contain; }
.bp-node > .bp-rico:not(.bp-skin) { width:44px; font-size:26px; }
.bp-node > .bp-pokeico { width:44px; height:44px; }
.bp-node > b { height:28px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
/* Cauda (Resgatar / cadeado / check) ABSOLUTA no rodapé → não altera a altura do nó. */
.bp-node .bp-claim, .bp-node .bp-got, .bp-node .bp-lockico { position:absolute; left:50%; bottom:7px; transform:translateX(-50%); margin:0; }
/* Badge de QUANTIDADE (×N) no canto do ícone. */
.bp-node .bp-qty { position:absolute; top:6px; right:6px; z-index:2; background:rgba(9,15,25,.92); border:1px solid #33455f; color:#ffd95e; font-weight:800; font-size:10px; line-height:1; padding:2px 5px; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.5); }
/* Nó VAZIO: mesma altura dos demais, tracejado discreto e centralizado (não "pula" a linha). */
.bp-node.empty { min-height:114px; align-items:center; justify-content:center; padding:10px 5px; background:rgba(255,255,255,.015); border:1px dashed #223047; box-shadow:none; }
.bp-node.empty::after { content:'\2013'; color:#3a4a63; font-size:18px; font-weight:800; }
.bp-rico { font-size:20px; line-height:1; }
/* Skin como recompensa: charset 4x4 andando (linha da frente). background-size = 4×célula e a
animação rola EXATAMENTE 4×célula (keyframe próprio) — senão passa do fim e "buga" a sprite. */
.bp-rico.bp-skin { width:36px; height:36px; background-size:144px 144px; background-repeat:no-repeat; background-position:0 0; image-rendering:pixelated; animation:bp-skinwalk .8s steps(4) infinite; }
@keyframes bp-skinwalk { from { background-position-x:0; } to { background-position-x:-144px; } }
.bp-pokeico { width:44px; height:44px; image-rendering:pixelated; object-fit:contain; }
.bp-itemico { display:inline-block; width:26px; height:26px; image-rendering:pixelated; background-repeat:no-repeat; }
/* ===== Quests Diárias (navbar badge + modal) ===== */
.q-navbadge { display:inline-block; min-width:16px; height:16px; padding:0 4px; border-radius:9px; background:#e0392b; color:#fff; font-size:10px; font-weight:800; line-height:16px; text-align:center; vertical-align:middle; margin-left:3px; }
.qb-item { position:relative; }
.qb-item .q-navbadge { position:absolute; top:-3px; right:-3px; margin:0; box-shadow:0 0 0 2px #0e1117; pointer-events:none; z-index:2; }
.q-ov { position:fixed; inset:0; background:rgba(6,10,18,.72); z-index:20000; display:flex; align-items:center; justify-content:center; padding:16px; }
.q-modal { width:100%; max-width:560px; max-height:86vh; display:flex; flex-direction:column; background:linear-gradient(180deg,#141c2b,#0f1622); border:1px solid #223047; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.5); overflow:hidden; }
.q-head { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid #1d293b; }
.q-title { font-weight:800; color:#eaf1ff; font-size:16px; display:flex; align-items:center; gap:8px; }
.q-title i { color:#7c9dff; }
.q-reset { margin-left:auto; font-size:12px; color:#9fb2cc; font-weight:700; white-space:nowrap; }
.q-reset i { color:#7c9dff; margin-right:3px; }
.q-close { background:#26334a; color:#cdd8ea; border:0; border-radius:8px; width:30px; height:30px; font-size:20px; line-height:1; cursor:pointer; }
.q-close:hover { background:#33425e; }
.q-scroll { overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.q-empty { color:#7f93ad; text-align:center; padding:26px 10px; font-size:14px; }
.q-card { display:flex; align-items:center; gap:12px; background:#0e1623; border:1px solid #1d293b; border-left-width:4px; border-radius:12px; padding:11px 13px; }
.q-card.q-cls-1 { border-left-color:#8fa6c2; }
.q-card.q-cls-2 { border-left-color:#5b8cff; }
.q-card.q-cls-3 { border-left-color:#ffce54; }
.q-card.q-is-ready { box-shadow:0 0 0 1px rgba(127,224,160,.4); }
.q-card.q-is-claimed { opacity:.55; }
.q-left { flex:1; min-width:0; }
.q-stars { font-size:12px; color:#ffce54; letter-spacing:1px; }
.q-stars-off { color:#3a4a63; }
.q-desc { color:#eaf1ff; font-weight:700; font-size:13.5px; margin:2px 0 6px; }
.q-bar { height:8px; background:#0b1220; border:1px solid #26344c; border-radius:6px; overflow:hidden; }
.q-fill { height:100%; background:linear-gradient(90deg,#3a63d6,#5b8cff); border-radius:6px; transition:width .3s; }
.q-reward { display:flex; align-items:center; gap:5px; color:#eaf1ff; font-size:13px; font-weight:700; white-space:nowrap; min-width:72px; justify-content:center; }
.q-reward b { font-weight:800; }
.q-rico { font-size:19px; line-height:1; }
.q-rico.q-skin { width:36px; height:36px; background-size:144px 144px; background-repeat:no-repeat; background-position:0 0; image-rendering:pixelated; animation:bp-skinwalk .8s steps(4) infinite; display:inline-block; }
.q-pokeico { width:40px; height:40px; image-rendering:pixelated; object-fit:contain; }
.q-itemico { display:inline-block; width:30px; height:30px; image-rendering:pixelated; background-repeat:no-repeat; background-position:center; background-size:contain; }
.q-reward .q-qty { color:#ffd95e; font-weight:800; font-size:12px; }
.q-act { min-width:86px; text-align:right; }
.q-claim { background:linear-gradient(180deg,#5b8cff,#3a63d6); color:#fff; border:0; border-radius:9px; padding:8px 14px; font-weight:800; font-size:12.5px; cursor:pointer; box-shadow:0 3px 9px rgba(58,99,214,.32); }
.q-claim:hover { filter:brightness(1.08); }
.q-claim:disabled { opacity:.6; cursor:default; }
.q-claimed { color:#7fe0a0; font-weight:800; font-size:12px; }
.q-prog-n { color:#9fb2cc; font-weight:800; font-size:12.5px; }
@media (max-width:520px){ .q-reward{ min-width:56px; } .q-pokeico{ width:34px; height:34px; } .q-act{ min-width:70px; } }
.bp-node.ready { border-color:#2f6b4f; }
.bp-claim { margin-top:3px; background:linear-gradient(180deg,#5fd08a,#2f9c5b); color:#06210f; border:0; border-radius:7px; padding:4px 9px; font-weight:800; font-size:11px; cursor:pointer; }
.bp-claim:disabled { opacity:.5; }
.bp-got { color:#7fe0a0; font-size:16px; } .bp-lockico { color:#5a6b83; font-size:13px; }
.bp-node.claimed { opacity:.7; }
.bp-missions { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.bp-ms { background:#0e1623; border:1px solid #1d293b; border-radius:10px; padding:10px 12px; }
.bp-ms.done { border-color:#2f6b4f; }
.bp-ms-t { color:#eaf1ff; font-weight:700; font-size:13px; margin-bottom:6px; } .bp-ms.done .bp-ms-t i { color:#7fe0a0; }
.bp-ms-bar { height:7px; border-radius:20px; background:#0c1322; border:1px solid #24324a; overflow:hidden; }
.bp-ms-bar i { display:block; height:100%; background:linear-gradient(90deg,#7c5cff,#b388ff); }
.bp-ms.done .bp-ms-bar i { background:linear-gradient(90deg,#5fd08a,#2f9c5b); }
.bp-ms-x { font-size:11px; color:#9fb2cc; margin-top:5px; }
/* Cabeçalho: ações (Comprar Premium + botão Missões) e badge */
.bp-hd-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.bp-hd-max { color:#7f8db0; font-weight:600; }
.bp-missions-btn { background:#26334a; color:#eaf1ff; border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:10px 16px; font-weight:800; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.bp-missions-btn:hover { background:#2f4059; }
.bp-msbadge { background:#e0708a; color:#fff; border-radius:20px; padding:0 7px; font-size:11px; font-weight:900; }
/* Janela suspensa (modal) das missões */
.bp-modal-ov { position:fixed; inset:0; z-index:100000; background:rgba(4,7,12,.66); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:20px; animation:bpFade .14s ease; }
@keyframes bpFade { from { opacity:0; } to { opacity:1; } }
.bp-modal { width:100%; max-width:560px; max-height:82vh; display:flex; flex-direction:column; background:linear-gradient(180deg,#161f30,#0f1622); border:1px solid #2a3a55; border-radius:16px; box-shadow:0 18px 50px rgba(0,0,0,.5); overflow:hidden; animation:bpPop .16s ease; }
@keyframes bpPop { from { transform:translateY(10px) scale(.98); opacity:.6; } to { transform:none; opacity:1; } }
.bp-modal-h { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid #223047; }
.bp-modal-t { font-weight:800; color:#eaf1ff; font-size:15px; flex:1; display:flex; align-items:center; gap:8px; }
.bp-daily-tag { background:linear-gradient(180deg,#7c5cff,#5a3fd6); color:#fff; font-size:10px; font-weight:900; border-radius:20px; padding:2px 9px; }
.bp-modal-reset { font-size:11.5px; color:#c9b8ff; white-space:nowrap; }
.bp-modal-x { background:#26334a; color:#cdd8ea; border:0; border-radius:9px; width:30px; height:30px; font-size:20px; line-height:1; cursor:pointer; }
.bp-modal-x:hover { background:#374a66; }
.bp-modal-b { padding:14px 16px; overflow-y:auto; }
.bp-modal-b .bp-missions { grid-template-columns:1fr; }
.shop-mk .sc-head { min-width:0; flex:1; }
.shop-mk .sc-name { font-weight:800; color:#15233b; font-size:13px; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 0 rgba(255,255,255,.4); }
.shop-mk .sc-desc { font-size:10px; color:#3f5168; line-height:1.1; margin-bottom:6px; text-align:center; overflow:hidden; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; }
.shop-mk .sc-foot { display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:auto; }
.shop-mk .sc-price { font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; gap:4px; white-space:nowrap; background:rgba(11,18,30,.8); border:1px solid rgba(255,255,255,.13); border-radius:999px; padding:2px 6px 3px 6px; box-shadow:0 2px 6px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06); }
.shop-mk .sc-price.silver { color:#eef3f9; } .shop-mk .sc-price.gold { color:#ffce54; }
.shop-mk .sc-price .dot { width:11px; height:11px; border-radius:50%; display:inline-block; }
.shop-mk .sc-price.silver .dot { background:linear-gradient(160deg,#eef3f9,#aebccd); }
.shop-mk .sc-price.gold .dot { background:linear-gradient(160deg,#ffe08a,#e0a72a); }
.shop-mk .sc-actions { display:flex !important; align-items:center; justify-content:space-between; gap:7px; width:100%; }
.shop-mk .sc-qtybox { display:inline-flex; align-items:center; background:rgba(11,18,30,.82); border:1px solid rgba(255,255,255,.13); border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06); overflow:hidden; position:relative; top:-9px; }
.shop-mk .sc-qbtn { width:26px; height:26px; flex:0 0 26px; background:none; border:0; color:#cdd8ea; font-size:16px; font-weight:800; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .12s,color .12s; }
.shop-mk .sc-qbtn:hover { background:rgba(255,255,255,.1); color:#fff; }
.shop-mk .sc-qbtn:active { background:rgba(255,255,255,.18); }
.shop-mk .sc-qty { width:34px !important; flex:0 0 auto; min-width:0; background:none; border:0; color:#eaf1ff; border-radius:0; padding:0; font-size:12.5px; font-weight:700; text-align:center; box-sizing:border-box; -moz-appearance:textfield; }
.shop-mk .sc-qty::-webkit-outer-spin-button, .shop-mk .sc-qty::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.shop-mk .sc-buybtn { flex:1; background:linear-gradient(180deg,#3fb763,#2c9249); color:#fff; border:0; border-radius:9px; padding:4px 8px; font-weight:800; font-size:11px; cursor:pointer; white-space:nowrap; box-shadow:0 2px 7px rgba(44,146,73,.3); transition:filter .12s,transform .1s; }
.shop-mk .sc-buybtn:hover { filter:brightness(1.1); } .shop-mk .sc-buybtn:active { transform:scale(.94); }
.shop-mk .sc-buybtn:disabled { opacity:.5; cursor:default; filter:none; box-shadow:none; }
.shop-mk .shop-empty { text-align:center; color:#9fb2cc; padding:48px 10px; font-size:14px; }
.shop-mk .shop-empty i { display:block; font-size:34px; color:#3a4a5e; margin-bottom:12px; }
.shop-mk .shop-pager { display:flex; gap:6px; justify-content:center; align-items:center; margin:16px 0 4px; flex-wrap:wrap; }
.shop-mk .shop-pg { min-width:34px; height:34px; padding:0 10px; border:1px solid #2a3346; background:#0e1726; color:#cdd8ea; border-radius:9px; cursor:pointer; font-size:13px; font-weight:700; font-family:inherit; transition:border-color .12s,color .12s,background .12s; }
.shop-mk .shop-pg:hover:not(:disabled):not(.active) { border-color:#4db3ff; color:#fff; }
.shop-mk .shop-pg.active { background:#2f8f4f; border-color:#2f8f4f; color:#fff; cursor:default; }
.shop-mk .shop-pg:disabled { opacity:.38; cursor:default; }
.shop-mk .shop-pg-ell { color:#6f86a6; padding:0 3px; }
@media (max-width:560px){ .shop-mk .shop-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:9px; } .shop-mk .shop-card { padding:22px 16px 18px; } .shop-mk .sc-icon { width:42px; height:42px; flex:0 0 42px; } .shop-mk .shop-wallet { width:100%; margin:6px 0 0; } }
#bank-mk { max-width: 940px; margin: 0 auto; }
#bank-mk .shop-wallet { display:flex; gap:8px; margin-left:auto; align-items:center; flex-wrap:wrap; }
#bank-mk .shop-coin { display:flex; align-items:center; gap:6px; font-weight:800; font-size:13px; padding:6px 12px; border-radius:20px; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.06); white-space:nowrap; }
#bank-mk .shop-coin .dot { width:12px; height:12px; border-radius:50%; display:inline-block; }
#bank-mk .shop-coin.silver { color:#e3eaf4; } #bank-mk .shop-coin.silver .dot { background:linear-gradient(160deg,#eef3f9,#aebccd); }
#bank-mk .shop-coin.bank { color:#7fd6a0; } #bank-mk .shop-coin.bank .dot { background:linear-gradient(160deg,#9af0c0,#3fae72); }
#bank-mk .shop-coin.gold { color:#ffce54; } #bank-mk .shop-coin.gold .dot { background:linear-gradient(160deg,#ffe08a,#e0a72a); }
#bank-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
#bank-mk .bk-card { display:flex; flex-direction:column; }
@media (max-width:680px){ #bank-grid { grid-template-columns:1fr; } }
#bank-mk .bk-card { background:linear-gradient(180deg,#17222f,#111a26); border:1px solid rgba(255,255,255,.07); border-radius:15px; padding:16px; }
#bank-mk .bk-card h3 { display:flex; align-items:center; gap:9px; font-size:14px; color:#eaf1ff; margin:0 0 4px; }
#bank-mk .bk-card h3 i { color:#4aa3ff; }
#bank-mk .bk-hint { font-size:11.5px; color:#8aa0b8; line-height:1.45; margin:0 0 12px; }
#bank-mk .bk-row { display:flex; gap:8px; margin-bottom:9px; flex-wrap:wrap; }
#bank-mk .bk-in { flex:1; min-width:90px; background:#0c141f; border:1px solid #2a3a52; color:#eaf1ff; border-radius:9px; padding:9px 11px; font-size:13px; -moz-appearance:textfield; }
#bank-mk .bk-in::-webkit-outer-spin-button, #bank-mk .bk-in::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
#bank-mk .bk-btn { border:0; border-radius:9px; padding:9px 15px; font-weight:800; font-size:12.5px; cursor:pointer; white-space:nowrap; transition:filter .12s, transform .1s; }
#bank-mk .bk-btn:active { transform:scale(.95); } #bank-mk .bk-btn:hover { filter:brightness(1.1); } #bank-mk .bk-btn:disabled { opacity:.5; cursor:default; }
#bank-mk .bk-green { background:linear-gradient(180deg,#3fb763,#2c9249); color:#fff; }
#bank-mk .bk-blue { background:linear-gradient(180deg,#3d82e6,#2f6fd0); color:#fff; }
#bank-mk .bk-amber { background:linear-gradient(180deg,#e0a93a,#c4862a); color:#1a1206; }
#bank-mk .bk-flex1 { flex:1; }
#bank-mk .bk-seg { display:flex; gap:6px; background:#0c141f; border:1px solid #2a3a52; border-radius:11px; padding:4px; margin:2px 0 11px; }
#bank-mk .bk-seg-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; border:0; background:transparent; color:#9fb2cc; font-weight:800; font-size:12.5px; padding:8px 6px; border-radius:8px; cursor:pointer; transition:background .15s, color .15s; }
#bank-mk .bk-seg-btn .dot { width:11px; height:11px; border-radius:50%; display:inline-block; }
#bank-mk .bk-seg-btn[data-what="silver"] .dot { background:linear-gradient(160deg,#eef3f9,#aebccd); }
#bank-mk .bk-seg-btn[data-what="gold"] .dot { background:linear-gradient(160deg,#ffe08a,#e0a72a); }
#bank-mk .bk-seg-btn.active { background:linear-gradient(180deg,#27384f,#1d2c41); color:#eaf1ff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
#bank-mk .bk-pool-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:11px; }
#bank-mk .bk-poolbadge { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:7px 11px; font-size:11.5px; color:#9fb2cc; }
#bank-mk .bk-poolbadge .dot { width:11px; height:11px; border-radius:50%; display:inline-block; }
#bank-mk .bk-poolbadge.gold .dot { background:linear-gradient(160deg,#ffe08a,#e0a72a); } #bank-mk .bk-poolbadge.gold b { color:#ffce54; }
#bank-mk .bk-poolbadge.silver .dot { background:linear-gradient(160deg,#eef3f9,#aebccd); } #bank-mk .bk-poolbadge.silver b { color:#e3eaf4; }
#bank-mk .bk-ex-preview { display:flex; gap:10px; flex-wrap:wrap; margin:0 0 11px; }
#bank-mk .bk-ex-opt { flex:1; min-width:150px; background:#0c141f; border:1px solid #243247; border-radius:11px; padding:10px 12px; }
#bank-mk .bk-ex-opt .lbl { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:#8aa0b8; margin-bottom:4px; }
#bank-mk .bk-ex-opt .val { font-size:14px; font-weight:800; display:flex; align-items:center; gap:6px; color:#e3eaf4; }
#bank-mk .bk-ex-opt .val .dot { width:10px; height:10px; border-radius:50%; background:linear-gradient(160deg,#eef3f9,#aebccd); display:inline-block; }
#bank-mk .bk-card-wide { grid-column:1 / -1; }
#bank-mk .bk-rankbadge { margin-left:auto; font-size:10px; font-weight:800; color:#ffce54; background:rgba(255,206,84,.12); border:1px solid rgba(255,206,84,.3); border-radius:20px; padding:3px 10px; display:inline-flex; align-items:center; gap:5px; }
#bank-mk .bk-rates { display:flex; gap:9px; flex-wrap:wrap; margin:2px 0 13px; }
#bank-mk .bk-rate { flex:1; min-width:210px; display:flex; align-items:center; gap:9px; background:#0c141f; border:1px solid #243247; border-radius:11px; padding:10px 13px; font-size:13.5px; font-weight:800; color:#e3eaf4; }
#bank-mk .bk-rate .dot { width:12px; height:12px; border-radius:50%; display:inline-block; flex:0 0 auto; }
#bank-mk .bk-rate .dot.gold { background:linear-gradient(160deg,#ffe08a,#e0a72a); }
#bank-mk .bk-rate .dot.silver { background:linear-gradient(160deg,#eef3f9,#aebccd); }
#bank-mk .bk-rate .arr { color:#5b7088; font-weight:400; }
#bank-mk .bk-ratetag { margin-left:auto; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; border-radius:7px; padding:3px 9px; }
#bank-mk .bk-rate.buy .bk-ratetag { background:rgba(224,169,58,.18); color:#f0c674; }
#bank-mk .bk-rate.sell .bk-ratetag { background:rgba(63,183,99,.16); color:#7fd6a0; }
#bank-mk .bk-msg { font-size:12px; margin-top:11px; padding:10px 13px; border-radius:10px; font-weight:600; display:none; align-items:center; gap:9px; line-height:1.4; }
#bank-mk .bk-msg i { font-size:15px; flex:0 0 auto; }
#bank-mk .bk-msg b { font-weight:800; }
#bank-mk .bk-msg.ok { display:flex; background:rgba(63,183,99,.12); border:1px solid rgba(63,183,99,.35); color:#a6efc6; }
#bank-mk .bk-msg.ok i { color:#4fd17e; }
#bank-mk .bk-msg.err { display:flex; background:rgba(224,112,138,.1); border:1px solid rgba(224,112,138,.38); color:#f2aab8; }
#bank-mk .bk-msg.err i { color:#e0708a; }
#donate-mk { max-width: 1200px; margin: 0 auto; }
#donate-mk .dn-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
#donate-mk .dn-pack { flex:0 0 290px; max-width:100%; display:flex; flex-direction:column; background:linear-gradient(180deg,#1b2536,#121b29); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px; position:relative; overflow:hidden; }
#donate-mk .dn-pack:hover { border-color:rgba(255,206,84,.4); }
#donate-mk .dn-pack .dn-pname { font-weight:800; color:#eaf1ff; font-size:16px; }
#donate-mk .dn-pack .dn-pdesc { font-size:11.5px; color:#9fb2cc; margin:3px 0 10px; min-height:16px; }
#donate-mk .dn-rwlist { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
#donate-mk .dn-rwline { display:flex; align-items:center; gap:8px; font-size:12.5px; color:#dbe6f2; }
#donate-mk .dn-rwline .dn-dot { width:12px; height:12px; border-radius:50%; flex:0 0 auto; }
#donate-mk .dn-rwline .dn-ic { width:22px; height:22px; flex:0 0 22px; display:flex; align-items:center; justify-content:center; }
#donate-mk .dn-rwline b { color:#fff; } #donate-mk .dn-rwline .dn-bound { font-size:10px; color:#ffce54; }
#donate-mk .dn-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; }
#donate-mk .dn-price { font-size:19px; font-weight:800; color:#7fe0a0; }
#donate-mk .dn-buy { background:linear-gradient(180deg,#ffce54,#e0a72a); color:#1a1206; border:0; border-radius:10px; padding:10px 16px; font-weight:800; font-size:13px; cursor:pointer; box-shadow:0 3px 9px rgba(224,167,42,.32); }
#donate-mk .dn-buy:hover { filter:brightness(1.06); } #donate-mk .dn-buy:active { transform:scale(.95); } #donate-mk .dn-buy:disabled { opacity:.45; cursor:default; }
/* ===== Carrinho de doação ===== */
#donate-mk .dn-foot-btns { display:flex; align-items:center; gap:7px; }
#donate-mk .dn-add { background:#243349; color:#cfe0f5; border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:10px 12px; font-weight:800; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
#donate-mk .dn-add:hover { background:#2d4260; } #donate-mk .dn-add:active { transform:scale(.95); } #donate-mk .dn-add.disabled { opacity:.4; cursor:default; }
#donate-mk .dn-add b { color:#ffce54; }
#donate-mk .dn-pack.incart { border-color:rgba(127,224,160,.5); }
#donate-mk .dn-cartbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; background:linear-gradient(180deg,#1d2c3f,#152233); border:1px solid rgba(127,224,160,.35); border-radius:14px; padding:11px 15px; margin-bottom:14px; }
#donate-mk .dn-cartinfo { color:#eaf1ff; font-size:14px; } #donate-mk .dn-cartinfo b { color:#7fe0a0; }
#donate-mk .dn-cartinfo i { color:#7fe0a0; margin-right:6px; }
#donate-mk .dn-cartbtns { display:flex; gap:8px; }
#donate-mk .dn-cartclear { background:#33404f; color:#cdd8ea; border:0; border-radius:9px; padding:9px 14px; font-weight:800; font-size:12px; cursor:pointer; }
#donate-mk .dn-cartgo { background:linear-gradient(180deg,#5fd08a,#2f9c5b); color:#06210f; border:0; border-radius:9px; padding:9px 16px; font-weight:800; font-size:13px; cursor:pointer; }
#donate-mk .dn-cartgo:hover { filter:brightness(1.06); }
#donate-mk .dn-cartlist { display:flex; flex-direction:column; gap:8px; margin:10px 0; text-align:left; }
#donate-mk .dn-cartrow { display:flex; align-items:center; gap:10px; background:#0e1623; border:1px solid #1d293b; border-radius:10px; padding:9px 12px; }
#donate-mk .dn-cartname { flex:1; min-width:0; color:#eaf1ff; font-weight:700; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#donate-mk .dn-cartqty { display:inline-flex; align-items:center; gap:8px; }
#donate-mk .dn-cartqty b { min-width:18px; text-align:center; color:#eaf1ff; }
#donate-mk .dn-cq { width:26px; height:26px; border-radius:7px; border:1px solid #2a3a52; background:#1a2536; color:#cfe0f5; font-weight:900; cursor:pointer; } #donate-mk .dn-cq.disabled { opacity:.35; cursor:default; }
#donate-mk .dn-cartsub { color:#7fe0a0; font-weight:800; font-size:13px; min-width:74px; text-align:right; }
#donate-mk .dn-crm { background:#5a2531; color:#ff9bb0; border:0; border-radius:7px; width:26px; height:26px; font-weight:900; cursor:pointer; }
#donate-mk .dn-carttot { text-align:right; font-size:15px; color:#cdd8ea; margin-top:4px; } #donate-mk .dn-carttot b { color:#7fe0a0; font-size:18px; }
#donate-mk .dn-stock { position:absolute; top:11px; right:11px; font-size:10px; font-weight:800; background:rgba(0,0,0,.4); color:#ffce54; border:1px solid rgba(255,206,84,.3); border-radius:20px; padding:3px 9px; }
#donate-mk .dn-stock.out { color:#e0708a; border-color:rgba(224,112,138,.4); }
#donate-mk .dn-empty { text-align:center; color:#9fb2cc; padding:48px 10px; }
#donate-mk .dn-empty i { display:block; font-size:34px; color:#3a4a5e; margin-bottom:12px; }
/* Checkout */
#donate-mk .dn-co { max-width:480px; margin:0 auto; background:linear-gradient(180deg,#1b2536,#121b29); border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:20px; text-align:center; }
#donate-mk .dn-co h3 { color:#eaf1ff; margin:0 0 4px; font-size:17px; } #donate-mk .dn-co .dn-cosub { color:#9fb2cc; font-size:12.5px; margin-bottom:16px; }
#donate-mk .dn-methods { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
#donate-mk .dn-method { flex:1; min-width:120px; background:#0e1623; border:1px solid #25344a; border-radius:13px; padding:15px 10px; cursor:pointer; color:#dbe6f2; font-weight:700; transition:border-color .15s,background .15s; }
#donate-mk .dn-method:hover { border-color:#4a8cf0; background:#13203250; }
#donate-mk .dn-method i { display:block; font-size:24px; margin-bottom:8px; color:#4aa3ff; }
#donate-mk .dn-method.pix i { color:#32bcad; } #donate-mk .dn-method.stripe i { color:#7a73ff; } #donate-mk .dn-method.infinitepay i { color:#7fe0a0; }
#donate-mk .dn-method:disabled, #donate-mk .dn-method.disabled { opacity:.4; cursor:default; pointer-events:none; }
#donate-mk .dn-qr { width:230px; height:230px; margin:6px auto 12px; border-radius:12px; background:#fff; padding:8px; }
#donate-mk .dn-qr img { width:100%; height:100%; image-rendering:pixelated; }
#donate-mk .dn-copy { display:flex; gap:8px; margin:10px 0; }
#donate-mk .dn-copy input { flex:1; background:#0c141f; border:1px solid #2a3a52; color:#cdd8ea; border-radius:8px; padding:9px 11px; font-size:11px; text-transform:none; }
/* Codigo Pix (copia e cola) e CASE-SENSITIVE: nunca em maiusculas (o input herdava text-transform). */
#dn-pixcode { text-transform:none !important; }
#donate-mk .dn-copy button, #donate-mk .dn-coback { background:#34465f; color:#eaf1ff; border:0; border-radius:8px; padding:9px 13px; font-weight:700; cursor:pointer; }
#donate-mk .dn-status { margin-top:14px; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:9px; }
#donate-mk .dn-status.wait { color:#ffce54; } #donate-mk .dn-status.ok { color:#7fe0a0; } #donate-mk .dn-status.err { color:#e0708a; }
#donate-mk .dn-link { display:inline-block; margin:8px 0; background:linear-gradient(180deg,#7a73ff,#5b54e0); color:#fff; border:0; border-radius:10px; padding:12px 20px; font-weight:800; font-size:14px; cursor:pointer; text-decoration:none; }
/* Minhas compras (histórico) */
#donate-mk .dn-hist { margin-top:22px; }
#donate-mk .dn-histh { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:#8aa0b8; margin:0 2px 10px; }
#donate-mk .dn-histh .ln { flex:1; height:1px; background:rgba(255,255,255,.08); }
#donate-mk .dn-table { width:100%; border-collapse:separate; border-spacing:0 6px; }
#donate-mk .dn-table th { text-align:left; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:#7d8ea0; padding:0 12px 2px; }
#donate-mk .dn-table td { background:#0e1623; border-top:1px solid #1d293b; border-bottom:1px solid #1d293b; padding:10px 12px; font-size:12.5px; color:#dbe6f2; vertical-align:middle; }
#donate-mk .dn-table td:first-child { border-left:1px solid #1d293b; border-radius:9px 0 0 9px; }
#donate-mk .dn-table td:last-child { border-right:1px solid #1d293b; border-radius:0 9px 9px 0; }
#donate-mk .dn-table .dn-tpack { font-weight:700; color:#eaf1ff; }
#donate-mk .dn-table .dn-tprice { color:#7fe0a0; font-weight:700; white-space:nowrap; }
#donate-mk .dn-st { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; border-radius:20px; padding:3px 10px; white-space:nowrap; }
#donate-mk .dn-st.paid { background:rgba(63,183,99,.15); color:#7fe0a0; }
#donate-mk .dn-st.pending { background:rgba(255,206,84,.13); color:#ffce54; }
#donate-mk .dn-st.canceled, #donate-mk .dn-st.expired { background:rgba(255,255,255,.06); color:#9fb2cc; }
#donate-mk .dn-tmethod { font-size:11px; color:#9fb2cc; }
#donate-mk .dn-histempty { color:#7d8ea0; font-size:12.5px; padding:14px 12px; background:#0e1623; border:1px solid #1d293b; border-radius:10px; text-align:center; }
@media (max-width:560px){ #donate-mk .dn-hide-sm { display:none; } #donate-mk .dn-table td, #donate-mk .dn-table th { padding:9px 8px; } }
#myteam .myteam-icon { cursor: pointer; }
/* Card detalhado do time (hover) — réplica escura do pokemon_popup antigo. */
#team-tip { position: absolute; z-index: 100080; display: none; width: 268px;
font-family: 'Open Sans', Arial, sans-serif; color: #dfe8ff; }
.tt-card { width: 268px; max-width: 100%; background: #121925; border: 1px solid #33445c; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 34px rgba(0,0,0,.6); text-align: left; }
.tt-head { background: #1d2735; padding: 7px 10px; font-size: 12px; font-weight: 700; color: #eaf1ff; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #2c3a4f; }
.tt-lv { margin-left: auto; font-size: 11px; color: #9fd0e6; font-weight: 700; }
.tt-rg { font-size: 10px; font-weight: 800; color: #cdb36a; background: rgba(224,196,90,.12); border: 1px solid rgba(224,196,90,.3); border-radius: 6px; padding: 1px 6px; letter-spacing: .3px; }
.tt-x { background: none; border: 0; color: #9fb0c4; font-size: 19px; line-height: 1; cursor: pointer; padding: 0 0 0 8px; }
.tt-x:hover { color: #fff; }
/* Janela de informação flutuante (Box): múltiplas, arrastáveis pelo cabeçalho, ×-fecha. */
.ss-pokewin { position: fixed; z-index: 9900; } /* acima do mapa (.sf-maxed 9000) E do Mercado Negro (.bm-mask 9800) */
.ss-pokewin .tt-head { cursor: move; user-select: none; -webkit-user-select: none; touch-action: none; }
.ss-pokewin .tt-x { cursor: pointer; }
.tt-ivtotal { color: #7ed957; }
.tt-friend { display: inline-flex; align-items: center; gap: 5px; color: #ff8fb0; font-weight: 700; }
.tt-friend.rdy { color: #ffd24a; }
.tt-friendbar { display: inline-block; width: 46px; height: 6px; background: #3a2634; border-radius: 4px; overflow: hidden; vertical-align: middle; }
.tt-friendbar i { display: block; height: 100%; background: linear-gradient(90deg, #ff6f91, #ff97b0); }
.tt-friend.rdy .tt-friendbar i { background: linear-gradient(90deg, #f0a92a, #ffd24a); }
/* ===== Juiz de Status (avaliação de IVs) ===== */
.judge-mask { position: fixed; inset: 0; z-index: 100070; background: rgba(4,7,12,.72); display: flex; align-items: center; justify-content: center; padding: 14px; }
.judge-win { width: 560px; max-width: 100%; background: #0e151f; border: 1px solid #25344a; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.6); overflow: hidden; color: #cdd8ea; font-family: 'Open Sans', Arial, sans-serif; }
.judge-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: linear-gradient(180deg,#16243a,#101a28); border-bottom: 1px solid #25344a; }
.judge-head .judge-mon { width: 32px; height: 32px; image-rendering: pixelated; }
.judge-title { font-weight: 800; color: #eaf1ff; font-size: 15px; }
.judge-name { color: #9fb3cc; font-size: 12.5px; }
.judge-x { margin-left: auto; background: none; border: 0; color: #9fb0c4; font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.judge-x:hover { color: #fff; }
.judge-body { display: flex; gap: 6px; padding: 14px; align-items: stretch; }
.judge-left { flex: 0 0 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.judge-left canvas { max-width: 100%; }
.judge-locktag { margin-top: 4px; font-size: 11px; color: #8aa0b8; background: #15202e; border: 1px solid #28384c; border-radius: 999px; padding: 3px 11px; }
.judge-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; justify-content: center; }
.judge-intro { margin: 0 0 2px; font-size: 13px; color: #b8c6da; line-height: 1.45; }
.judge-hint { margin: 2px 0 0; font-size: 11px; color: #7d8ea0; }
.judge-buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; border: 1px solid #2a5170; background: #15324a; color: #eaf1ff; border-radius: 10px; padding: 11px 14px; font-size: 13.5px; transition: filter .12s, transform .05s; }
.judge-buy b { font-weight: 700; }
.judge-buy span { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; white-space: nowrap; }
.judge-buy:hover { filter: brightness(1.15); }
.judge-buy:active { transform: translateY(1px); }
.judge-buy:disabled { opacity: .5; cursor: default; }
.judge-buy.premium { border-color: #b98a2a; background: linear-gradient(180deg,#7a5a16,#5e4512); color: #ffe9b0; }
.judge-buy.judge-upg { margin-top: 2px; }
.judge-coin { width: 15px; height: 15px; display: inline-block; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }
.judge-coin.silver { background: radial-gradient(circle at 35% 30%, #f2f6fb, #aab6c6 70%, #8795a6); }
.judge-coin.gold { background: radial-gradient(circle at 35% 30%, #ffe9a8, #e9b53f 70%, #c8962a); }
.judge-tier { align-self: flex-start; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; padding: 4px 12px; border-radius: 999px; }
.judge-tier-decent { background: rgba(150,170,190,.16); color: #b8c6da; }
.judge-tier-above { background: rgba(74,163,255,.16); color: #7fc0ff; }
.judge-tier-superior { background: rgba(126,217,87,.16); color: #9fe6a0; }
.judge-tier-exceptional { background: rgba(255,206,74,.18); color: #ffd86b; }
.judge-stats { display: flex; flex-direction: column; gap: 5px; }
.judge-statrow { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.judge-statk { flex: 0 0 56px; color: #9fb3cc; font-weight: 700; }
.judge-bar { flex: 1; height: 8px; background: #1a2533; border-radius: 6px; overflow: hidden; }
.judge-barfill { display: block; height: 100%; border-radius: 6px; }
/* IV perfeito (31/31): barra arco-íris que desliza continuamente. */
.judge-barfill.perfect {
background: linear-gradient(90deg, #ff004d, #ff8a00, #ffe600, #2ecc40, #00c8ff, #7a5cff, #ff2fd0, #ff004d);
background-size: 300% 100%;
animation: judgeRainbow 2.4s linear infinite;
box-shadow: 0 0 6px rgba(255,255,255,0.35);
}
@keyframes judgeRainbow { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
.judge-statv { flex: 0 0 auto; min-width: 58px; text-align: right; color: #eaf1ff; }
.judge-statv b { font-weight: 800; }
/* Valor "31/31" com o mesmo arco-íris (texto preenchido pelo gradiente). */
.judge-statv.perfect b {
background: linear-gradient(90deg, #ff004d, #ff8a00, #ffe600, #2ecc40, #00c8ff, #7a5cff, #ff2fd0, #ff004d);
background-size: 300% 100%; -webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
animation: judgeRainbow 2.4s linear infinite;
}
.judge-31 { color: #6f8095; font-size: 10.5px; }
.judge-bandtxt { font-weight: 700; font-size: 11px; }
.judge-rangetxt { font-weight: 800; font-size: 12px; color: #cfe0f3; font-variant-numeric: tabular-nums; }
.judge-best { font-size: 12.5px; color: #cdd8ea; }
.judge-best b { color: #ffd86b; }
.judge-pot { font-size: 12px; color: #9fb0c6; font-style: italic; line-height: 1.35; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 6px; margin-top: 2px; }
.judge-total { font-size: 13.5px; color: #cdd8ea; }
.judge-total b { color: #7ed957; font-weight: 800; }
@media (max-width: 540px) {
.judge-body { flex-direction: column; align-items: center; }
.judge-left { flex: 0 0 auto; }
.judge-right { width: 100%; }
}
/* ===== Roleta de Treinadores (batalha PvE) ===== */
.trn-mask { position: fixed; inset: 0; z-index: 9700; background: rgba(4,7,12,.74); display: flex; align-items: center; justify-content: center; padding: 14px; }
.trn-win { width: 460px; max-width: 100%; background: #0e151f; border: 1px solid #25344a; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.6); overflow: hidden; color: #cdd8ea; font-family: 'Open Sans', Arial, sans-serif; }
.trn-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: linear-gradient(180deg,#3a2a14,#241a10); border-bottom: 1px solid #4a3a1e; font-weight: 800; color: #ffe9b0; font-size: 15px; }
.trn-head i { margin-right: 6px; }
.trn-x { background: none; border: 0; color: #c8b58a; font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.trn-x:hover { color: #fff; }
.trn-spin { height: 150px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, #1a2738, #0d141d); }
.trn-spin img { height: 120px; image-rendering: auto; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.trn-status { text-align: center; padding: 12px; color: #9fb3cc; font-size: 13px; }
/* Megafone — marquee em CSS (controlado por JS) + tags coloridas */
.mg-viewport { overflow: hidden; white-space: nowrap; width: 84%; }
@media (min-width: 992px) and (max-width: 1199px) { .mg-viewport { width: 84%; left: 40px; position: relative; } }
#textmsg.mg-track { display: inline-block; white-space: nowrap; font-weight: 600; padding-left: 100%; will-change: transform; }
#textmsg.mg-track.mg-run { animation: mg-scroll linear 1; } /* uma passada; o JS encadeia o próximo aviso */
@keyframes mg-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.mg-item { color: #cdd8ea; }
.mg-sep { color: #4a5e7a; margin: 0 14px; }
.mg-welcome { color: #b8c6dd; }
.mg-game { color: #ffd86b; font-weight: 800; text-shadow: 0 0 6px rgba(255,216,107,.5); } /* nome do jogo */
.mg-player { color: #6cc6ff; font-weight: 800; } /* jogador */
.mg-mon, .mg-spawn { color: #7ee0a0; font-weight: 800; } /* pokémon */
.mg-shiny { color: #ffd86b; font-weight: 800; } /* shiny */
.mg-leg { color: #ff9d3b; font-weight: 800; } /* lendário */
.mg-myth { color: #d98bff; font-weight: 800; } /* mítico */
.mg-ini { color: #6cf0e0; font-weight: 800; } /* inicial */
.mg-evt { color: #ffcf54; font-weight: 800; } /* evento */
.mg-map { color: #8fd0ff; font-weight: 800; } /* mapa */
.mg-region { color: #c0a3ff; font-weight: 800; } /* região */
/* Seletor de personagem (sprite overworld) */
.sprite-mask { position: fixed; inset: 0; z-index: 9800; background: rgba(4,7,12,.82); display: flex; align-items: center; justify-content: center; }
.sprite-modal { width: min(560px, 94vw); max-height: 88vh; background: #11203a; border: 1px solid #2a3f63; border-radius: 14px; padding: 16px; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.sprite-head { color: #eaf2ff; font-weight: 800; font-size: 17px; text-align: center; margin-bottom: 12px; }
.sprite-grid { display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 6px; justify-content: center; overflow-y: auto; padding: 4px; }
.sprite-cell { width: 40px; height: 40px; border: 2px solid #2a3f63; border-radius: 8px; background-color: #0c1729; background-size: 160px 160px; background-position: 0 0; background-repeat: no-repeat; image-rendering: pixelated; cursor: pointer; transition: border-color .1s, transform .1s; }
.sprite-cell:hover { border-color: #6cc6ff; transform: translateY(-2px); }
.sprite-cell.sel { border-color: #ffd86b; box-shadow: 0 0 0 2px rgba(255,216,107,.45) inset; }
.sprite-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.sprite-ok, .sprite-cancel { padding: 9px 18px; border: 0; border-radius: 9px; font-weight: 700; cursor: pointer; }
.sprite-ok { background: #2fb24a; color: #fff; } .sprite-ok:disabled { opacity: .5; cursor: default; }
.sprite-cancel { background: #2a3a52; color: #cdd8ea; }
/* Viajar entre regiões */
.travel-mask { position: fixed; inset: 0; z-index: 9800; background: rgba(4,7,12,.85); display: flex; align-items: center; justify-content: center; }
.travel-modal { width: min(880px, 95vw); max-height: 90vh; background: #0f1d33; border: 1px solid #2a3f63; border-radius: 14px; padding: 16px; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.travel-head { color: #eaf2ff; font-weight: 800; font-size: 18px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.travel-cur { font-size: 13px; font-weight: 600; color: #8fd0ff; }
.travel-x { margin-left: auto; background: rgba(0,0,0,.4); border: 0; color: #fff; width: 30px; height: 30px; border-radius: 8px; font-size: 20px; cursor: pointer; line-height: 1; }
/* Carrossel de regiões (igual ao de criação de personagem): o do centro é o selecionado, maior. */
.travel-car { width: min(680px, 90%); margin: 4px auto 0; }
.travel-slide { box-sizing: border-box; padding: 8px; outline: none; }
.travel-card { position: relative; width: 100%; height: 130px; border: 2px solid #2a3f63; border-radius: 10px; background: #0c1729; overflow: hidden; color: #eaf2ff; transform: scale(.82); opacity: .55; transition: transform .2s ease, opacity .15s ease, border-color .12s ease; }
.travel-card img { width: 100%; height: 100%; object-fit: cover; }
.slick-center .travel-card { transform: scale(1.04); opacity: 1; border-color: #2FB2EF; box-shadow: 0 8px 26px rgba(0,0,0,.45); }
.slick-center .travel-card.cur { border-color: #2fb24a; }
.travel-name { position: absolute; top: 6px; left: 0; right: 0; text-align: center; font-weight: 800; text-shadow: 0 1px 3px #000; }
.travel-cost, .travel-time { position: absolute; left: 0; right: 0; text-align: center; font-weight: 700; text-shadow: 0 1px 3px #000; font-size: 13px; }
.travel-cost { bottom: 22px; color: #e3eaf4; } .travel-time { bottom: 4px; color: #cfe0f5; }
/* Moeda (Silver) do custo de viagem — mesma bolinha do PokéMarket/Loja. */
.travel-cost .dot, .tv-coin { width: 11px; height: 11px; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 5px; background: linear-gradient(160deg,#eef3f9,#aebccd); box-shadow: 0 0 4px rgba(0,0,0,.5); }
.travel-here { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-weight: 800; color: #7ee0a0; text-shadow: 0 1px 3px #000; }
.travel-foot { margin-top: 12px; border-top: 1px solid #21314c; padding-top: 12px; }
.travel-info { color: #cdd8ea; min-height: 36px; font-size: 14px; }
.travel-hint { color: #8fa6c0; font-size: 12px; }
.travel-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }
.travel-go { background: #2FB2EF; color: #04263a; font-weight: 800; border: 0; border-radius: 9px; padding: 9px 18px; cursor: pointer; }
.travel-go.surf { background: #4aa3ff; color: #fff; } .travel-go.fly { background: #c0a3ff; color: #2a1746; }
.travel-go:disabled { opacity: .45; cursor: default; }
.travel-cancel { background: #2a3a52; color: #cdd8ea; border: 0; border-radius: 9px; padding: 9px 18px; cursor: pointer; }
/* Mercado Negro — UI profissional */
/* Notificações (sino + modal de eventos) */
.ev-bell { position: relative; display: inline-block; color: #cdd8ea; font-size: 17px; padding: 0 4px; }
.ev-bell:hover { color: #ffd86b; }
.ev-badge { position: absolute; top: -7px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: #e0392b; color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px #0e1117; }
.ev-mask { position: fixed; inset: 0; z-index: 9820; background: rgba(3,5,9,.82); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ev-modal { width: min(560px, 96vw); max-height: 86vh; display: flex; flex-direction: column; background: linear-gradient(180deg,#141a26,#0e121b); border: 1px solid #26324a; border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.6); color: #cdd8ea; overflow: hidden; }
.ev-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; font-weight: 800; font-size: 16px; color: #eaf2ff; background: linear-gradient(180deg, rgba(47,178,239,.12), transparent); border-bottom: 1px solid #20283a; }
.ev-x { background: rgba(255,255,255,.06); border: 0; color: #cdd8ea; width: 30px; height: 30px; border-radius: 8px; font-size: 20px; cursor: pointer; line-height: 1; }
.ev-x:hover { background: rgba(255,255,255,.14); color: #fff; }
.ev-body { flex: 1; overflow-y: auto; padding: 8px 14px 12px; }
.ev-date { font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #7f93ad; margin: 14px 0 6px; padding-bottom: 4px; border-bottom: 1px solid #1c2435; }
.ev-row { display: flex; gap: 10px; padding: 8px 6px; border-radius: 8px; font-size: 13px; line-height: 1.45; }
.ev-row:hover { background: rgba(255,255,255,.03); }
.ev-time { flex: 0 0 auto; color: #6f8197; font-weight: 700; font-variant-numeric: tabular-nums; }
.ev-msg { flex: 1; color: #cdd8ea; min-width: 0; word-break: break-word; }
.ev-msg .ev-h { color: #8fd0ff; } .ev-msg .ev-g { color: #ffce54; }
.ev-empty { text-align: center; color: #7f93ad; font-size: 14px; padding: 40px 10px; line-height: 1.9; }
.ev-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px; border-top: 1px solid #20283a; font-size: 12px; color: #9fb2c8; }
.ev-pgbtn { background: rgba(255,255,255,.05); border: 1px solid #2a3346; color: #cdd8ea; border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.ev-pgbtn:hover:not(:disabled) { background: #2FB2EF; color: #fff; border-color: #2FB2EF; }
.ev-pgbtn:disabled { opacity: .4; cursor: default; }
/* Propriedade — catálogo de construções + barra de posicionamento */
.pc-mask { position: fixed; inset: 0; z-index: 9820; background: rgba(3,5,9,.82); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.pc-modal { width: min(640px, 96vw); max-height: 86vh; display: flex; flex-direction: column; background: linear-gradient(180deg,#141a26,#0e121b); border: 1px solid #26324a; border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.6); color: #cdd8ea; overflow: hidden; }
.pc-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; font-weight: 800; font-size: 16px; color: #eaf2ff; background: linear-gradient(180deg, rgba(110,229,154,.12), transparent); border-bottom: 1px solid #20283a; }
.pc-x { background: rgba(255,255,255,.06); border: 0; color: #cdd8ea; width: 30px; height: 30px; border-radius: 8px; font-size: 20px; cursor: pointer; line-height: 1; }
.pc-x:hover { background: rgba(255,255,255,.14); color: #fff; }
.pc-body { flex: 1; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
/* Abas da Loja unificada (Construções / Berrys / Apricorns). */
.pc-body .ps-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.pc-body .ps-searchwrap { position: relative; margin: 8px 0 4px; }
.pc-body .ps-search-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #7c8aa2; font-size: 13px; pointer-events: none; }
.pc-body .ps-search { width: 100%; box-sizing: border-box; padding: 9px 12px 9px 32px; border: 1px solid #2a3346; background: #141b28; color: #eaf1ff; border-radius: 10px; font-size: 13px; outline: none; transition: border-color .12s; }
.pc-body .ps-search:focus { border-color: #2FB2EF; }
.pc-body .ps-search::placeholder { color: #6d7a90; }
.pc-body .ps-tab { flex: 1 1 auto; min-width: 0; padding: 9px 6px; border: 1px solid #2a3346; background: #1a2230; color: #aebbcf; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; }
/* Mobile: 2 abas por linha (4 não cabiam numa linha só e a última sumia). */
@media (max-width: 520px) { .pc-body .ps-tab { flex: 1 1 calc(50% - 3px); } }
.pc-body .wh-note { color: #8aa0bd; font-size: 11px; margin: 0 2px 6px; } .pc-body .wh-note:empty { display: none; }
/* Fonte da Juventude — opções de reset */
.ft-optlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; max-width: 480px; margin: 0 auto; }
.ft-opt { display: block; width: 100%; text-align: left; padding: 9px 14px; border: 1px solid #2a3346; border-radius: 11px; background: #131a26; color: inherit; cursor: pointer; position: relative; transition: border-color .12s, background .12s, box-shadow .12s; }
.ft-opt:hover:not(.off) { border-color: #4a86c8; background: #16202e; }
.ft-opt.sel { border-color: #2f8f4f; background: #16241b; box-shadow: 0 0 0 1px #2f8f4f inset; }
.ft-opt.sel::after { content: '\2713'; position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: #9bf6b0; font-weight: 800; }
.ft-opt-t { color: #eaf2ff; font-size: 13px; font-weight: 700; }
.ft-opt-d { color: #8aa0bd; font-size: 11px; margin-top: 1px; }
.ft-opt.off { opacity: .5; cursor: default; }
.ft-price { text-align: center; margin-top: 12px; color: #cfe0f6; font-size: 13px; font-weight: 600; min-height: 20px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.ft-price:empty { display: none; }
/* Especialista de Moves — página com abas */
/* Tabs do Especialista — mesmo visual das do PokéMarket (Button.png) */
.ms-tabs { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; padding: 12px 14px 4px; }
.ms-tab { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 130px; height: 42px; padding: 0 16px; background: url('/old/images/shop/Button.png?v=1205') center bottom/100% 200% no-repeat; border: 0; color: #eaf1ff; font-size: 12px; font-weight: 800; cursor: pointer; text-shadow: 0 1px 2px rgba(0,0,0,.7); transition: filter .15s, transform .1s; }
.ms-tab:hover { filter: brightness(1.06); }
.ms-tab:active { transform: scale(.96); }
.ms-tab.on { background-position: center top; }
.ms-pad { padding: 16px; }
.ms-hint { color: #9fb2cc; font-size: 13px; margin-bottom: 12px; }
.ms-back-inline { background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.12); color: #cdd8ea; border-radius: 8px; padding: 6px 12px; cursor: pointer; font-weight: 700; }
/* Lista de golpes do relearn: botões no estilo de batalha, 2 por linha. */
.ms-moveset { flex-wrap: wrap; justify-content: center; max-width: 100%; margin: 10px auto 0; }
.ms-moveset .btn-type { flex: 0 1 calc(50% - 6px); }
/* Mobile: tabs rolam na horizontal (não estouram) + menos padding no painel/picker */
@media (max-width: 560px) {
.ms-tabs { flex-wrap: wrap; justify-content: center; padding: 10px 8px 0; gap: 5px; }
.ms-tab { min-width: 0; padding: 0 12px; height: 38px; font-size: 11.5px; white-space: nowrap; }
.ms-pad { padding: 12px 10px; }
.ms-pad .bm-pkcar { width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
.bm-pkcar.bm-pkrow { gap: 4px; }
.bm-pkcar.bm-pkrow .bm-pkslide { width: 100px; padding: 3px; }
.bm-pkcar.bm-pkrow .bm-pkcard { padding: 9px 4px; }
.ms-moveset .btn-type { flex: 0 1 100%; }
}
/* Ginásios */
.gym-region { color: #cfe0f6; font-size: 14px; margin: 4px 4px 14px; }
.gym-warn { color: #ffb86b; font-weight: 700; }
.gym-msg { text-align: center; color: #9fb2cc; padding: 30px 16px; font-size: 14px; }
.gym-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.gym-card { width: 132px; border: 1px solid #2a3346; border-radius: 12px; background: #131a26; padding: 10px 8px; text-align: center; position: relative; }
.gym-card.can { cursor: pointer; border-color: #2f8f4f; }
.gym-card.can:hover { background: #16241b; }
.gym-card.locked { opacity: .6; }
.gym-card.done { border-color: #c79a2e; }
.gym-pic { position: relative; width: 96px; height: 96px; margin: 0 auto 6px; }
.gym-portrait { width: 96px; height: 96px; object-fit: contain; image-rendering: pixelated; }
.gym-card.locked .gym-portrait { filter: brightness(0); }
.gym-badge { position: absolute; right: -4px; top: -4px; width: 30px; height: 30px; image-rendering: pixelated; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.gym-chk { position: absolute; left: -4px; top: -4px; background: #2f8f4f; color: #fff; border-radius: 50%; width: 22px; height: 22px; line-height: 22px; font-weight: 800; }
.gym-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.gym-nm { font-weight: 800; color: #eaf2ff; font-size: 13px; }
.gym-sub { color: #8aa0bd; font-size: 11px; }
.gym-foot { max-width: 480px; margin: 18px auto 0; text-align: center; border-top: 1px solid #20283a; padding-top: 14px; }
.gym-foot h4 { margin: 0 0 6px; color: #eaf2ff; } .gym-foot h4 small { color: #8aa0bd; font-weight: 400; }
.gym-foot p { color: #9fb2cc; font-size: 13px; margin: 0 0 12px; }
.gym-fight { max-width: 240px; margin: 0 auto; background: #2f8f4f; }
/* Insígnias */
.bdg-count { text-align: center; color: #ffd86b; font-weight: 700; margin: 2px 0 18px; font-size: 15px; }
.bdg-count b { font-size: 19px; }
.bdg-region { margin: 0 0 16px; background: rgba(255,255,255,.025); border: 1px solid #20283a; border-radius: 12px; padding: 12px 14px; }
.bdg-rhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.bdg-rname { font-weight: 800; color: #dbe6f7; letter-spacing: .6px; font-size: 14px; text-transform: uppercase; }
.bdg-rcount { font-size: 12px; font-weight: 700; color: #9fb2cc; background: rgba(0,0,0,.3); border-radius: 999px; padding: 2px 11px; }
.bdg-bar { height: 4px; border-radius: 4px; background: rgba(0,0,0,.4); overflow: hidden; margin-bottom: 13px; }
.bdg-bar i { display: block; height: 100%; background: linear-gradient(90deg,#3aa6ff,#2f8f4f); border-radius: 4px; transition: width .4s; }
.bdg-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.bdg-cell { width: 80px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bdg-ic { width: 62px; height: 62px; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: radial-gradient(circle at 50% 32%, #1b2433, #0d121b); border: 1px solid #283142; box-shadow: inset 0 1px 3px rgba(0,0,0,.55); transition: transform .12s, box-shadow .12s, border-color .12s; }
.bdg-ic img { max-width: 46px; max-height: 46px; image-rendering: pixelated; filter: grayscale(100%) brightness(.42); transition: filter .18s; }
.bdg-nm { font-size: 10px; line-height: 1.2; text-align: center; color: #6c7d96; max-width: 80px; }
.bdg-cell.has .bdg-ic { border-color: #ffcf4a; background: radial-gradient(circle at 50% 32%, #2c2716, #15110a); box-shadow: inset 0 1px 3px rgba(0,0,0,.4), 0 0 12px rgba(255,200,70,.4); }
.bdg-cell.has .bdg-ic:hover { transform: translateY(-3px); box-shadow: inset 0 1px 3px rgba(0,0,0,.4), 0 0 16px rgba(255,200,70,.6); }
.bdg-cell.has .bdg-ic img { filter: none; }
.bdg-cell.has .bdg-nm { color: #e7d3a0; font-weight: 700; }
/* % de insígnias da região no card .Badge da home (posição própria sobre o ícone) */
.PercentBadge { position: absolute; width: 49px; text-align: center; font-size: 11px; left: 8px; top: 20px; }
/* ===== Caixas (cases) — overlay + animação CS2 ===== */
.cs-mask { position: fixed; inset: 0; z-index: 100040; display: flex; align-items: center; justify-content: center; background: rgba(6,10,16,.88); backdrop-filter: blur(3px); overflow: hidden; }
/* ===== Estado SEM personagem: navbar mínima (Deslogar + bandeiras), só Gold + Megafone ===== */
#nochar-panel { display: none; }
body.ss-nochar #conteudo,
body.ss-nochar #mainmenu1,
body.ss-nochar #radial-menu,
body.ss-nochar .quick-battle,
body.ss-nochar .image-silver { display: none !important; }
body.ss-nochar #nochar-panel { display: block; margin: 10px auto 70px; max-width: 1150px; }
body.ss-nochar #seesilvers { width: 100%; }
.nochar-card { background: none; border: 0; border-radius: 0; padding: 0; text-align: center; box-shadow: none; }
.nochar-title { margin: 0 0 6px; color: #fff; font-size: 24px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.nochar-sub { margin: 0 0 26px; color: #9fb2cc; font-size: 14px; }
/* grade de cards (cards.png = 3 frames 206x254: masculino/feminino/criar; nameplate.png = overlay c/ faixa escura) */
.cs-cards { display: flex; gap: 16px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.cs-cards-loading { color: #9fb2cc; padding: 28px; }
.cs-char-card { position: relative; width: 143px; height: 177px; cursor: pointer; background: url("/rpg-images/charselect/cards.png?v=1205") no-repeat; background-size: 300% 100%; transition: transform .14s, filter .14s; }
.cs-char-card:hover { transform: translateY(-6px); filter: brightness(1.06) drop-shadow(0 14px 22px rgba(0,0,0,.5)); }
.cs-char-card.busy { opacity: .55; pointer-events: none; }
.cs-char-card.male { background-position: 0% 0; }
.cs-char-card.female { background-position: 50% 0; }
.cs-char-card.create { background-position: 100% 0; }
/* personagem banido: card todo cinza + bloco de proibido por cima */
.cs-char-card.banned { filter: grayscale(1) brightness(.62); cursor: not-allowed; }
.cs-char-card.banned:hover { transform: none; filter: grayscale(1) brightness(.62); }
.cs-char-block { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #ff5b5b; pointer-events: none; }
.cs-char-block i { font-size: 56px; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.cs-char-block span { font-size: 12px; font-weight: 800; letter-spacing: 2px; color: #ff7b7b; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
/* diálogo "Personagem banido" (Swal customizado) */
.ss-ban-pop { border-radius: 18px !important; border: 1px solid #2a3a52; border-top: 3px solid #e0394b; box-shadow: 0 24px 64px rgba(0,0,0,.6) !important; padding: 26px 24px 22px !important; }
.ssb-card { display: flex; flex-direction: column; align-items: center; }
.ssb-ic { width: 76px; height: 76px; border-radius: 50%; border: 3px solid #e0394b; display: flex; align-items: center; justify-content: center; color: #ff5b6b; box-shadow: 0 0 22px rgba(224,57,75,.35), inset 0 0 18px rgba(224,57,75,.12); margin-bottom: 14px; }
.ssb-x { font-size: 46px; line-height: 1; font-weight: 300; }
.ssb-title { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 16px; }
.ssb-rows { width: 100%; background: rgba(255,255,255,.03); border: 1px solid #243246; border-radius: 12px; padding: 10px 14px; text-align: left; }
.ssb-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13.5px; }
.ssb-row + .ssb-row { border-top: 1px solid #1c2838; }
.ssb-row span { color: #8da3bf; text-transform: uppercase; letter-spacing: .5px; font-size: 11px; font-weight: 700; align-self: center; }
.ssb-row b { color: #eaf2ff; text-align: right; }
.ss-ban-btn { margin-top: 18px; border: 0; border-radius: 10px; padding: 11px 30px; font-size: 14px; font-weight: 800; color: #fff; cursor: pointer; background: linear-gradient(180deg,#ff5f6e,#d6283a); box-shadow: 0 6px 18px rgba(214,40,58,.4); transition: filter .12s; }
.ss-ban-btn:hover { filter: brightness(1.08); }
/* diálogo de aviso (Swal temático amber) — validações da criação de personagem */
.ss-warn-pop { border-radius: 18px !important; border: 1px solid #2a3a52; border-top: 3px solid #e8a72b; box-shadow: 0 24px 64px rgba(0,0,0,.6) !important; padding: 26px 24px 22px !important; }
.ssw-ic { width: 76px; height: 76px; border-radius: 50%; border: 3px solid #e8a72b; display: flex; align-items: center; justify-content: center; color: #ffce54; box-shadow: 0 0 22px rgba(232,167,43,.3), inset 0 0 18px rgba(232,167,43,.1); margin-bottom: 16px; }
.ssw-ic span { font-size: 44px; line-height: 1; font-weight: 700; }
.ssw-msg { color: #dce6f2; font-size: 15px; line-height: 1.5; max-width: 330px; }
.ss-warn-btn { margin-top: 18px; border: 0; border-radius: 10px; padding: 11px 32px; font-size: 14px; font-weight: 800; color: #1a1206; cursor: pointer; background: linear-gradient(180deg,#f3cf7a,#cf9d2f); box-shadow: 0 6px 18px rgba(207,157,47,.4); transition: filter .12s; }
.ss-warn-btn:hover { filter: brightness(1.07); }
/* card menor, mas a sprite continua 138px (transborda um pouco o topo de propósito) */
.cs-char-spr { position: absolute; top: 8px; left: 0; right: 0; bottom: 40px; display: flex; align-items: flex-end; justify-content: center; z-index: 1; }
.cs-char-spr img { max-height: 138px; max-width: 118px; image-rendering: pixelated; }
.cs-char-plate { position: absolute; inset: 0; background: url("/rpg-images/charselect/nameplate.png?v=1205") center/98% 100% no-repeat; pointer-events: none; z-index: 2; }
.cs-char-info { position: absolute; left: 0; right: 0; bottom: 6px; padding: 0 8px; text-align: center; z-index: 3; }
.cs-char-nm { color: #fff; font-size: 12px; font-weight: 800; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-char-rk { color: #ffce54; font-size: 9px; font-weight: 700; margin-top: 2px; text-transform: uppercase; letter-spacing: .4px; }
/* card de criar: preço do personagem extra (sem nameplate/texto) */
.cs-create-price { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 5px; color: #fff; font-size: 14px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.cs-create-price .cs-coin { width: 16px; height: 16px; }
.cs-create-free { color: #6fe39a; }
/* ===== VIP (selo por personagem) ===== */
/* selo VIP no canto superior direito da barra do jogador (.Bar já é position:relative) — gif no tamanho original (16x16) */
.MyTrainner .Bar .vip-bar { position: absolute; top: 5px; right: 21px; z-index: 6; cursor: help; line-height: 0; }
.MyTrainner .Bar .vip-bar img { display: block; image-rendering: pixelated; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.cs-char-vip { position: absolute; top: 4px; right: 4px; z-index: 4; line-height: 0; pointer-events: none; }
.cs-char-vip img { display: block; image-rendering: pixelated; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.cs-vip-ic { display: flex; align-items: center; justify-content: center; }
.cs-vip-ic img { max-width: 100%; max-height: 100%; image-rendering: auto; }
/* ===== Criação de personagem + escolha do inicial (overlays movidos do login) ===== */
#character-overlay { position: fixed; inset: 0; z-index: 99997; display: none; overflow-y: auto; -webkit-overflow-scrolling: touch; background: rgba(8,12,16,.94); padding: 14px 8px calc(28px + env(safe-area-inset-bottom, 0px)); }
#character-overlay.show { display: flex; }
#character-overlay .char-box { margin: auto; }
.char-box { position: relative; width: 640px; max-width: 94vw; color: #e8eef0; border-radius: 18px; padding: 30px 28px; background: linear-gradient(180deg,#172230,#0e1622); border: 1px solid #28384c; box-shadow: 0 24px 64px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05); overflow: hidden; }
.char-box::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, #ffce54, transparent); }
.char-box h2 { color: #ffd86b; text-align: center; margin: 0 0 4px; letter-spacing: .5px; }
.char-box .char-sub { text-align: center; color: #9fb2bd; font-size: 13px; margin: 0 0 18px; }
.char-grid { display: flex; gap: 18px; }
.char-form { flex: 0 0 220px; }
.char-form label { display: block; font-size: 11px; color: #8da3bf; margin: 4px 2px 5px; text-transform: uppercase; letter-spacing: .7px; font-weight: 700; }
#character-overlay .field { width: 100%; display: block; margin: 0 0 12px; padding: 12px 14px; color: #e8eef0; font-size: 14px; border-radius: 6px; background: #131a20; border: 1px solid #2c3a45; transition: border-color .18s ease; }
#character-overlay .field::placeholder { color: #6f8290; }
#character-overlay .field { background: #0f1722; border-color: #28384c; }
#character-overlay .field:focus { outline: none; border-color: #ffce54; box-shadow: 0 0 0 3px rgba(255,206,84,.14); }
#character-overlay select.field { cursor: pointer; color-scheme: dark; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb2bd' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; }
#character-overlay select.field option { background: #1b242c; color: #e8eef0; }
.char-gender { display: flex; gap: 8px; margin: 0 0 12px; }
.cg-btn { flex: 1; padding: 9px 0; border: 1px solid #2c3a45; border-radius: 6px; background: #131a20; color: #9fb2bd; cursor: pointer; font-weight: 700; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.cg-btn.active { color: #ffe08a; border-color: #ffce54; background: rgba(255,206,84,.10); box-shadow: inset 0 0 0 1px rgba(255,206,84,.18); }
.cg-icon { display: inline-block; margin-right: 6px; font-weight: 700; }
.cg-icon.cg-male { color: #4aa3e0; } .cg-icon.cg-female { color: #e06b9a; }
#character-overlay .sumbit { width: 100%; margin-top: 6px; padding: 12px; font-size: 15px; font-weight: 800; color: #1a1206; cursor: pointer; border: 0; border-radius: 10px; background: linear-gradient(180deg,#ffd86b,#e8a72b); box-shadow: 0 6px 18px rgba(232,167,43,.35); transition: filter .12s; }
#character-overlay .sumbit:hover { filter: brightness(1.07); }
.ch-cancel { display: block; width: 100%; margin-top: 10px; padding: 10px 0; cursor: pointer; background: #1d2940; color: #cdd8ea; border: 1px solid #2a3a52; border-radius: 10px; transition: filter .12s; }
.ch-cancel:hover { filter: brightness(1.12); color: #fff; }
#character-overlay .form-error { color: #ff6b6b; font-size: 13px; text-align: center; min-height: 16px; margin: 0 auto 6px; }
.char-warn { margin: 0 2px 12px; padding: 8px 10px; font-size: 12px; line-height: 1.45; color: #ffcf66; background: rgba(255,203,5,.08); border: 1px solid rgba(255,203,5,.35); border-radius: 6px; }
.char-warn strong { color: #ffd98a; }
.char-avatars { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 4px; }
.ch-carousel { width: 100%; }
.ch-sprites { margin-top: 10px; }
.ch-sprites-title { color: #8da3bf; font-size: 11px; font-weight: 700; margin-bottom: 8px; text-align: center; text-transform: uppercase; letter-spacing: .7px; }
.ch-sprite-car { width: 100%; }
.ch-sprite-slide { box-sizing: border-box; padding: 6px 4px; outline: none; display: flex !important; justify-content: center; align-items: center; }
.ch-sprite-cell { width: 48px; height: 48px; border: 1px solid #2c3a45; border-radius: 8px; background-color: #131a20; background-size: 192px 192px; background-position: 0 0; background-repeat: no-repeat; image-rendering: pixelated; cursor: pointer; transition: transform .2s ease, opacity .15s ease, border-color .15s ease, background-color .15s ease; transform: scale(.78); opacity: .5; }
.slick-center .ch-sprite-cell { transform: scale(1.25); opacity: 1; border-color: #ffce54; background-color: rgba(255,206,84,.12); box-shadow: 0 0 14px rgba(255,206,84,.25); }
.av-item { box-sizing: border-box; padding: 5px; outline: none; }
.av-item .av-inner { height: 116px; border: 1px solid #2c3a45; border-radius: 8px; cursor: pointer; background: #131a20; display: grid; place-items: end center; overflow: hidden; transition: border-color .15s ease, transform .2s ease, background .15s ease; transform: scale(.78); opacity: .5; }
.av-item img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; image-rendering: pixelated; }
.slick-center .av-inner { transform: scale(1); opacity: 1; border-color: #ffce54; background: #0f1d2b; box-shadow: 0 0 0 1px rgba(255,206,84,.3), 0 10px 26px rgba(0,0,0,.55); }
.ch-charname { text-align: center; color: #ffd86b; font-weight: 800; letter-spacing: .5px; margin-top: 12px; min-height: 18px; font-size: 16px; }
.char-empty { color: #9fb2bd; font-size: 13px; text-align: center; padding: 28px 12px; }
/* setas dos carrosséis no tema do dashboard (substitui o ciano herdado) */
#character-overlay .slick-arrow { top: 50%; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.04); border: 1px solid #2a3a52; color: #cbd6e6; font-size: 16px; line-height: 28px; transition: background .14s, border-color .14s, color .14s; }
#character-overlay .slick-arrow:hover { background: rgba(255,206,84,.14); border-color: #ffce54; color: #ffce54; }
#character-overlay .slick-prev { left: -2px; } #character-overlay .slick-next { right: -2px; }
#starter-overlay { position: fixed; inset: 0; z-index: 99997; display: none; overflow-y: auto; -webkit-overflow-scrolling: touch; background: rgba(8,12,16,.92); padding: 14px 8px calc(28px + env(safe-area-inset-bottom, 0px)); }
#starter-overlay.show { display: flex; }
#starter-overlay .starter-box { margin: auto; }
.starter-box { text-align: center; color: #e8eef0; padding: 1rem; }
.starter-box h2 { color: #ffd86b; margin-bottom: 1.2rem; letter-spacing: .5px; }
.starter-grid { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.starter-card { width: 150px; cursor: pointer; background: linear-gradient(180deg,#172230,#0e1622); border: 1px solid #28384c; border-radius: 14px; padding: 14px 10px; box-shadow: 0 10px 24px rgba(0,0,0,.4); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.starter-card:hover { transform: translateY(-6px); border-color: #ffce54; box-shadow: 0 16px 32px rgba(0,0,0,.5); }
.starter-card img { display: block; margin: 0 auto; image-rendering: pixelated; }
.starter-card .sc-name { display: block; margin-top: 6px; font-weight: 700; }
.starter-card .sc-type { display: flex; gap: 4px; justify-content: center; align-items: center; margin-top: 5px; }
#starter-overlay .type-icon { display: inline-block; color: #fff; font-size: 10px; line-height: 1; font-weight: 700; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 1px #333; letter-spacing: .3px; border: 1px solid rgba(0,0,0,.35); border-radius: 3px; padding: 3px 7px; }
#starter-overlay .type-normal { background: linear-gradient(#a8a878,#8a8a59); border-color: #79794e; }
#starter-overlay .type-fire { background: linear-gradient(#f08030,#dd6610); border-color: #b4530d; }
#starter-overlay .type-water { background: linear-gradient(#6890f0,#386ceb); border-color: #1753e3; }
#starter-overlay .type-electric { background: linear-gradient(#f8d030,#f0c108); border-color: #c19b07; }
#starter-overlay .type-grass { background: linear-gradient(#78c850,#5ca935); border-color: #4a892b; }
#starter-overlay .type-ice { background: linear-gradient(#98d8d8,#69c6c6); border-color: #45b6b6; }
#starter-overlay .type-fighting { background: linear-gradient(#c03028,#9d2721); border-color: #82211b; }
#starter-overlay .type-poison { background: linear-gradient(#a040a0,#803380); border-color: #662966; }
#starter-overlay .type-ground { background: linear-gradient(#e0c068,#d4a82f); border-color: #aa8623; }
#starter-overlay .type-flying { background: linear-gradient(#a890f0,#9180c4); border-color: #7762b6; }
#starter-overlay .type-psychic { background: linear-gradient(#f85888,#f61c5d); border-color: #d60945; }
#starter-overlay .type-bug { background: linear-gradient(#a8b820,#8d9a1b); border-color: #616b13; }
#starter-overlay .type-rock { background: linear-gradient(#b8a038,#93802d); border-color: #746523; }
#starter-overlay .type-ghost { background: linear-gradient(#705898,#554374); border-color: #413359; }
#starter-overlay .type-dragon { background: linear-gradient(#7038f8,#4c08ef); border-color: #3d07c0; }
#starter-overlay .type-steel { background: linear-gradient(#b8b8d0,#9797ba); border-color: #7a7aa7; }
#starter-overlay .type-dark { background: linear-gradient(#705848,#513f34); border-color: #362a23; }
#starter-overlay .type-fairy { background: linear-gradient(#e898e8,#de6ede); border-color: #d547d5; }
@media (max-width: 600px) { .char-grid { flex-direction: column; gap: 12px; } .char-form { display: contents; } .char-avatars { width: 100%; order: 1; } #ch-confirm, #ch-cancel { order: 2; } }
.cs-coin { position: relative; display: inline-block; width: 15px; height: 15px; border-radius: 50%; vertical-align: middle; }
.cs-coin.gold { background: radial-gradient(circle at 38% 30%, #fff7c8, #ffd24a 42%, #eaa31a 72%, #b9760a 100%); box-shadow: inset 0 -2px 3px rgba(120,70,0,.55), inset 0 2px 3px rgba(255,250,210,.7), 0 1px 2px rgba(0,0,0,.35); }
.cs-coin.silver { background: radial-gradient(circle at 38% 30%, #fff, #dde4ec 42%, #aab6c4 72%, #76828f 100%); box-shadow: inset 0 -2px 3px rgba(70,80,95,.5), inset 0 2px 3px rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.35); }
.cs-coin-lg { width: 42px; height: 42px; }
.cs-coin-lg.gold { box-shadow: inset 0 -5px 9px rgba(120,70,0,.5), inset 0 5px 9px rgba(255,250,210,.7), 0 6px 16px rgba(0,0,0,.4); }
.cs-coin-lg.silver { box-shadow: inset 0 -5px 9px rgba(70,80,95,.5), inset 0 5px 9px rgba(255,255,255,.85), 0 6px 16px rgba(0,0,0,.4); }
.cs-coin-lg::before { content: ''; position: absolute; inset: 15%; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); box-shadow: inset 0 2px 5px rgba(0,0,0,.18); }
.cs-coin-lg::after { content: ''; position: absolute; left: 21%; top: 15%; width: 28%; height: 20%; border-radius: 50%; background: rgba(255,255,255,.6); filter: blur(2.5px); }
.cs-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,.35); border: 1px solid #2a3a52; border-radius: 999px; padding: 5px 13px; font-weight: 800; color: #eaf2ff; font-size: 14px; margin: 0 4px; }
.cs-pill.cs-free { color: #7fe0a0; }
.cs-x { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border-radius: 8px; border: 0; background: rgba(255,255,255,.08); color: #cdd8ea; font-size: 20px; cursor: pointer; }
.cs-x:hover { background: rgba(255,255,255,.16); }
.cs-openbtn { margin-top: 16px; border: 0; border-radius: 10px; padding: 12px 30px; font-size: 16px; font-weight: 800; color: #1a1206; cursor: pointer; background: linear-gradient(180deg,#ffd86b,#e8a72b); box-shadow: 0 6px 18px rgba(232,167,43,.35); transition: filter .12s, transform .05s; }
.cs-openbtn:hover { filter: brightness(1.07); } .cs-openbtn:active { transform: translateY(1px); } .cs-openbtn:disabled { opacity: .6; cursor: default; }
.cs-confirm { position: relative; width: 380px; max-width: 92vw; background: linear-gradient(180deg,#172230,#0e1622); border: 1px solid #28384c; border-radius: 18px; padding: 30px 26px 26px; text-align: center; box-shadow: 0 24px 64px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); overflow: hidden; }
.cs-confirm::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, #ffce54, transparent); }
.cs-confirm-boxwrap { position: relative; display: flex; align-items: center; justify-content: center; height: 168px; margin-bottom: 4px; }
.cs-confirm-boxwrap::before { content: ''; position: absolute; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(255,206,84,.16), rgba(255,206,84,0) 62%); }
.cs-confirm-box { position: relative; width: 158px; max-height: 158px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 10px 16px rgba(0,0,0,.55)); animation: cs-floaty 3.6s ease-in-out infinite; }
.cs-confirm-name { font-size: 22px; font-weight: 800; color: #fff; margin: 2px 0 14px; letter-spacing: .3px; }
.cs-confirm-cost { margin-bottom: 12px; }
.cs-confirm-cost .cs-pill { font-size: 16px; padding: 7px 18px; }
.cs-confirm-have { font-size: 13px; color: #8da3bf; }
.cs-confirm-have b { color: #eaf2ff; }
.cs-cd { margin-top: 14px; font-size: 14px; color: #ffcf66; }
@keyframes cs-floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
/* caixa caindo + kika */
.cs-fall { position: relative; cursor: default; text-align: center; animation: cs-drop 1.15s cubic-bezier(.2,.7,.3,1) both; }
.cs-fall img { width: 220px; max-height: 220px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 14px 20px rgba(0,0,0,.55)); }
.cs-fall-hint { margin-top: 10px; font-size: 14px; font-weight: 700; color: #ffd86b; opacity: 0; }
.cs-fall.cs-ready { cursor: pointer; animation: cs-bob 1.8s ease-in-out infinite; }
.cs-fall.cs-ready .cs-fall-hint { opacity: 1; animation: cs-blink 1.2s ease-in-out infinite; }
.cs-fall.cs-ready:hover img { transform: scale(1.05); }
/* brilho giratório (newbrilho.png) — igual ao jogo antigo */
.cs-shine { position: absolute; left: 50%; top: 50%; width: 250px; height: 250px; margin: -125px 0 0 -125px; background: url("/rpg-images/newbrilho.png?v=1205") center/contain no-repeat; mix-blend-mode: screen; opacity: 0; z-index: 0; pointer-events: none; animation: cs-spin 5s linear infinite; transition: opacity .45s; }
.cs-fall .cs-shine { margin-top: -140px; z-index: -1; }
.cs-fall.cs-ready .cs-shine { opacity: .8; }
@keyframes cs-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.cs-fall.cs-gone { animation: cs-fly .62s ease-in forwards; pointer-events: none; }
@keyframes cs-drop { 0% { transform: translateY(-115vh) scale(.5); } 58% { transform: translateY(0) scale(1); } 70% { transform: translateY(-34px) scale(1.02); } 82% { transform: translateY(0) scale(1); } 90% { transform: translateY(-12px); } 100% { transform: translateY(0); } }
@keyframes cs-bob { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-10px) rotate(1.5deg); } }
@keyframes cs-blink { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes cs-fly { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3.2); opacity: 0; } }
/* roleta */
.cs-roul { position: relative; width: 96vw; max-width: 980px; height: 150px; overflow: hidden; background: rgba(0,0,0,.35); border-top: 2px solid #2c3a45; border-bottom: 2px solid #2c3a45; }
.cs-roul-sel { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); background: #ffd86b; z-index: 3; box-shadow: 0 0 16px 2px rgba(255,216,107,.8); }
.cs-roul-sel::before, .cs-roul-sel::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); border: 8px solid transparent; }
.cs-roul-sel::before { top: -1px; border-top-color: #ffd86b; } .cs-roul-sel::after { bottom: -1px; border-bottom-color: #ffd86b; }
.cs-roul-strip { display: flex; height: 100%; align-items: center; will-change: transform; }
.cs-card { flex: 0 0 84px; width: 84px; height: 116px; margin: 0 6px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: #1b2430; border-bottom: 4px solid rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.cs-card.comum { background: linear-gradient(180deg,#3a3f47,#2a2e34); } .cs-card.incomum { background: linear-gradient(180deg,#2f5a44,#214232); }
.cs-card.raro { background: linear-gradient(180deg,#1f5a73,#143f52); } .cs-card.superraro { background: linear-gradient(180deg,#2a3a8a,#1c2864); }
.cs-card.epico { background: linear-gradient(180deg,#6b1f8a,#481260); } .cs-card.lendario { background: linear-gradient(180deg,#8a3a14,#5f2710); }
.cs-card-ic { height: 46px; display: flex; align-items: center; justify-content: center; }
.cs-slot-ic { max-width: 42px; max-height: 42px; image-rendering: pixelated; }
.cs-slot-iic { display: inline-block; width: 24px; height: 24px; }
.cs-card-lb { font-size: 10px; line-height: 1.15; text-align: center; color: #eaf2ff; padding: 0 4px; max-height: 26px; overflow: hidden; }
/* revelação do prêmio — sem glow, brilho giratório no fundo */
.cs-reveal { position: relative; width: 360px; max-width: 92vw; text-align: center; }
.cs-reveal-t { font-size: 15px; font-weight: 800; color: #9fb2cc; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 16px; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.cs-reveal-cardwrap { position: relative; display: flex; justify-content: center; align-items: center; min-height: 250px; }
.cs-shine-rev { width: 360px; height: 360px; margin: -180px 0 0 -180px; opacity: .55; z-index: 0; }
.cs-reveal-card { position: relative; z-index: 1; width: 232px; overflow: hidden; background: linear-gradient(180deg,#1a2636,#0a1018); border: 1.5px solid var(--rar,#bfbfbf); border-radius: 18px; box-shadow: 0 18px 46px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); animation: cs-pop .4s cubic-bezier(.2,1.3,.4,1) both; }
.cs-reveal-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 150px; background: linear-gradient(180deg, var(--rar,#bfbfbf), transparent); opacity: .26; pointer-events: none; }
.cs-reveal-card::after { content: ''; position: absolute; top: -20%; left: -70%; width: 45%; height: 140%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent); transform: skewX(-16deg); animation: cs-sheen 3.4s ease-in-out infinite; pointer-events: none; }
@keyframes cs-sheen { 0% { left: -70%; } 55%, 100% { left: 145%; } }
.cs-reveal-ic { position: relative; z-index: 1; height: 120px; display: flex; align-items: center; justify-content: center; margin: 18px 0 4px; }
.cs-reveal-ic::before { content: ''; position: absolute; width: 138px; height: 138px; border-radius: 50%; background: radial-gradient(circle, var(--rar,#bfbfbf), transparent 60%); opacity: .22; pointer-events: none; }
.cs-reveal-ic > * { position: relative; }
.cs-reveal-mon { max-width: 120px; max-height: 106px; image-rendering: pixelated; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.cs-reveal-ic .cs-slot-ic { max-width: 86px; max-height: 86px; } .cs-reveal-ic .cs-coin-lg { width: 78px; height: 78px; } .cs-reveal-ic .cs-slot-iic { transform: scale(2.9); }
.cs-reveal-nm { position: relative; z-index: 1; font-size: 20px; font-weight: 800; color: #fff; text-transform: capitalize; line-height: 1.2; padding: 0 14px; margin-bottom: 16px; text-shadow: 0 2px 6px rgba(0,0,0,.4); }
.cs-reveal-rar { display: block; padding: 9px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 2.5px; color: #0d1117; background: var(--rar,#bfbfbf); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
@keyframes cs-pop { 0% { transform: scale(.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.pc-body .ps-tab:hover { border-color: #3a4a64; color: #cdd8ea; }
.pc-body .ps-tab.on { background: linear-gradient(90deg,#2563a8,#2FB2EF); color: #fff; border-color: transparent; box-shadow: 0 3px 12px rgba(47,178,239,.28); }
/* Estado "Em breve" (aba Decorações). */
.pc-body .ps-soon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 38px 20px; min-height: 180px; }
.pc-body .ps-soon-ic { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; background: radial-gradient(circle at 50% 35%, rgba(47,178,239,.18), rgba(47,178,239,.04)); border: 1px solid rgba(47,178,239,.4); }
.pc-body .ps-soon-t { font-size: 18px; font-weight: 800; color: #eaf2ff; letter-spacing: .3px; }
.pc-body .ps-soon-d { font-size: 13px; color: #9fb2c8; max-width: 320px; line-height: 1.5; }
/* Saldo da Loja da Propriedade: pílulas de moeda iguais às do PokéMarket. */
.pc-bal .shop-wallet { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.pc-mask .shop-coin { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; padding: 6px 12px; border-radius: 20px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); white-space: nowrap; }
.pc-mask .shop-coin .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.pc-mask .shop-coin.silver { color: #e3eaf4; } .pc-mask .shop-coin.silver .dot { background: linear-gradient(160deg,#eef3f9,#aebccd); }
.pc-mask .shop-coin.gold { color: #ffce54; } .pc-mask .shop-coin.gold .dot { background: linear-gradient(160deg,#ffe08a,#e0a72a); }
.pc-mask .shop-coin.rank { color: #cdd8ea; }
/* Pílula de preço NOS CARDS (menor que a do rodapé). */
.pc-card .shop-coin, .ps-card .shop-coin { padding: 2px 9px; font-size: 11.5px; margin-top: 1px; }
.pc-card .shop-coin .dot, .ps-card .shop-coin .dot { width: 10px; height: 10px; }
.pc-free { font-size: 12px; font-weight: 800; color: #7fd6a0; }
.pc-card { display: flex; align-items: center; gap: 12px; text-align: left; padding: 9px 12px; border: 1px solid #232c3e; border-radius: 12px; background: rgba(255,255,255,.02); color: #cdd8ea; cursor: pointer; transition: border-color .12s, background .12s; }
.pc-card:hover:not(.off) { border-color: #6ee59a; background: rgba(110,229,154,.08); }
.pc-card.off { opacity: .45; cursor: not-allowed; }
.pc-body .pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
.pc-grid .pc-card { flex-direction: column; text-align: center; align-items: center; gap: 3px; padding: 9px 6px 9px; }
.pc-grid .pc-ic { flex: 0 0 46px; width: 46px; height: 46px; }
.pc-grid .pc-nm { font-size: 12.5px; }
.pc-grid .pc-info { align-items: center; gap: 3px; }
.pc-grid .pc-nm, .pc-grid .pc-sub, .pc-grid .pc-cost { text-align: center; }
.pc-grid .pc-sub { font-size: 10.5px; }
.pc-ic { flex: 0 0 56px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: #0b1422; border: 1px solid #1d293b; border-radius: 10px; overflow: hidden; }
.pc-ic img { max-width: 52px; max-height: 52px; image-rendering: pixelated; }
.pc-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-nm { font-weight: 800; color: #eaf2ff; font-size: 14px; }
.pc-sub { font-size: 11px; color: #9fb2c8; }
.pc-cost { font-size: 13px; font-weight: 800; color: #ffce54; }
.pc-bal { padding: 10px 14px; border-top: 1px solid #20283a; font-size: 12px; color: #9fb2c8; text-align: center; }
.crop-thumb { display: inline-block; width: 26px; height: 52px; background-size: 400% 400%; background-position: 0% 100%; background-repeat: no-repeat; image-rendering: pixelated; }
.pc-card.sh-card { cursor: default; }
.sh-buy { flex: 0 0 auto; margin-left: auto; align-self: center; border: 0; border-radius: 9px; padding: 7px 14px; font-weight: 800; font-size: 13px; cursor: pointer; color: #fff; background: #2f8f4f; }
.sh-buy:hover:not(:disabled) { background: #36a85c; }
.sh-buy:disabled { opacity: .5; cursor: default; }
.wh-sec { margin-bottom: 10px; }
.wh-h { font-weight: 800; color: #eaf2ff; font-size: 13px; margin: 4px 2px 6px; }
.wh-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid #232c3e; border-radius: 10px; background: rgba(255,255,255,.02); margin-bottom: 5px; }
.wh-nm { flex: 1; color: #cdd8ea; font-size: 13px; }
.wh-q { font-weight: 800; color: #ffce54; }
.pc-body .ps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; }
.ps-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 9px 6px 8px; border: 1px solid #232c3e; border-radius: 11px; background: rgba(255,255,255,.02); }
.ps-card.off { opacity: .55; }
.ps-card.ps-plant { cursor: pointer; transition: border-color .12s, background .12s; }
.ps-card.ps-plant:hover { border-color: #6ee59a; background: rgba(110,229,154,.08); }
.ps-thumb { width: 36px; height: 50px; display: flex; align-items: flex-end; justify-content: center; }
.ps-thumb .crop-thumb { width: 23px; height: 46px; }
/* Loja (Berrys/Apricorns): mesma "caixa" de fundo das construções atrás da plantinha. */
#ps-grid .ps-thumb { width: 50px; height: 50px; background: #0b1422; border: 1px solid #1d293b; border-radius: 10px; overflow: hidden; margin-bottom: 1px; }
.ps-nm { font-weight: 800; color: #eaf2ff; font-size: 11.5px; line-height: 1.15; }
.ps-meta { font-size: 9.5px; color: #9fb2c8; line-height: 1.2; }
.ps-price { font-size: 12px; font-weight: 800; color: #ffce54; margin: 1px 0; }
.ps-lock { font-size: 12px; color: #ff9a9a; font-weight: 700; margin-top: 2px; }
.ps-qrow { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.ps-step { width: 22px; height: 22px; border: 1px solid #2a3346; background: #1a2233; color: #cdd8ea; border-radius: 6px; font-size: 14px; font-weight: 800; cursor: pointer; line-height: 1; padding: 0; }
.ps-step:hover { background: #243047; }
.ps-qn { min-width: 22px; font-weight: 800; color: #fff; }
.ps-qin { width: 46px; min-width: 0; background: none; border: 0; color: #fff; text-align: center; font-weight: 800; font-size: 13px; padding: 2px 0; -moz-appearance: textfield; }
.ps-qin::-webkit-outer-spin-button, .ps-qin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ps-qin:focus { outline: 1px solid #3a7bd5; border-radius: 4px; }
.ps-buy { width: 100%; margin-top: 5px; border: 0; border-radius: 8px; padding: 6px 8px; font-weight: 800; font-size: 12px; cursor: pointer; color: #fff; background: #2f8f4f; }
.ps-buy:hover:not(:disabled) { background: #36a85c; }
.ps-buy:disabled { opacity: .5; cursor: default; }
.wh-card .wh-q { font-size: 14px; font-weight: 800; color: #ffce54; margin-top: 2px; }
.wh-act { cursor: pointer; }
.wh-act:hover { border-color: #6ee59a; background: rgba(110,229,154,.08); }
.show-owthumb { display: inline-block; width: 60px; height: 60px; background-size: 400% 400%; background-position: 0% 0%; background-repeat: no-repeat; image-rendering: pixelated; }
.show-owbig { width: 88px; height: 88px; }
.show-pkrow { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; overflow-x: auto; padding: 6px 4px 4px; }
.show-pk { flex: 0 0 auto; width: 124px; background: rgba(255,255,255,.03); border: 2px solid #2a3346; border-radius: 12px; padding: 10px 6px 9px; cursor: pointer; color: #cdd8ea; text-align: center; transition: border-color .12s, background .12s; }
.show-pk:hover { border-color: #6ee59a; }
.show-pk.sel { border-color: #4db3ff; background: rgba(77,179,255,.12); }
.show-pk.off { opacity: .42; cursor: not-allowed; filter: grayscale(.6); }
.ev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ev-pick { border: 2px solid #2a3346; border-radius: 11px; background: rgba(255,255,255,.03); padding: 12px 6px; cursor: pointer; color: #cdd8ea; text-align: center; transition: border-color .12s; }
.ev-pick:hover:not(.off) { border-color: #6ee59a; }
.ev-pick.off { opacity: .4; cursor: not-allowed; }
.ev-nm { font-weight: 800; color: #eaf2ff; font-size: 15px; }
.ev-v { font-size: 11px; color: #9fb2c8; margin-top: 2px; }
.dojo-pb { width: 240px; max-width: 82%; height: 13px; background: #0d1726; border: 1px solid #243049; border-radius: 99px; overflow: hidden; margin: 4px auto 0; }
.dojo-pb-fill { height: 100%; width: 0; background: linear-gradient(90deg, #4db3ff, #6ee59a); border-radius: 99px; }
.dojo-pb-lbl { color: #9fb2c8; font-size: 11px; margin-top: 5px; text-align: center; }
.show-pk .show-owthumb { margin: 0 auto 4px; display: block; }
/* Show Item (vitrine de item) */
/* Ícone da folha (itemicons-sheet) é célula de 24x24 SEM background-size: o box precisa ser 24x24
(senão vazam células vizinhas). Ampliamos com transform:scale — o clip de 1 célula é preservado.
PNGs custom (contain) escalam junto sem problema. */
.si-ico { display: block; width: 24px; height: 24px; margin: 16px auto 22px; background-repeat: no-repeat; background-position: center; image-rendering: pixelated; transform: scale(2.2); transform-origin: center; }
.si-ico-big { transform: scale(3); margin: 34px auto 42px; }
.si-cb { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .04em; color: #ffcf6b; background: rgba(255,150,40,.16); border: 1px solid rgba(255,180,60,.42); border-radius: 4px; padding: 0 3px; vertical-align: middle; }
/* Máquina de Fusão — preview */
.fus-fb { text-align: center; margin: 10px 0 0; min-height: 8px; }
.fus-none { color: #ff9a9a; font-size: 13px; margin: 8px 0; }
.fus-preview { background: rgba(160,75,208,.08); border: 1px solid rgba(160,75,208,.34); border-radius: 12px; padding: 12px; margin: 8px auto 0; max-width: 380px; }
.fus-res { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 10px; }
.fus-resnm { font-weight: 800; color: #eaf2ff; font-size: 15px; }
.fus-lv { color: #9fb2cc; font-size: 12px; font-weight: 600; }
.fus-stats { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.fus-stats > div { text-align: center; }
.fus-lbl { display: block; font-size: 10.5px; color: #8aa0bd; letter-spacing: .02em; text-transform: uppercase; margin-bottom: 2px; }
.fus-chance { color: #9bf6b0; }
.fus-items { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.fus-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #cdd8ea; }
.fus-ico { width: 24px !important; height: 24px !important; margin: 0 !important; transform: scale(1.25) !important; }
.ps-rlist { display: flex; flex-direction: column; gap: 8px; }
.ps-rrow { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid #232c3e; border-radius: 11px; background: rgba(255,255,255,.02); }
.ps-ric { width: 30px; height: 30px; flex: 0 0 30px; image-rendering: pixelated; display: inline-block; }
.ps-rnm { flex: 1; color: #eaf2ff; font-weight: 700; font-size: 14px; }
.ps-rq { font-weight: 800; color: #ffce54; font-size: 15px; }
.cm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 12px; }
.cm-card { display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid #232c3e; border-radius: 14px; background: rgba(255,255,255,.02); padding: 14px 10px 12px; gap: 4px; }
.cm-card.off { opacity: .5; }
.cm-top { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: #0b1422; border: 1px solid #1d293b; border-radius: 12px; margin-bottom: 3px; }
.cm-oic { width: 24px; height: 24px; display: inline-block; image-rendering: pixelated; transform: scale(1.75); }
.cm-nm { font-weight: 800; color: #eaf2ff; font-size: 14px; line-height: 1.15; }
.cm-rank { font-size: 11px; color: #ff9a9a; font-weight: 700; }
.cm-ings { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 5px 0 2px; }
.cm-ing { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; color: #9fb2c8; }
.cm-iic { width: 20px; height: 20px; flex: 0 0 20px; display: inline-block; image-rendering: pixelated; }
.cm-cost { font-size: 12px; color: #ffce54; font-weight: 700; }
.cm-qrow { display: flex; align-items: center; gap: 5px; margin-top: 7px; }
.cm-make { width: 100%; margin-top: 7px; }
.cm-tot { font-size: 11px; color: #9fb2c8; margin-top: 5px; }
.wh-ic { align-items: center !important; }
.wh-itemic { display: inline-block; width: 24px; height: 24px; image-rendering: pixelated; transform: scale(1.45); transform-origin: center; }
.pc-body .wh-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 7px; }
.wh-grid .ps-card { padding: 8px 4px 7px; gap: 1px; }
.wh-grid .ps-thumb { width: 32px; height: 44px; }
.wh-grid .ps-thumb .crop-thumb { width: 21px; height: 42px; }
.wh-grid .wh-itemic { transform: scale(1.05); }
.wh-grid .ps-nm { font-size: 11px; }
.wh-grid .wh-card .wh-q { font-size: 12px; margin-top: 1px; }
.pc-body .wh-h { font-weight: 800; color: #eaf2ff; font-size: 13px; margin: 4px 2px 8px; }
#safari .sf-place-bar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(7,11,18,.92); border: 1px solid #2a3346; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.5); color: #eaf2ff; font-size: 13px; }
#safari .sf-place-txt { font-weight: 700; padding: 0 4px; }
#safari .sf-place-btn { border: 0; border-radius: 9px; padding: 7px 12px; font-weight: 800; font-size: 13px; cursor: pointer; color: #fff; }
#safari .sf-place-btn.ok { background: #2f8f4f; } #safari .sf-place-btn.ok:hover { background: #36a85c; }
#safari .sf-place-btn.no { background: #44506a; } #safari .sf-place-btn.no:hover { background: #55617c; }
.bm-mask { position: fixed; inset: 0; z-index: 9800; background: rgba(3,5,9,.82); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.bm-modal { width: min(820px, 96vw); max-height: 88vh; background: linear-gradient(180deg, #141a26 0%, #0e121b 100%); border: 1px solid #2b3346; border-radius: 16px; display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.03); overflow: hidden; }
.bm-head { padding: 16px 18px; font-weight: 800; font-size: 18px; color: #f1f5fc; background: linear-gradient(90deg, #1a2233, #161b27); display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #232c3e; letter-spacing: .2px; }
.bm-x { margin-left: auto; background: rgba(255,255,255,.06); border: 0; color: #cdd8ea; width: 32px; height: 32px; border-radius: 9px; font-size: 20px; cursor: pointer; line-height: 1; transition: background .12s, color .12s; }
.bm-x:hover { background: rgba(255,90,90,.25); color: #fff; }
.bm-tabs { display: flex; gap: 2px; padding: 0 14px; background: #141a26; border-bottom: 1px solid #232c3e; }
.bm-tab { flex: 1; padding: 12px 6px; background: transparent; color: #8a9bb5; border: 0; border-bottom: 2px solid transparent; font-weight: 700; font-size: 14px; cursor: pointer; transition: color .12s, border-color .12s; }
.bm-tab:hover { color: #cdd8ea; }
.bm-tab.on { color: #ffd86b; border-bottom-color: #ffd86b; }
.bm-body { padding: 16px 18px; overflow-y: auto; }
/* Filtro de vendas (Pokémon/Itens/Gold) — mesmo visual das tabs do PokéMarket (Button.png) */
.bm-filter { display: flex; gap: 5px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
/* Busca AO LADO dos filtros (Pokémon/Itens/Gold), ocupando o resto da linha. */
.bm-filter .bm-search { flex: 1 1 160px; width: auto; min-width: 140px; height: 42px; margin: 0; }
/* Paginador do Mercado (mesmo visual do PokéMarket). */
.bm-pager { display: flex; gap: 6px; justify-content: center; align-items: center; margin: 14px 0 2px; flex-wrap: wrap; }
.bm-pg { min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid #2a3346; background: #0e1726; color: #cdd8ea; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 700; font-family: inherit; transition: border-color .12s, color .12s, background .12s; }
.bm-pg:hover:not(:disabled):not(.active) { border-color: #4db3ff; color: #fff; }
.bm-pg.active { background: #2f8f4f; border-color: #2f8f4f; color: #fff; cursor: default; }
.bm-pg:disabled { opacity: .38; cursor: default; }
.bm-pg-ell { color: #6f86a6; padding: 0 3px; }
.bm-f { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; height: 42px; padding: 0 16px; background: url('/old/images/shop/Button.png?v=1205') center bottom/100% 200% no-repeat; border: 0; color: #eaf1ff; cursor: pointer; font-weight: 800; font-size: 12px; text-shadow: 0 1px 2px rgba(0,0,0,.7); transition: filter .15s, transform .1s; }
.bm-f:hover { filter: brightness(1.06); }
.bm-f:active { transform: scale(.96); }
.bm-f.on { background-position: center top; }
.bm-list { display: flex; flex-direction: column; gap: 10px; }
.bm-hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; align-items: start; }
@media (max-width:560px) { .bm-hgrid { grid-template-columns: 1fr; } }
.bm-card { display: flex; align-items: center; gap: 12px; background: linear-gradient(180deg, #1a2230, #161c28); border: 1px solid #283242; border-radius: 12px; padding: 11px 13px; transition: border-color .12s, transform .08s; }
.bm-card:hover { border-color: #3a4a64; transform: translateY(-1px); }
.bm-card.auc { border-left: 3px solid #c0a3ff; } .bm-card.fix { border-left: 3px solid #2FB2EF; }
.bm-thumb { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 10px; background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.07), rgba(0,0,0,.25)); border: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bm-thumb .picon { display: inline-block; width: 40px; height: 30px; }
.bm-thumb .bm-iicon { display: inline-block; width: 24px; height: 24px; image-rendering: pixelated; }
.bm-thumb.bm-gold { font-size: 26px; }
.bm-searchrow { padding: 2px 2px 10px; }
.bm-search { width: 100%; box-sizing: border-box; background: #0c1320; border: 1px solid #27374e; color: #cdd8ea; border-radius: 8px; padding: 8px 12px; font-size: 13px; }
.bm-search:focus { outline: none; border-color: #4a6fa0; }
.bm-thumb.bm-gold .cs-coin-lg { width: 40px; height: 40px; }
.bm-cinfo { flex: 1; min-width: 0; }
.bm-ct { color: #f1f5fc; font-weight: 700; font-size: 14px; }
.bm-tag { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 6px; text-transform: uppercase; letter-spacing: .4px; }
.bm-tag.a { background: #3a2a5c; color: #d9c2ff; } .bm-tag.f { background: #163a52; color: #9fd8ff; }
.bm-sub { font-size: 11px; color: #8a9bb5; font-weight: 600; }
.bm-cm { color: #9fb0c8; font-size: 12.5px; margin-top: 4px; }
.bm-price { color: #ffd86b; }
.bm-ca { flex: 0 0 auto; }
.bm-buy, .bm-bid, .bm-go, .bm-cancel { border: 0; border-radius: 9px; padding: 8px 16px; font-weight: 800; cursor: pointer; font-size: 13px; transition: filter .12s; }
.bm-buy:hover, .bm-bid:hover, .bm-go:hover, .bm-cancel:hover { filter: brightness(1.1); }
.bm-buy { background: linear-gradient(90deg, #279a44, #34c95c); color: #fff; }
.bm-bid { background: linear-gradient(90deg, #9b6cff, #c0a3ff); color: #261540; }
.bm-cancel { background: #6a2f33; color: #ffd9d9; }
.bm-bidrow { display: inline-flex; gap: 6px; }
.bm-bidamt { width: 96px; padding: 7px 9px; border-radius: 9px; border: 1px solid #2a3346; background: #0b0f17; color: #eaf2ff; }
.bm-mineflag { font-size: 12px; color: #6f86a6; font-style: italic; padding: 0 6px; }
.bm-empty { color: #7a8aa3; text-align: center; padding: 44px 20px; font-size: 14px; }
.bm-empty:before { content: '📭'; display: block; font-size: 34px; margin-bottom: 8px; opacity: .85; }
.bm-sell { display: flex; flex-direction: column; gap: 11px; max-width: 480px; margin: 0 auto; }
.bm-srow { display: flex; align-items: center; gap: 12px; }
.bm-srow label { width: 150px; flex: 0 0 150px; color: #9fb0c8; font-size: 13px; font-weight: 700; }
.bm-srow select, .bm-srow input { flex: 1; padding: 10px 12px; border-radius: 10px; border: 1px solid #2a3346; background: #0b0f17; color: #eaf2ff; font-size: 14px; outline: none; transition: border-color .12s, box-shadow .12s; }
.bm-srow select:focus, .bm-srow input:focus, .bm-bidamt:focus { border-color: #2FB2EF; box-shadow: 0 0 0 2px rgba(47,178,239,.18); }
.bm-preview { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(255,255,255,.03); border: 1px solid #232c3e; border-radius: 10px; color: #cdd8ea; font-size: 13px; }
.bm-preview .bm-thumb { flex: 0 0 44px; width: 44px; height: 44px; }
.bm-preview:empty { display: none; }
.bm-prev-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bm-prev-name { font-weight: 800; color: #eaf2ff; font-size: 14px; }
.bm-prev-lv { color: #9fb2c8; font-weight: 600; font-size: 12px; }
.bm-prev-shiny { color: #ffce54; }
.bm-prev-rg { color: #7f93ad; font-size: 11px; letter-spacing: .3px; }
.bm-g.m { color: #7fb3ff; } .bm-g.f { color: #ff8fc0; }
.bm-prev-item { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12px; color: #cdd8ea; }
.bm-prev-item .bm-iicon { width: 24px; height: 24px; display: inline-block; image-rendering: pixelated; }
.bm-itemnote { font-size: 10px; padding: 1px 6px; border-radius: 999px; font-weight: 700; }
.bm-itemnote.tr { background: rgba(110,229,154,.16); color: #6ee59a; }
.bm-itemnote.cb { background: rgba(255,206,84,.16); color: #ffce54; }
.bm-held { display: inline-block; vertical-align: middle; }
.bm-held .bm-iicon { width: 20px; height: 20px; display: inline-block; image-rendering: pixelated; vertical-align: middle; }
.bm-priv { display: inline-block; font-size: 10px; font-weight: 800; color: #ffce54; background: rgba(255,206,84,.14); border: 1px solid rgba(255,206,84,.4); padding: 1px 7px; border-radius: 999px; vertical-align: middle; }
.bm-pkrow { flex-direction: column; align-items: stretch; }
.bm-pkpick { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; padding: 4px; margin-top: 6px; background: rgba(0,0,0,.18); border: 1px solid #232c3e; border-radius: 10px; }
.bm-pkopt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 10px; border: 1px solid transparent; border-radius: 9px; background: rgba(255,255,255,.02); color: #cdd8ea; cursor: pointer; transition: background .12s, border-color .12s; }
.bm-pkopt:hover { background: rgba(47,178,239,.10); }
.bm-pkopt.sel { background: linear-gradient(180deg, rgba(47,178,239,.22), rgba(47,178,239,.10)); border-color: #2FB2EF; box-shadow: 0 0 0 2px rgba(47,178,239,.18); }
.bm-pkopt .bm-thumb { flex: 0 0 38px; width: 38px; height: 38px; }
.bm-pkopt-t { flex: 1; font-weight: 700; font-size: 13px; }
.bm-pkopt-lv { color: #9fb2c8; font-weight: 600; }
.bm-pkopt-rg { color: #7f93ad; font-size: 11px; letter-spacing: .3px; }
.bm-prev-click { cursor: pointer; position: relative; }
.bm-prev-click:hover { border-color: #2FB2EF; }
.bm-cleft { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; border-radius: 8px; padding: 2px; }
.bm-clickprof { cursor: pointer; transition: background .12s; }
.bm-clickprof:hover { background: rgba(47,178,239,.10); }
.bm-prev-go { margin-left: auto; color: #8fd0ff; font-size: 14px; opacity: .8; }
.bm-judgebtn { border: 1px solid #5a4a86; background: rgba(90,74,134,.4); color: #c8b7f0; border-radius: 8px; padding: 6px 9px; cursor: pointer; margin-left: 6px; }
.bm-judgebtn:hover { background: #5a4a86; color: #fff; }
.bm-pkrow { flex-direction: column; align-items: stretch; }
.bm-pkcar { width: 100%; margin: 8px 0 2px; position: relative; }
.bm-pkrow > label { flex: 0 0 auto; width: auto; margin-bottom: 2px; }
.bm-pkcar .slick-list { overflow: hidden; }
.bm-pkslide { box-sizing: border-box; padding: 6px; outline: none; }
.bm-pkcard { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 8px; border: 2px solid #2a3346; border-radius: 12px; background: #0c1320; color: #cdd8ea; transform: scale(.84); opacity: .5; transition: transform .2s ease, opacity .15s ease, border-color .12s ease; cursor: pointer; }
.slick-center .bm-pkcard, .bm-pkslide.slick-current .bm-pkcard { transform: scale(1.03); opacity: 1; border-color: #2FB2EF; box-shadow: 0 8px 24px rgba(0,0,0,.45); background: linear-gradient(180deg, rgba(47,178,239,.16), #0c1320); }
.bm-pkcard .bm-thumb { width: 56px; height: 56px; flex: 0 0 56px; }
.bm-pkcard-nm { font-weight: 800; font-size: 13px; color: #eaf2ff; text-align: center; line-height: 1.15; }
.bm-pkcard-sh { color: #ffce54; }
.bm-pkcard-lv { font-size: 12px; color: #9fb2c8; }
.bm-pkcard-rg { font-size: 10px; color: #7f93ad; letter-spacing: .3px; }
/* Picker em FILEIRA (time ≤3): mostra TODOS, clica pra selecionar (sem carousel) */
.bm-pkcar.bm-pkrow { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 4px; justify-content: center; }
.bm-pkcar.bm-pkrow .bm-pkslide { flex: 0 0 auto; width: 150px; }
.bm-pkcar.bm-pkrow .bm-pkslide.sel .bm-pkcard { transform: scale(1.03); opacity: 1; border-color: #2FB2EF; box-shadow: 0 8px 24px rgba(0,0,0,.45); background: linear-gradient(180deg, rgba(47,178,239,.16), #0c1320); }
.bm-pkcar .slick-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 62px; border: 0; background-color: transparent; background-repeat: no-repeat; background-size: cover; background-position-y: 0; font-size: 0; padding: 0; cursor: pointer; }
.bm-pkcar .slick-prev { background-image: url('/old/layout/images/layout/left-nav.png?v=1205'); left: 1px; }
.bm-pkcar .slick-next { background-image: url('/old/layout/images/layout/right-nav.png?v=1205'); right: 1px; height: 61px; }
.bm-pkcar .slick-prev:hover, .bm-pkcar .slick-next:hover { background-position-y: -62px; }
.bm-bal { color: #8a9bb5; font-size: 13px; padding-top: 8px; border-top: 1px solid #232c3e; }
.bm-net { color: #6ee59a; font-size: 13px; font-weight: 700; min-height: 18px; }
.bm-feenote { color: #c98a91; font-weight: 600; }
.bm-go { background: linear-gradient(90deg, #f3c14b, #ffd86b); color: #2a2410; margin-top: 6px; padding: 12px; font-size: 15px; box-shadow: 0 4px 16px rgba(255,216,107,.25); }
.bm-st-sold { color: #6ee59a; } .bm-st-cancelled { color: #c98a91; } .bm-st-active { color: #ffd86b; }
/* Mobile: input de lance + botão vão pra LINHA DE BAIXO, em largura total.
(Precisa vir DEPOIS das regras-base .bm-ca/.bm-bidamt: media query não soma
especificidade, então no empate vence a regra que aparece por último no arquivo.) */
@media (max-width:560px) {
.bm-card { flex-wrap: wrap; }
.bm-ca { flex: 1 0 100%; width: 100%; margin-top: 10px; display: flex; align-items: center; gap: 6px; }
.bm-ca .bm-bidrow { flex: 1; display: flex; }
.bm-ca .bm-bidamt { flex: 1; width: auto; min-width: 0; }
.bm-ca .bm-buy { flex: 1; }
.bm-ca .bm-buy, .bm-ca .bm-bid { white-space: nowrap; }
.bm-mineflag { margin-left: auto; }
}
.mg-ban { color: #ff6a6a; font-weight: 800; } /* banido */
.trn-card { display: flex; align-items: center; gap: 14px; padding: 14px; background: radial-gradient(circle at 30% 30%, #1a2738, #0d141d); border-bottom: 1px solid #1d2a3a; }
.trn-portrait { height: 120px; image-rendering: auto; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.trn-info { flex: 1; min-width: 0; }
.trn-name { font-size: 19px; font-weight: 800; color: #eaf1ff; }
.trn-region { font-size: 12px; color: #8fa6c0; margin-top: 3px; }
.trn-reward { margin-top: 10px; font-size: 13px; color: #cdd8ea; display: inline-flex; align-items: center; gap: 6px; }
.trn-reward b { color: #ffd86b; font-weight: 800; }
.trn-desc { padding: 11px 14px; font-size: 12px; line-height: 1.5; color: #aebccd; max-height: 130px; overflow-y: auto; border-bottom: 1px solid #1d2a3a; }
.trn-desc b { color: #cfe0f3; }
.trn-team { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px; justify-content: center; }
.trn-mon { position: relative; width: 44px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: #131b25; border: 1px solid #243042; border-radius: 8px; }
.trn-mon img { width: 40px; height: 30px; object-fit: contain; image-rendering: pixelated; }
.trn-mon b { position: absolute; bottom: -2px; right: 1px; font-size: 8.5px; color: #ffe08a; background: rgba(0,0,0,.55); border-radius: 4px; padding: 0 3px; }
.trn-foot { display: flex; gap: 10px; padding: 12px 14px; }
.trn-btn { flex: 1; cursor: pointer; border: 0; border-radius: 10px; padding: 12px; font-size: 14px; font-weight: 800; transition: filter .12s, transform .05s; }
.trn-btn:active { transform: translateY(1px); }
.trn-btn.cancel { background: #2a3647; color: #cdd8ea; }
.trn-btn.cancel:hover { background: #33425a; }
.trn-btn.go { background: linear-gradient(180deg,#e0762f,#c45e1c); color: #fff; }
.trn-btn.go:hover { filter: brightness(1.12); }
/* Tela de confirmação ("procurar encrenca?") */
.trn-ask { padding: 26px 20px 18px; text-align: center; }
.trn-askic { font-size: 34px; color: #e0762f; margin-bottom: 12px; }
.trn-asktitle { font-size: 17px; font-weight: 800; color: #eaf1ff; }
.trn-askdesc { font-size: 13px; color: #9fb3cc; line-height: 1.5; margin-top: 8px; }
.trn-redirect { padding: 16px 14px; text-align: center; font-size: 14px; font-weight: 700; color: #ffe9b0; }
.trn-redirect i { margin-right: 7px; color: #e0762f; }
/* Batalha montada DENTRO do modal: a janela vira só o container (redimensiona p/ a batalha). */
.trn-mask.trn-fighting { padding: 8px; }
/* Batalha DENTRO da janela estilizada: mantém o card escuro + cabeçalho; só cresce a largura. */
.trn-win.trn-battlebox { width: min(700px, 96vw); max-width: 96vw; }
.trn-win.trn-battlebox .trn-battle-mount { max-height: 84vh; overflow-y: auto; }
.trn-win.trn-battlebox #battle-panel { display: block !important; margin: 0 auto !important; max-width: 100% !important; }
.tt-shiny { color: #ffd86b; }
.tt-heart { color: #ff5b6e; } /* não-negociável (coração) */
.tt-body { display: flex; gap: 8px; padding: 8px 10px; }
/* Fundo = carta colorida do tipo (igual à home), sem borda nem texto. */
.tt-spritebox { position: relative; flex: 0 0 84px; align-self: stretch; min-height: 84px; background-repeat: no-repeat; background-position: center center; background-size: cover; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(0,0,0,.40), inset 0 0 0 3px rgba(255,255,255,.16); }
.tt-sprite { max-width: 80px; max-height: 76px; image-rendering: pixelated; }
/* Item segurado no canto inferior esquerdo (igual à home). */
.tt-itemwrap { position: absolute; bottom: 3px; left: 3px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.tt-itemic { display: inline-block; width: 24px; height: 24px; }
/* Badge de tier competitiva — no TOPO do box (item fica embaixo). */
.tt-tier { position: absolute; top: 3px; left: 3px; padding: 1px 6px; font-size: 10px; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.6); z-index: 2; }
/* Botão da Dex no canto superior direito do box do sprite (registra + abre a Pokédex daquele Pokémon). */
/* Ícone da Dex nu (a arte é 12×12 — sem ampliar p/ não borrar), sem fundo, no canto superior direito. */
.tt-dexbtn { position: absolute; top: 6px; right: 6px; z-index: 3; padding: 0; border: 0; border-radius: 7px; cursor: pointer; background: none;
display: flex; align-items: center; justify-content: center; box-shadow: 1px 1px 14px 6px black; }
.tt-dexbtn img { object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.7)); pointer-events: none; transition: transform .1s; }
.tt-dexbtn:hover img { transform: scale(1.25); }
.tt-dexbtn:active img { transform: scale(.9); }
/* Medalhas de torneio: rodapé do sprite, ALINHADAS À DIREITA. 1 chip por tipo (medalha + quantidade). */
.tt-medals { position: absolute; right: 3px; bottom: 3px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; pointer-events: none; }
.tt-medal { display: inline-flex; align-items: center; gap: 1px; height: 16px; padding: 0 4px 0 2px; border-radius: 8px; background: rgba(0,0,0,.58); box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.tt-medal-ic { width: 14px; height: 14px; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.tt-medal-emo { width: auto; height: auto; font-size: 12px; line-height: 1; filter: none; }
.tt-medal-q { font-size: 10px; font-weight: 800; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.6); }
/* Badge de tier reutilizável (Dex + card de perfil). */
.ss-tier { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #fff; line-height: 1.4; letter-spacing: .3px; }
.ss-tier-AG { background: #b3203b; } .ss-tier-UBER { background: #e0533f; } .ss-tier-OU { background: #e08a2a; }
.ss-tier-UU { background: #c9a227; } .ss-tier-RU { background: #3f9e57; } .ss-tier-NU { background: #2f7fb5; }
.ss-tier-PU { background: #5b67c0; } .ss-tier-ZU { background: #6b7280; } .ss-tier-EU { background: #8a4fbf; }
.ss-tier-UUBL { background: #d8b94a; } .ss-tier-RUBL { background: #57b06a; } .ss-tier-NUBL { background: #4a93c9; }
.ss-tier-PUBL { background: #6e79d0; } .ss-tier-ZUBL { background: #818794; } .ss-tier-NFE { background: #788091; } .ss-tier-LC { background: #9aa3b4; }
.tt-info { flex: 1; min-width: 0; font-size: 10.5px; }
.tt-row { display: flex; justify-content: space-between; gap: 6px; padding: 1px 0; border-bottom: 1px dashed rgba(255,255,255,.06); }
.tt-k { color: #8fa3bd; }
.tt-v { color: #eaf1ff; font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-m { color: #6db3ff; } #team-tip .tt-f { color: #ff8ab0; } #team-tip .tt-g { font-weight: 700; }
/* Grade de stats com EVs (igual ao antigo: valor grande + EV pequeno). */
.tt-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 6px 10px 0; }
.tt-stat { background: #1b2430; border-radius: 5px; padding: 3px 0; text-align: center; }
.tt-stat.tt-up { background: #243a2a; } .tt-stat.tt-dn { background: #3a2526; }
.tt-stl { font-size: 8.5px; color: #8fa3bd; }
.tt-stv { font-size: 12px; font-weight: 700; color: #eaf1ff; line-height: 1.1; }
.tt-stat.tt-up .tt-stv { color: #7fe08a; } .tt-stat.tt-dn .tt-stv { color: #ff8a7a; }
.tt-stev { font-size: 8px; color: #6f8097; }
.tt-types { display: flex; gap: 4px; padding: 7px 10px 2px; justify-content: center; }
.tt-type { font-size: 9px; font-weight: 700; color: #fff; padding: 1px 8px; border-radius: 3px; text-transform: uppercase; letter-spacing: .5px; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.tt-moves { display: flex; flex-wrap: wrap; gap: 3px; padding: 4px 10px; justify-content: center; }
.tt-move { font-size: 9.5px; background: #243042; border: 1px solid #2f4055; border-radius: 4px; padding: 1px 6px; color: #cdd8ea; }
.tt-move.tt-none { background: none; border: 0; color: #6f8097; }
.tt-move.tt-move-clk { cursor: pointer; transition: background .12s, border-color .12s; }
.tt-move.tt-move-clk:hover { background: #2f4d6b; border-color: #4a6fa0; color: #fff; }
.tt-bars { padding: 4px 10px 9px; }
.tt-barline { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 9px; color: #8fa3bd; }
.tt-barline span { width: 24px; font-weight: 700; }
.tt-barline small { color: #9fb0c4; }
.tt-bar { flex: 1; height: 6px; background: #2a3647; border-radius: 4px; overflow: hidden; }
.tt-bar-hp { height: 100%; background: linear-gradient(90deg, #5cd65c, #3fb34f); }
.tt-bar-exp { height: 100%; background: linear-gradient(90deg, #4aa3ff, #2f7fe0); }
/* Card de OVO (Daycare): esconde espécie/stats, mostra sprite + progresso de choco. */
.tt-egg { width: 250px; }
.tt-egg .tt-egghead { position: relative; justify-content: center; gap: 8px; padding: 9px 30px; background: linear-gradient(180deg, #243650, #19232f); }
.tt-egg .tt-eggtitle { font-size: 13px; font-weight: 800; letter-spacing: .3px; color: #eaf1ff; }
.tt-egg .tt-egghead .tt-rg { font-size: 9px; }
.tt-egg .tt-egghead .tt-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); margin: 0; }
.tt-egg .tt-eggbody { padding: 16px 16px 14px; text-align: center; background: radial-gradient(120% 90% at 50% 0%, #16202e 0%, #111824 70%); }
.tt-egg .tt-eggart { display: flex; justify-content: center; align-items: center; height: 88px; }
.tt-egg .tt-eggimg { width: 76px; height: 76px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 6px 10px rgba(0,0,0,.55)); animation: ttEggFloat 2.6s ease-in-out infinite; }
@keyframes ttEggFloat { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
.tt-egg .tt-eggmsg { margin: 6px 4px 14px; font-size: 11px; line-height: 1.5; color: #aebfd6; }
.tt-egg .tt-eggmsg b { color: #cfe0f6; font-weight: 700; }
.tt-egg .tt-eggprog { margin: 0 2px; }
.tt-egg .tt-eggprog .tt-bar { height: 9px; background: #202c3d; border: 1px solid #2f3f56; border-radius: 6px; }
.tt-egg .tt-eggprog .tt-bar-exp { background: linear-gradient(90deg, #ffd86b, #ff9f43); transition: width .25s ease; }
.tt-egg .tt-eggpct { margin-top: 7px; font-size: 11px; font-weight: 700; color: #9fb2cc; }
.tt-egg .tt-eggpct .egg-live { color: #ffd86b; }
/* Daycare: botão "Como funciona?" + janela de ajuda. */
.dc-helpbtn { background: rgba(74,163,255,.12); border: 1px solid #2f5f8f; color: #aacbff; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: background .15s; }
.dc-helpbtn:hover { background: rgba(74,163,255,.22); }
/* Modal de ajuda do Daycare: largura abraça o conteúdo (sem vão à direita). */
.pc-modal:has(.dc-help) { width: fit-content; min-width: 440px; max-width: calc(100vw - 32px); }
.dc-help { text-align: left; width: 480px; max-width: 100%; }
.dc-help .dch-intro { font-size: 13px; line-height: 1.5; color: #aebfd6; margin: 0 2px 12px; }
.dc-help .dch-intro b { color: #eaf1ff; }
.dc-help .dch-row { display: flex; gap: 13px; align-items: flex-start; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.06); }
.dc-help .dch-row:first-of-type { border-top: 0; padding-top: 2px; }
.dc-help .dch-ic { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--c, #8fa3bd); background: rgba(255,255,255,.04); background: color-mix(in srgb, var(--c) 15%, transparent); border: 1px solid rgba(255,255,255,.08); border-color: color-mix(in srgb, var(--c) 34%, transparent); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.dc-help .dch-tx { flex: 1; min-width: 0; padding-top: 1px; }
.dc-help .dch-t { font-size: 13.5px; font-weight: 800; color: #eaf1ff; margin-bottom: 3px; letter-spacing: .2px; }
.dc-help .dch-d { font-size: 12.5px; line-height: 1.5; color: #aebfd6; }
.dc-help .dch-d b { color: #dfe9f8; font-weight: 700; }
.dc-help .dch-warn { display: inline-block; margin-top: 4px; font-size: 11.5px; color: #ff9a9a; }
.dc-help .dch-warn .fa { margin-right: 4px; opacity: .85; }
/* ===== Torneios / Liga (jogador) ===== */
.tn-overlay { position: fixed; inset: 0; top: 0; left: 0; width: 100%; height: 100%; z-index: 100080; background: rgba(6,10,18,.74); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
.tn-modal { width: min(560px, 95vw); max-height: 90vh; display: flex; flex-direction: column; background: linear-gradient(180deg,#141a26,#0e121b); border: 1px solid #26324a; border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.6); overflow: hidden; }
.tn-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; background: linear-gradient(180deg,#1d2735,#161e2b); border-bottom: 1px solid #2c3a4f; color: #eaf1ff; font-size: 16px; }
.tn-x { background: rgba(255,255,255,.06); border: 1px solid #38465c; color: #cdd8ea; width: 30px; height: 30px; border-radius: 8px; font-size: 18px; cursor: pointer; line-height: 1; }
.tn-body { padding: 12px 14px 14px; overflow-y: auto; color: #c8d4e6; }
#tournament-panel { max-width: 1200px; margin: 0 auto; }
#tournament-panel .ssdb { border-radius: 14px; }
#tournament-panel .tn-list { grid-template-columns: repeat(auto-fit, minmax(340px, 480px)); justify-content: center; }
.tn-page-body { padding: 14px 16px 16px; color: #c8d4e6; }
@media (max-width: 620px) { .tn-page-body { padding: 12px; } }
.tn-back { margin-bottom: 8px !important; padding: 5px 11px; font-size: 12px; }
.tn-empty, .tn-soon { color: #8a9bb5; padding: 12px; text-align: center; font-size: 12.5px; }
.tn-acts { margin-top: 9px; }
.tn-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; align-items: start; }
.tn-sec-h { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #cfe0ff; margin: 14px 2px 8px; padding-bottom: 6px; border-bottom: 1px solid #223148; }
.tn-sec-h:first-child { margin-top: 0; }
.tn-sec-n { color: #7b8ca6; font-weight: 700; font-size: 12px; }
.tn-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 12px 0 2px; }
.tn-pgb { width: 34px; height: 30px; border: 1px solid #2a3a52; background: #16202f; color: #cdd8ea; border-radius: 8px; font-size: 16px; font-weight: 800; cursor: pointer; line-height: 1; }
.tn-pgb:hover:not(:disabled) { background: #223047; }
.tn-pgb:disabled { opacity: .35; cursor: default; }
.tn-pgn { color: #9fb2cc; font-weight: 700; font-size: 12.5px; min-width: 48px; text-align: center; }
@media (max-width: 620px) { .tn-list { grid-template-columns: 1fr; } }
.tn-mine { font-size: 11px; font-weight: 700; color: #6ee59a; vertical-align: middle; margin-left: 4px; }
.tn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tn-chip { font-size: 11.5px; color: #b6c6dd; background: rgba(255,255,255,.05); border: 1px solid #283750; border-radius: 999px; padding: 3px 9px; display: inline-flex; align-items: center; gap: 5px; }
.tn-chip .fa { color: #7f93ad; }
.tn-prz-h { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #7f93ad; margin: 12px 0 6px; }
.tn-prizes { display: flex; flex-direction: column; gap: 4px; }
.tn-prz { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.03); border: 1px solid #1b2740; border-radius: 8px; padding: 5px 9px; }
.tn-prz-m { flex: 0 0 26px; text-align: center; font-size: 15px; color: #ffd86b; }
.tn-prz-r { font-size: 12px; color: #cdd8ea; }
.tn-prz-none { color: #8a9bb5; font-size: 12px; justify-content: center; }
/* Pódium (vencedores) no CARD DA LISTA — no lugar da premiação quando o torneio está finalizado.
Classes próprias (tn-lpod*) p/ NÃO colidir com o pódio grande da página de detalhes (.tn-pod*). */
.tn-lpod { display: flex; flex-direction: row; gap: 6px; align-items: stretch; }
.tn-lpodrow { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 8px; padding: 8px 6px; border: 1px solid #1b2740; background: rgba(255,255,255,.03); }
.tn-lpod-m { font-size: 18px; line-height: 1; }
.tn-lpod-nm { max-width: 100%; font-size: 12px; font-weight: 700; color: #e4ecf7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.tn-lpod-1 { border-color: rgba(255,205,74,.55); background: linear-gradient(180deg, rgba(255,205,74,.16), rgba(255,205,74,.04)); }
.tn-lpod-1 .tn-lpod-nm { color: #ffe08a; }
.tn-lpod-2 { border-color: rgba(198,210,224,.45); background: linear-gradient(180deg, rgba(198,210,224,.12), rgba(198,210,224,.03)); }
.tn-lpod-3 { border-color: rgba(214,142,79,.45); background: linear-gradient(180deg, rgba(214,142,79,.13), rgba(214,142,79,.03)); }
.tn-sched { display: flex; flex-direction: column; gap: 0; background: rgba(255,255,255,.03); border: 1px solid #1f2c40; border-radius: 10px; overflow: hidden; }
.tn-srow { display: flex; align-items: center; gap: 10px; padding: 6px 11px; border-top: 1px solid rgba(255,255,255,.05); font-size: 12px; color: #aebfd6; }
.tn-srow:first-child { border-top: 0; }
.tn-srow span:first-child { flex: 1; }
.tn-srow b { color: #eaf1ff; }
.tn-srow .tn-rel { flex: 0 0 auto; font-size: 11px; color: #7f93ad; background: rgba(255,255,255,.05); border-radius: 999px; padding: 2px 8px; }
.tn-card { background: #0e1726; border: 1px solid #1f2c40; border-radius: 12px; padding: 13px 14px; }
.tn-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.tn-knd { font-size: 11px; font-weight: 800; letter-spacing: .4px; background: rgba(47,178,239,.16); border: 1px solid #2f6f8f; color: #aad8f0; border-radius: 999px; padding: 2px 9px; }
.tn-knd.liga { background: rgba(168,139,255,.16); border-color: #6a5aa0; color: #c9b8ff; }
.tn-st { font-size: 11px; font-weight: 700; color: #9fb2cc; }
.tn-st-registration { color: #6ee59a; } .tn-st-running { color: #ffd86b; } .tn-st-finished { color: #8a9bb5; } .tn-st-full { color: #ff9f43; } .tn-st-soon { color: #5ab0ff; }
.tn-nm { font-size: 15px; font-weight: 800; color: #eaf2ff; }
.tn-meta { font-size: 12px; color: #9fb2cc; margin-top: 3px; }
.tn-acts { display: flex; gap: 7px; margin-top: 11px; flex-wrap: wrap; align-items: center; }
.tn-btn { border: 0; border-radius: 9px; padding: 7px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer; color: #fff; background: #2f6f8f; }
.tn-btn.join { background: #2f8f4f; } .tn-btn.leave { background: #a5563a; } .tn-btn.ghost { background: rgba(255,255,255,.06); border: 1px solid #38465c; color: #cdd8ea; }
.tn-in { font-size: 12px; color: #6ee59a; font-weight: 700; }
.tn-back { margin-bottom: 12px; }
.tn-info-h { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #eaf1ff; margin-bottom: 4px; flex-wrap: wrap; }
/* ---- Detalhe do torneio (layout de página) ---- */
.tn-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 18px; margin-bottom: 16px; border: 1px solid #28384f; border-radius: 14px; position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(47,111,143,.20), rgba(14,20,33,.55) 65%); }
.tn-hero.tn-hero-liga { background: linear-gradient(135deg, rgba(138,109,235,.22), rgba(14,20,33,.55) 65%); border-color: #3c3463; }
.tn-hero::after { content: '🏆'; position: absolute; right: 14px; bottom: -14px; font-size: 78px; opacity: .07; pointer-events: none; }
.tn-hero-main { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.tn-hero-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tn-hero-name { font-size: 22px; font-weight: 800; color: #fff; margin: 0; line-height: 1.1; }
.tn-hero-sub { display: flex; gap: 7px; flex-wrap: wrap; }
.tn-hero-acts { display: flex; gap: 8px; flex-shrink: 0; }
.tn-hero-acts .tn-btn { padding: 9px 18px; font-size: 13px; }
.tn-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 760px) { .tn-detail-grid { grid-template-columns: 1fr; } }
/* ===== Popup "Inscrições abertas" (anúncio de torneio) ===== */
.tnanc-mask { position: fixed; inset: 0; z-index: 100050; display: flex; align-items: center; justify-content: center;
background: rgba(6,10,16,.66); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); padding: 16px; animation: tnancFade .18s ease; }
@keyframes tnancFade { from { opacity: 0; } to { opacity: 1; } }
.tnanc-card { width: 380px; max-width: 100%; background: #0e1622; border: 1px solid #25344c; border-radius: 16px; overflow: hidden;
box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(47,178,239,.06); color: #dce6f2; animation: tnancPop .22s cubic-bezier(.2,.9,.3,1.2); }
@keyframes tnancPop { from { transform: translateY(10px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.tnanc-banner { position: relative; padding: 18px 16px 14px; text-align: center;
background: radial-gradient(120% 120% at 50% -10%, rgba(255,203,5,.22), rgba(255,203,5,0) 60%), linear-gradient(180deg,#14233a,#0e1622);
border-bottom: 1px solid #20304a; }
.tnanc-banner::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, #ffcb05, transparent); opacity: .55; }
.tnanc-trophy { font-size: 34px; line-height: 1; filter: drop-shadow(0 3px 8px rgba(255,203,5,.35)); }
.tnanc-kicker { margin-top: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #ffcb05; }
.tnanc-name { font-size: 19px; font-weight: 800; color: #fff; margin: 1px 0 8px; line-height: 1.15; }
.tnanc-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #6ee7a0;
background: rgba(46,204,113,.12); border: 1px solid rgba(46,204,113,.35); border-radius: 999px; padding: 3px 10px; }
.tnanc-badge i { width: 7px; height: 7px; border-radius: 50%; background: #43e08a; box-shadow: 0 0 0 0 rgba(67,224,138,.7); animation: tnancPulse 1.6s infinite; }
@keyframes tnancPulse { 0%{box-shadow:0 0 0 0 rgba(67,224,138,.55);} 70%{box-shadow:0 0 0 7px rgba(67,224,138,0);} 100%{box-shadow:0 0 0 0 rgba(67,224,138,0);} }
.tnanc-body { padding: 14px 16px 16px; }
.tnanc-vagas { margin-bottom: 14px; }
.tnanc-vagas-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: #9fb2cc; margin-bottom: 5px; }
.tnanc-vagas-top b { color: #e8f0fb; font-size: 13px; }
.tnanc-bar { height: 7px; border-radius: 999px; background: #1b2942; overflow: hidden; }
.tnanc-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg,#2FB2EF,#5ad1ff); }
.tnanc-sec { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #ffcb05; margin: 4px 0 8px; }
.tnanc-prize { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 10px; background: #122033;
border: 1px solid #1e2d45; margin-bottom: 6px; font-size: 13px; }
.tnanc-prize .medal { font-size: 16px; min-width: 20px; text-align: center; }
.tnanc-prize .ptxt { color: #dfe9f6; }
.tnanc-prize.gold-row { background: linear-gradient(90deg, rgba(255,203,5,.10), #122033); border-color: rgba(255,203,5,.28); }
.tnanc-empty { color: #7f90a8; font-size: 12.5px; padding: 4px 2px; }
.tnanc-btns { display: flex; gap: 9px; margin-top: 14px; }
.tnanc-btns button { flex: 1; border: none; border-radius: 10px; padding: 11px 10px; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: transform .1s ease, filter .15s ease, background .15s ease; }
.tnanc-btns button:active { transform: translateY(1px); }
.tnanc-go { color: #fff; background: linear-gradient(180deg,#3bb6f0,#1f93d6); box-shadow: 0 6px 16px rgba(31,147,214,.35); }
.tnanc-go:hover { filter: brightness(1.07); }
.tnanc-x { color: #c4d2e4; background: #1b2942; }
.tnanc-x:hover { background: #223152; }
@media (max-width: 430px) { .tnanc-card { width: 100%; } }
.tn-panel { background: linear-gradient(180deg,#101a2b,#0c1421); border: 1px solid #1c2942; border-radius: 12px; padding: 13px 15px 15px; }
.tn-panel-wide { grid-column: 1 / -1; }
.tn-panel .tn-sec { margin: 0 0 10px; padding-left: 9px; position: relative; }
.tn-panel .tn-sec::before { content: ''; position: absolute; left: 0; top: 1px; bottom: 1px; width: 3px; border-radius: 2px; background: #2FB2EF; }
.tn-panel .tn-rules2, .tn-panel .tn-sched { margin: 0; }
.tn-rules2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: #1f2c40; border: 1px solid #1f2c40; border-radius: 10px; overflow: hidden; }
@media (max-width: 520px) { .tn-rules2 { grid-template-columns: 1fr; } }
.tn-rule { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #0e1726; padding: 6px 12px; font-size: 12px; min-height: 31px; box-sizing: border-box; }
.tn-rule.wide { grid-column: 1 / -1; align-items: flex-start; flex-direction: column; gap: 7px; }
.tn-rule-l { color: #9fb2cc; }
.tn-rule-v { color: #eaf1ff; }
.tn-rule-v b, .tn-rule b { color: #fff; font-weight: 700; }
.tn-rule-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tn-tag { font-size: 11.5px; background: rgba(255,255,255,.06); border: 1px solid #2a3850; border-radius: 7px; padding: 2px 8px; color: #cdd8ea; display: inline-flex; align-items: center; gap: 4px; text-transform: capitalize; }
.tn-tag.ban { color: #ff9a9a; border-color: #6e3434; background: rgba(255,120,120,.08); }
.tn-tag .tn-pokeic { width: 22px; height: 22px; vertical-align: middle; }
.tn-no { color: #ff9a9a; font-weight: 700; }
.tn-sec { font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #7f93ad; margin: 11px 0 5px; }
.tn-parts { display: flex; flex-wrap: wrap; gap: 6px; }
.tn-part { font-size: 12px; background: rgba(255,255,255,.05); border: 1px solid #2a3850; border-radius: 999px; padding: 3px 10px; color: #cdd8ea; }
.tn-part.out { opacity: .45; text-decoration: line-through; }
.tn-bracket { display: flex; gap: 0; overflow-x: auto; padding-bottom: 6px; align-items: stretch; min-height: 280px; }
.tn-round { flex: 0 0 auto; width: 190px; display: flex; flex-direction: column; padding: 0 12px; }
.tn-round.has-third { position: relative; }
.tn-round-h { font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #9fb2cc; text-align: center; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid #243349; }
.tn-round-time { font-size: 11px; color: #7f90a8; text-align: center; margin: -1px 0 8px; }
/* Corpo da rodada: distribui as partidas pela altura → a rodada seguinte centraliza entre os pares (estilo bracket). */
.tn-round-body { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.tn-round-body .tn-match2 { flex: 0 0 auto; margin: 4px 0; }
/* Conector horizontal saindo de cada partida (exceto na última coluna). */
.tn-round:not(:last-child) .tn-match2 { position: relative; }
.tn-round:not(:last-child) .tn-match2::after { content: ''; position: absolute; right: -12px; top: 50%; width: 12px; height: 2px; background: #2a3a52; }
/* Disputa de 3º lugar: bloco separado abaixo do mata-mata. */
/* Pódio (torneio finalizado) — 1º no centro/mais alto, estilo do antigo. */
.tn-podium { display: flex; align-items: flex-end; justify-content: center; gap: 12px; padding: 18px 0 0; }
.tn-pod { flex: 1 1 0; max-width: 150px; min-width: 80px; display: flex; flex-direction: column; align-items: center; }
.tn-pod-top { text-align: center; margin-bottom: 7px; display: flex; flex-direction: column; align-items: center; }
.tn-pod-char { width: 64px; height: 64px; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); margin-bottom: 2px; }
.tn-pod.p1 .tn-pod-char { width: 78px; height: 78px; }
.tn-pod-medal { font-size: 22px; display: block; line-height: 1; }
.tn-pod-name { font-size: 12.5px; font-weight: 800; color: #eaf2ff; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tn-pod-bar { width: 100%; border-radius: 9px 9px 0 0; display: flex; justify-content: center; padding-top: 7px; font-weight: 800; font-size: 14px; color: #0c1322; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.tn-pod.p1 .tn-pod-bar { height: 120px; background: linear-gradient(180deg,#ffe08a,#e0a72a); }
.tn-pod.p2 .tn-pod-bar { height: 86px; background: linear-gradient(180deg,#eef3f9,#aebccd); }
.tn-pod.p3 .tn-pod-bar { height: 62px; background: linear-gradient(180deg,#f0b27a,#cd7f32); }
.tn-podrest { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.tn-pod-row { font-size: 12px; color: #c8d4e6; background: rgba(255,255,255,.04); border: 1px solid #243349; border-radius: 8px; padding: 4px 11px; }
.tn-pod-pos { font-weight: 800; color: #9fb2cc; }
/* Disputa de 3º lugar: absoluta, logo abaixo da Final (não afeta a centralização da Final). */
.tn-third { position: absolute; left: 12px; right: 12px; top: calc(50% + 48px); margin: 0; }
.tn-third-h { font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #ffce8a; margin-bottom: 6px; }
/* Responsivo (igual ao bracket antigo/gracket): no mobile as rodadas empilham em coluna. */
@media (max-width: 760px) {
.tn-bracket { flex-direction: column; overflow-x: visible; min-height: 0; gap: 6px; }
.tn-round { flex: 1 1 auto; min-width: 0; max-width: none; padding: 0; margin-bottom: 10px; }
.tn-round-h { text-align: left; }
.tn-round-body { display: block; }
.tn-round-body .tn-match2 { margin: 0 0 8px; }
.tn-round:not(:last-child) .tn-match2::after { display: none; } /* sem conectores no layout empilhado */
.tn-bracket { min-height: 0; }
.tn-third { position: static; width: 100%; margin: 8px 0 0; }
}
.tn-match { display: flex; align-items: center; gap: 6px; background: #0e1726; border: 1px solid #1f2c40; border-radius: 8px; padding: 6px 9px; margin-bottom: 6px; font-size: 12px; color: #cdd8ea; }
.tn-match .vs { color: #6f86a6; font-size: 10px; } .tn-match .tn-done { color: #6ee59a; }
/* Caixa de partida estilo scoreboard (placar = pokémon derrotados) */
.tn-match2 { background: #0e1726; border: 1px solid #20304a; border-radius: 9px; overflow: hidden; width: 100%; min-width: 150px; max-width: 240px; margin-left: auto; margin-right: auto; position: relative; }
.tn-wo { position: absolute; top: 3px; right: 3px; z-index: 3; background: #7a3a1a; color: #ffd9a8; font-size: 9px; font-weight: 800; letter-spacing: .3px; padding: 1px 5px; border-radius: 5px; cursor: help; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.tn-match2.done { border-color: #2f5a44; }
.tn-match2 { position: relative; }
/* Botão "assistir" (olho) — aparece ao passar o mouse na partida ao vivo. */
.tn-watch { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; width: 38px; height: 32px; border: 1px solid #2f6f8f; border-radius: 8px; background: rgba(17,32,46,.92); color: #aad8f0; font-size: 15px; cursor: pointer; padding: 0; opacity: 0; transition: opacity .12s; box-shadow: 0 2px 10px rgba(0,0,0,.6); }
.tn-match2:hover .tn-watch { opacity: 1; }
.tn-watch:hover { background: #2f6f8f; color: #fff; }
@media (hover: none) { .tn-watch { opacity: 1; } } /* touch: sempre visível */
.tn-mlabel { font-size: 9px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #8aa0bd; background: rgba(255,255,255,.04); padding: 2px 8px; border-bottom: 1px solid #1b2740; }
.tn-mlabel.third { color: #ffce8a; }
.tn-mp { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 9px; font-size: 12px; color: #d4dded; }
.tn-mp + .tn-mp { border-top: 1px solid #18222f; }
.tn-mp-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-mp-s { flex: 0 0 auto; min-width: 20px; text-align: center; font-weight: 800; font-size: 11px; color: #aab9d0; background: rgba(255,255,255,.05); border: 1px solid #28384f; border-radius: 6px; padding: 0 6px; }
.tn-mp.won { color: #eaffea; font-weight: 700; background: linear-gradient(90deg, rgba(70,200,120,.14), transparent); }
.tn-mp.won .tn-mp-n::before { content: '🏆 '; font-size: 10px; }
.tn-mp.won .tn-mp-s { color: #0c1a12; background: #6ee59a; border-color: #6ee59a; }
.tn-mp.tbd { color: #5f7090; font-style: italic; }
.tn-mp.tbd .tn-mp-s { opacity: .4; }
/* Premiação em cards (responsivo) */
.tn-awcards { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tn-awcard { display: flex; flex-direction: column; align-items: center; gap: 8px; background: #0e1726; border: 1px solid #1f2c40; border-radius: 10px; padding: 11px 12px; flex: 0 1 200px; min-width: 150px; }
.tn-awcard-pos { font-size: 22px; font-weight: 800; text-align: center; color: #ffd86b; line-height: 1; }
.tn-awcard-rw { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.tn-awrw { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: #d4dded; background: rgba(255,255,255,.04); border: 1px solid #243349; border-radius: 8px; padding: 3px 10px; }
.tn-awtab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tn-awtab th { text-align: left; color: #7f93ad; font-weight: 800; padding: 7px 10px; border-bottom: 1px solid #25344a; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; }
.tn-awtab td { padding: 7px 10px; border-bottom: 1px solid #16202e; color: #d4dded; font-size: 12.5px; vertical-align: middle; }
.tn-awtab tbody tr:nth-child(even) td { background: rgba(255,255,255,.018); }
.tn-awtab tbody tr:hover td { background: rgba(47,178,239,.06); }
.tn-awtab tbody tr:last-child td { border-bottom: 0; }
.tn-awtab td.tn-aw-p { font-size: 17px; width: 46px; text-align: center; }
.tn-coin { width: 13px; height: 13px; border-radius: 50%; display: inline-block; vertical-align: -2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }
.tn-coin.silver { background: linear-gradient(160deg,#eef3f9,#aebccd); }
.tn-coin.gold { background: linear-gradient(160deg,#ffe08a,#e0a72a); }
.tn-itemic { display: inline-block; width: 24px; height: 24px; vertical-align: -8px; background-repeat: no-repeat; }
.tn-pokeic { width: 28px; height: 28px; vertical-align: -9px; image-rendering: pixelated; }
/* ---- Janela de preparação do torneio (estilo da janela de info da Box: .ss-pokewin) ---- */
.tn-prep { width: 292px; max-width: calc(100vw - 16px); animation: tnPrepIn .25s ease; z-index: 9950; }
@keyframes tnPrepIn { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.tn-prep-card { width: 292px; max-width: 100%; }
.tn-prep.ok .tn-prep-card { border-color: #2f6f4f; } .tn-prep.bad .tn-prep-card { border-color: #7a3a2e; }
.tn-prep-head { gap: 7px; }
.tn-prep-ic { font-size: 15px; }
.tn-prep-name { font-size: 13px; color: #eaf2ff; font-weight: 800; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-prep-kind { font-size: 9.5px; font-weight: 800; letter-spacing: .4px; color: #aad8f0; background: rgba(47,178,239,.16); border: 1px solid #2f6f8f; border-radius: 999px; padding: 1px 7px; }
.tn-prep-risk { display: none; font-size: 10px; font-weight: 800; color: #ffd0c4; background: rgba(220,70,50,.22); border: 1px solid #a5402e; border-radius: 999px; padding: 1px 7px; animation: tnRiskBlink 1.1s ease-in-out infinite; }
.tn-prep-risk .fa { color: #ff8a6a; }
@keyframes tnRiskBlink { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.tn-prep-min { background: rgba(255,255,255,.06); border: 1px solid #38465c; color: #cdd8ea; width: 22px; height: 22px; border-radius: 6px; font-size: 13px; line-height: 1; cursor: pointer; padding: 0; flex: 0 0 auto; }
.tn-prep-min:hover { color: #fff; background: rgba(255,255,255,.12); }
.tn-prep-count { padding: 10px 12px 4px; font-size: 17px; font-weight: 800; color: #ffd86b; text-align: center; letter-spacing: .5px; }
.tn-prep-count .fa { font-size: 13px; color: #d8b24a; margin-right: 3px; }
.tn-prep-team { padding: 4px 12px 12px; font-size: 11.5px; }
.tn-prep-ok { color: #6ee59a; font-weight: 700; text-align: center; padding: 5px 0; }
.tn-prep-badh { color: #ff9a7a; font-weight: 800; margin-bottom: 4px; }
.tn-prep-bad ul { margin: 0; padding-left: 17px; color: #e6b4a4; }
.tn-prep-bad li { margin: 2px 0; line-height: 1.3; }
.tn-prep-fix { margin-top: 6px; color: #ffd0b0; font-size: 10.5px; font-style: italic; }
.tn-prep-view { display: block; width: calc(100% - 20px); margin: 0 10px 11px; border: 0; border-radius: 8px; padding: 7px; font-size: 12px; font-weight: 700; cursor: pointer; color: #fff; background: #2f6f8f; }
.tn-prep-view:hover { filter: brightness(1.08); }
.tn-prep-enter { display: block; width: calc(100% - 20px); margin: 0 10px 8px; border: 0; border-radius: 8px; padding: 9px; font-size: 13px; font-weight: 800; cursor: pointer; color: #fff; background: #2f8f4f; animation: tnRiskBlink 1.4s ease-in-out infinite; }
.tn-prep-enter:hover { filter: brightness(1.1); }
.tn-prep-enter:disabled { background: #3a4a5e; color: #8aa0bd; cursor: not-allowed; animation: none; }
/* Minimizado: só o cabeçalho. Se em desacordo (.risk), mostra o aviso vermelho piscando. */
.tn-prep.minimized .tn-prep-body { display: none; }
.tn-prep.minimized .tn-prep-card { width: auto; min-width: 200px; }
.tn-prep.minimized.risk .tn-prep-risk { display: inline-flex; align-items: center; gap: 3px; }
.tn-prep.minimized.risk .tn-prep-card { border-color: #c0432e; box-shadow: 0 0 0 1px rgba(220,70,50,.4), 0 10px 30px rgba(0,0,0,.5); }
.tn-prep.minimized .tn-prep-kind { display: none; }
@media (max-width: 620px) { .tn-prep, .tn-prep-card { width: 260px; } }
/* Swirl "Change" clicável (abre a Box) + ícone do item segurado no card do time. */
#slots-container .MyTeam .Change { cursor: pointer; }
#slots-container .MyTeam-item { position: absolute; left: 8px; bottom: 8px; width: 24px; height: 24px; z-index: 4;
image-rendering: pixelated; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
#ss-tdbg { position: fixed; left: 4px; top: 4px; z-index: 2147483000; max-width: 70vw;
background: rgba(0,0,0,.82); color: #9eff9e; font: 600 10px/1.35 monospace;
padding: 6px 8px; border-radius: 8px; border: 1px solid #2FB2EF; white-space: pre-wrap;
word-break: break-word; pointer-events: none; display: none; max-height: 46vh; overflow: hidden; }
#ss-tdbg.on { display: block; }
#ss-tdbg-btn { position: fixed; left: 4px; top: 4px; z-index: 2147483001; width: 30px; height: 30px;
border: 0; border-radius: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: 16px; cursor: pointer;
display: none; } /* só admin vê (liberado via /admin/me) */
#ss-tdbg-clear { position: fixed; left: 38px; top: 4px; z-index: 2147483001; height: 30px; padding: 0 10px;
border: 0; border-radius: 8px; background: rgba(0,0,0,.55); color: #fff; font: 700 12px/1 'Open Sans',Arial,sans-serif;
cursor: pointer; display: none; }
#ss-tdbg-clear.on { display: inline-block; }
/* ===== Rankings (página) — abas ms-tabs + lista de posições ===== */
.rk-list { padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.rk-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #27374e;
border-radius: 10px; background: linear-gradient(180deg, #131c2a, #0e1622); color: #cdd8ea; font-size: 13px; }
.rk-row > :first-child { flex: 0 0 30px; text-align: center; font-size: 16px; }
.rk-pos { color: #7f93ad; font-weight: 800; font-size: 12.5px; }
.rk-name { flex: 1 1 auto; font-weight: 800; color: #eaf2ff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-name small { color: #9fb2c8; font-weight: 600; }
.rk-badge { flex: 0 0 auto; color: #9fb2c8; font-size: 12px; background: rgba(47,178,239,.08);
border: 1px solid rgba(47,178,239,.22); border-radius: 6px; padding: 2px 8px; }
.rk-pods .rk-medimg { width: 16px; height: 16px; vertical-align: -4px; }
.rk-pods .rk-medemo { font-size: 14px; vertical-align: -1px; }
.rk-val { flex: 0 0 auto; font-weight: 800; color: #ffce54; min-width: 90px; text-align: right; }
.rk-val small { color: #9fb2c8; font-weight: 600; }
.rk-star { color: #ffce54; }
.rk-mico { width: 32px; height: 32px; image-rendering: pixelated; flex: 0 0 32px; }
.rk-row.rk-me { border-color: #2FB2EF; background: linear-gradient(180deg, rgba(47,178,239,.14), #0e1622); }
/* Abas no MESMO estilo do PokéMarket (Button.png; ativa = metade de cima da imagem) */
.rk-tabs { display: flex; gap: 7px; flex-wrap: wrap; padding: 14px 14px 0; }
.rk-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 125px; height: 42px;
padding: 0 3px; background: url('/old/images/shop/Button.png?v=1205') center bottom/100% 200% no-repeat; border: 0;
color: #233246; font-size: 12px; font-weight: 800; cursor: pointer; text-shadow: none;
transition: filter .15s, transform .1s; }
.rk-tab:hover { filter: brightness(1.06); }
.rk-tab:active { transform: scale(.96); }
.rk-tab.active { background-position: center top; color: #eaf1ff; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
/* Sazonal: abas de MESES (pills) acima da lista — centralizadas */
.rk-subtabs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 0 0 10px; }
.rk-subtab { background: #1a2333; border: 1px solid #27374e; color: #9fb2c8; border-radius: 16px;
cursor: pointer; font-size: 12px; font-weight: 700; padding: 4px 12px; transition: background .12s, color .12s; }
.rk-subtab:hover { background: #24304a; color: #cdd8ea; }
.rk-subtab.active { background: rgba(47,178,239,.16); border-color: #2FB2EF; color: #eaf2ff; }
/* Estado vazio do mês (Sazonal) — card centralizado */
.rk-empty { text-align: center; padding: 44px 20px 50px; color: #9fb2c8; }
.rk-empty-ic { font-size: 40px; color: #34465f; margin-bottom: 12px; }
.rk-empty-t { font-size: 17px; font-weight: 800; color: #eaf2ff; margin-bottom: 6px; }
.rk-empty-s { font-size: 13px; line-height: 1.6; max-width: 420px; margin: 0 auto; }
/* Paginador (10 por página) */
.rk-pager { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 0 2px; }
.rk-pager button { background: #34465f; border: 1px solid #27374e; color: #cdd8ea; border-radius: 6px;
cursor: pointer; font-size: 16px; font-weight: 800; padding: 2px 14px; line-height: 1.4; }
.rk-pager button:hover:not(:disabled) { background: #3d5170; }
.rk-pager button:disabled { opacity: .35; cursor: default; }
.rk-pg-info { color: #9fb2c8; font-size: 12.5px; font-weight: 700; min-width: 52px; text-align: center; }
@media (max-width: 560px) {
.rk-list { padding: 10px 8px; }
.rk-row { padding: 8px 8px; gap: 7px; font-size: 12px; }
.rk-badge { display: none; }
.rk-val { min-width: 70px; }
.rk-tab { width: calc(50% - 4px); }
}
/* ===== Recompensas de Recarga (página de Doações) ===== */
.dn-mswrap { margin-bottom: 6px; }
.dn-packshdr { margin: 26px 0 18px; }
.dn-ms-total { color: #9fb2c8; font-size: 13px; margin: 8px 0 12px; }
.dn-ms-total b { color: #ffce54; }
.dn-ms-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.dn-ms { width: 240px; background: linear-gradient(180deg, #131c2a, #0e1622); border: 1px solid #27374e; border-radius: 12px;
padding: 13px; display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; }
/* Caixinhas de recompensa (lado a lado, valores abreviados 1k/1.2kk) */
.dn-ms-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; align-content: flex-start; justify-content: center; min-height: 32px; }
.dn-chip { display: inline-flex; align-items: center; gap: 5px; background: #0a111c; border: 1px solid #27374e;
border-radius: 8px; padding: 4px 8px; font-size: 11.5px; font-weight: 800; color: #eaf2ff; line-height: 1.4; }
.dn-chip .picon { display: inline-block; transform: scale(.8); margin: -6px -4px; }
.dn-chip .dn-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.dn-chip .dn-ic { width: 18px; height: 18px; flex: 0 0 18px; display: inline-block; background-size: contain; }
/* VIP usa o gif do jogo no lugar da bolinha (chips dos marcos + lista dos pacotes) */
.dn-vipico { height: 14px; width: auto; image-rendering: pixelated; vertical-align: middle; }
.dn-rwline .dn-vipico { height: 16px; margin-right: 2px; }
/* Cards dos PACOTES também mostram as recompensas em chips (igual aos marcos) */
.dn-pack .dn-pack-chips { margin: 6px 0 12px; }
.dn-ms.ready { border-color: #ffce54; box-shadow: 0 0 14px rgba(255,206,84,.12); }
.dn-ms.claimed { opacity: .62; }
.dn-ms-req { font-weight: 800; color: #ffce54; font-size: 14.5px; }
.dn-ms-bar { height: 8px; border-radius: 5px; background: #0a111c; border: 1px solid #1d293b; overflow: hidden; }
.dn-ms-bar span { display: block; height: 100%; background: linear-gradient(90deg, #2FB2EF, #7fe0a0); border-radius: 5px; }
.dn-ms-num { color: #8fa6c2; font-size: 11.5px; font-weight: 700; text-align: right; }
.dn-ms-btn { border: 0; border-radius: 8px; padding: 9px 10px; font-weight: 800; font-size: 12.5px; cursor: pointer;
background: #2a3a52; color: #7f93ad; }
.dn-ms-btn.ok { background: linear-gradient(180deg, #ffd76e, #e0a72a); color: #3a2c00; }
.dn-ms-btn.ok:hover { filter: brightness(1.06); }
.dn-ms-btn.done { background: #1a2333; color: #6f86a6; cursor: default; }
.dn-ms-btn:disabled:not(.done) { cursor: default; opacity: .75; }
/* ===== Página de Configurações (Minha Conta > Configurações) ===== */
.st-empty { text-align:center; color:#8a99ad; padding:40px 0; font-size:14px; }
.st-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:14px; align-items:start; }
.st-card { background:linear-gradient(180deg,#1c283a,#16202f); border:1px solid #2a3a52; border-radius:14px; padding:16px 16px 14px; }
.st-chead { font-weight:800; color:#ffd86b; font-size:15px; margin-bottom:12px; border-bottom:1px solid #2a3a52; padding-bottom:9px; }
.st-chead .fa { margin-right:6px; opacity:.9; }
.st-lbl { color:#cdd8ea; font-size:13px; font-weight:700; margin:10px 0 6px; }
/* text-transform/align/weight: o new-style.css antigo tem `input { text-transform:uppercase; text-align:center; font-weight:bolder }` global */
.st-in { width:100%; box-sizing:border-box; background:#0f1722; color:#eaf1ff; border:1px solid #3d5170; border-radius:8px; padding:9px 10px; font-size:13px; margin-bottom:8px; text-transform:none; text-align:left; font-weight:400; display:block; }
.st-in:focus { outline:none; border-color:#5a7bab; }
select.st-in { cursor:pointer; }
.st-ta { resize:vertical; min-height:110px; font-family:Consolas,Menlo,monospace; font-size:12px; }
.st-inline { display:flex; gap:8px; }
.st-inline .st-in { flex:1; margin-bottom:0; }
.st-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:2px; }
.st-btn { background:linear-gradient(180deg,#4a6a96,#3d5170); color:#fff; border:0; border-radius:8px; padding:9px 16px; font-weight:700; cursor:pointer; font-size:13px; }
.st-btn:hover { filter:brightness(1.12); }
.st-btn-ok { background:linear-gradient(180deg,#3f9e63,#2e7a4a); }
.st-btn-ghost { background:rgba(255,255,255,.07); border:1px solid #3d5170; color:#cdd8ea; }
.st-sep { border:0; border-top:1px solid #2a3a52; margin:14px 0 4px; }
.st-hint { color:#8a99ad; font-size:11.5px; line-height:1.5; margin:2px 0 4px; }
.st-msg { font-size:12px; min-height:15px; margin-top:4px; }
.st-flags { display:flex; gap:10px; margin:4px 0 10px; }
.st-flag { background:none; border:0; cursor:pointer; padding:4px; border-radius:8px; }
.st-flag img { height:24px; display:block; border-radius:3px; }
.st-flag.active { outline:2px solid #ffd86b; }
.st-volrow { display:flex; align-items:center; gap:10px; margin:8px 0; }
.st-volrow .st-lbl { margin:0; flex:0 0 auto; min-width:128px; }
.st-volrow input[type=range] { flex:1; min-width:60px; }
.st-volval { color:#ffd86b; font-weight:700; font-size:12px; min-width:26px; text-align:right; }
.st-swrow { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; }
.st-swtxt span { color:#cdd8ea; font-size:13px; font-weight:700; display:block; }
.st-swtxt small { color:#8a99ad; font-size:11px; line-height:1.4; display:block; margin-top:2px; }
/* ===== Página de Perfil do Treinador ===== */
.pf-head { display:flex; gap:16px; align-items:center; background:linear-gradient(180deg,#1c283a,#16202f); border:1px solid #2a3a52; border-radius:14px; padding:16px; }
.pf-ava { width:92px; height:92px; flex:0 0 92px; border-radius:12px; background:#0f1722; border:1px solid #2a3a52; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pf-ava img { max-width:100%; max-height:100%; image-rendering:pixelated; }
.pf-noava { font-size:38px; color:#3d5170; }
.pf-hinfo { flex:1; min-width:0; }
.pf-name { font-size:19px; font-weight:800; color:#fff; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.pf-vip { height:16px; }
.pf-adm { background:#a33; color:#fff; font-size:10px; font-weight:800; letter-spacing:.5px; border-radius:5px; padding:2px 6px; }
.pf-rank { color:#ffd86b; font-size:13px; margin-top:5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pf-rank small { color:#8a99ad; }
.pf-rankbar { flex:1; min-width:90px; max-width:220px; height:7px; background:#0f1722; border-radius:5px; overflow:hidden; border:1px solid #2a3a52; display:inline-block; }
.pf-rankbar i { display:block; height:100%; background:linear-gradient(90deg,#ffd86b,#e8a72b); }
.pf-meta { display:flex; gap:14px; flex-wrap:wrap; color:#8a99ad; font-size:12px; margin-top:7px; }
.pf-on { color:#8fe3a0; font-weight:700; }
.pf-off { color:#8a99ad; }
.pf-chips { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin:12px 0; }
.pf-chip { background:linear-gradient(180deg,#1c283a,#16202f); border:1px solid #2a3a52; border-radius:12px; padding:10px 8px; text-align:center; }
.pf-chip b { display:block; color:#ffd86b; font-size:15px; }
.pf-chip span { color:#8a99ad; font-size:11px; }
.pf-sec { background:linear-gradient(180deg,#1c283a,#16202f); border:1px solid #2a3a52; border-radius:14px; padding:14px 16px; margin-bottom:12px; }
.pf-shead { font-weight:800; color:#ffd86b; font-size:14px; margin-bottom:10px; border-bottom:1px solid #2a3a52; padding-bottom:8px; }
.pf-shead .fa { margin-right:6px; opacity:.9; }
.pf-brow { display:flex; align-items:center; gap:10px; padding:5px 0; flex-wrap:wrap; }
.pf-brg { color:#cdd8ea; font-size:12px; font-weight:700; min-width:70px; }
.pf-bimgs { display:flex; gap:6px; flex-wrap:wrap; }
.pf-bimgs img { width:26px; height:26px; image-rendering:pixelated; }
.pf-team { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
.pf-mon { background:#0f1722; border:1px solid #2a3a52; border-radius:10px; padding:10px; }
.pf-mon-top { display:flex; align-items:center; gap:8px; }
.pf-mon-id { min-width:0; }
.pf-mon-nm { color:#eaf1ff; font-weight:700; font-size:13px; }
.pf-mon-nm small { color:#8a99ad; font-weight:400; }
.pf-mon-lv { color:#8a99ad; font-size:11.5px; margin-top:2px; display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.pf-type { background:#243450; color:#9fb2cc; border-radius:5px; font-size:10px; padding:1px 6px; font-weight:700; }
.pf-mon-it { color:#9fb2cc; font-size:11px; margin-top:6px; }
.pf-mst { display:grid; grid-template-columns:repeat(3,1fr); gap:3px 8px; margin-top:8px; border-top:1px dashed #2a3a52; padding-top:7px; }
.pf-mst span { color:#8a99ad; font-size:10.5px; display:flex; justify-content:space-between; }
.pf-mst b { color:#cdd8ea; }
.pf-desc { color:#cdd8ea; font-size:13px; line-height:1.6; overflow-wrap:break-word; overflow-x:auto; }
.pf-desc img { max-width:100%; }
/* nomes clicáveis nos Rankings */
.rk-link { cursor:pointer; }
.rk-link:hover { text-decoration:underline; color:#ffd86b; }
@media (max-width:640px){
.pf-head { flex-direction:column; text-align:center; }
.pf-name, .pf-rank, .pf-meta { justify-content:center; }
}
/* switch (mesmo visual do painel do mapa, fora do #sf-config-ov) */
.st-swrow .sfcfg-switch { position: relative; display: inline-block; width: 46px; height: 24px; flex: 0 0 46px; cursor: pointer; }
.st-swrow .sfcfg-switch input { opacity: 0; width: 0; height: 0; }
.st-swrow .sfcfg-slider { position: absolute; inset: 0; background: #2c3a45; border-radius: 24px; transition: .15s; }
.st-swrow .sfcfg-slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #cdd8ea; border-radius: 50%; transition: .15s; }
.st-swrow .sfcfg-switch input:checked + .sfcfg-slider { background: #2f7fe0; }
.st-swrow .sfcfg-switch input:checked + .sfcfg-slider::before { transform: translateX(22px); background: #fff; }
/* Visão de Admin no perfil (dados sensíveis; só admins recebem do servidor) */
.pf-admsec { border-color:#7a3340; }
.pf-admsec .pf-shead { color:#ff9b9b; border-bottom-color:#7a3340; }
.pf-agrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px 12px; }
.pf-akv { display:flex; justify-content:space-between; align-items:baseline; gap:8px; background:#0f1722; border:1px solid #3a2a33; border-radius:8px; padding:7px 10px; font-size:12px; }
.pf-akv span { color:#8a99ad; flex:0 0 auto; }
.pf-akv b { color:#eaf1ff; overflow-wrap:anywhere; text-align:right; }
.pf-akv b small { color:#8a99ad; font-weight:400; }
/* códigos da Apresentação (popup) + extras da desc renderizada */
.st-lblrow { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.st-btn-sm { padding:4px 10px; font-size:11px; }
.st-codes { text-align:left; max-height:56vh; overflow-y:auto; }
.st-coderow { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 2px; border-bottom:1px solid #2a3a52; }
.st-coderow:last-child { border-bottom:0; }
.st-coderow code { background:#0f1722; border:1px solid #2a3a52; border-radius:6px; padding:3px 8px; color:#ffd86b; font-size:11.5px; white-space:nowrap; overflow-x:auto; max-width:62%; }
.st-coderow span { color:#9fb2cc; font-size:12px; text-align:right; }
.pf-desc .pf-emo { height:20px; vertical-align:middle; }
.pf-desc blockquote { background:#0f1722; border-left:3px solid #3d5170; border-radius:6px; margin:6px 0; padding:8px 12px; color:#9fb2cc; }
.pf-desc a, .pf-player-link { color:#7fc3ff; }
/* badge de status do 2FA nas Configurações */
.st-badge { font-size:10px; font-weight:800; letter-spacing:.4px; border-radius:5px; padding:2px 7px; vertical-align:middle; background:#2c3a45; color:#8a99ad; }
.st-badge.on { background:#1e5b39; color:#8fe3a0; }
/* seletor de canal do 2FA (email / whatsapp) */
.st-chan { display:flex; gap:8px; margin:6px 0 4px; }
.st-chanbtn { flex:1; background:#0f1722; border:1px solid #3d5170; color:#9fb2cc; border-radius:8px; padding:9px; font-weight:700; font-size:13px; cursor:pointer; }
.st-chanbtn.active { background:linear-gradient(180deg,#1e5b39,#164a2e); border-color:#2e7a4a; color:#8fe3a0; }
/* Fábrica de Teralização — grade de tipos */
.tera-typegrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:6px; }
.tera-typebtn { display:flex; flex-direction:column; align-items:center; gap:2px; background:#0f1722; border:1px solid #3d5170; border-radius:9px; padding:7px 4px 5px; cursor:pointer; }
.tera-typebtn img { image-rendering:pixelated; }
.tera-typebtn .tera-tn { font-size:11px; color:#cdd8ea; font-weight:700; }
.tera-typebtn .tera-sh { font-size:10.5px; font-weight:700; }
.tera-typebtn.sel { border-color:#a77bff; background:linear-gradient(180deg,#2a1e46,#1c1533); box-shadow:0 0 0 1px #a77bff inset; }
.tera-typebtn.off { opacity:.45; cursor:not-allowed; }
/* ===== Mensagem global do admin (aviso centralizado) ===== */
.ss-bcast-mask { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4,8,14,.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: ssBcastIn .18s ease; }
.ss-bcast-card { position: relative; width: min(480px, 92vw); box-sizing: border-box; padding: 28px 26px 22px; text-align: center; color: #eaf2ff; background: linear-gradient(180deg,#131c2b,#0d1420); border: 1px solid #2b3a52; border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.03); overflow: hidden; animation: ssBcastPop .22s cubic-bezier(.2,.9,.3,1.25); }
.ss-bcast-ico { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #0d1420; background: linear-gradient(160deg,#ffd76a,#f0a92a); box-shadow: 0 6px 20px rgba(240,169,42,.42); }
.ss-bcast-title { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ffd76a; margin-bottom: 10px; }
.ss-bcast-text { font-size: 17px; line-height: 1.5; font-weight: 600; white-space: pre-wrap; word-break: break-word; margin-bottom: 22px; }
.ss-bcast-ok { border: 0; border-radius: 10px; padding: 11px 36px; font-weight: 800; font-size: 15px; cursor: pointer; color: #fff; background: linear-gradient(#3aa0ff,#2b6fd6); box-shadow: 0 4px 0 #1e4f9e; font-family: inherit; }
.ss-bcast-ok:hover { filter: brightness(1.06); }
.ss-bcast-ok:active { transform: translateY(2px); box-shadow: 0 2px 0 #1e4f9e; }
.ss-bcast-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.08); }
.ss-bcast-bar > span { display: block; height: 100%; transform-origin: left; background: linear-gradient(90deg,#ffd76a,#f0a92a); animation: ssBcastBar 30s linear forwards; }
@keyframes ssBcastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes ssBcastIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ssBcastPop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .ss-bcast-text { font-size: 15px; } .ss-bcast-card { padding: 22px 18px 18px; } }
/* ===== Troca (Trade) entre jogadores ===== */
.ss-trade-mask { position: fixed; inset: 0; z-index: 100050; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(4,8,14,.66); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: ssBcastIn .16s ease; }
.ss-trade { position: relative; width: min(760px, 96vw); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; color: #eaf2ff; background: linear-gradient(180deg,#131c2b,#0d1420); border: 1px solid #2b3a52; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.6); animation: ssBcastPop .2s cubic-bezier(.2,.9,.3,1.2); }
.ss-trade-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 15px; font-weight: 800; background: #10192a; border-bottom: 1px solid #22314a; }
.ss-trade-head b { color: #7fd6ff; }
.ss-trade-x { background: none; border: 0; color: #9fb2cc; font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.ss-trade-x:hover { color: #fff; }
.ss-trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 16px; overflow-y: auto; }
.ss-trade-side { background: #0e1726; border: 1px solid #223049; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; min-height: 210px; }
.ss-trade-sh { font-weight: 800; font-size: 13px; color: #cfe2ff; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.ss-trade-acc { margin-left: auto; font-size: 11px; font-weight: 700; }
.ss-trade-ok { color: #4fd987; } .ss-trade-wait { color: #8a99ad; }
.ss-trade-slots { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.ss-trade-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; background: #16233a; border: 1px solid #2a3a54; border-radius: 8px; padding: 4px 8px 4px 5px; font-size: 11.5px; }
.ss-trade-side:first-child .ss-trade-slots .ss-trade-chip { cursor: pointer; }
.ss-trade-side:first-child .ss-trade-slots .ss-trade-chip:hover { border-color: #ff8a8a; }
.ss-trade-chip .picon { transform: scale(.72); transform-origin: left center; margin: -6px 0; }
.ss-trade-chip .bm-iicon { width: 24px; height: 24px; }
.ss-trade-cn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; }
.ss-trade-rg { display: block; font-size: 9.5px; color: #7f93ad; font-weight: 600; }
.ss-trade-judge { border: 0; background: #2a3a54; color: #ffd76a; border-radius: 6px; padding: 3px 6px; font-size: 11px; cursor: pointer; margin-left: 2px; align-self: center; flex: 0 0 auto; }
.ss-trade-judge:hover { background: #35496a; }
.ss-trade-empty { color: #6f86a6; font-size: 12px; padding: 6px 2px; }
.ss-trade-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #22314a; align-items: center; }
.ss-trade-addbtn { border: 0; border-radius: 7px; padding: 6px 10px; font-weight: 700; font-size: 12px; cursor: pointer; color: #fff; background: linear-gradient(#31b06a,#1f8a4e); box-shadow: 0 2px 0 #145f36; }
.ss-trade-cur { display: inline-flex; align-items: center; gap: 4px; background: #0c1320; border: 1px solid #27374e; border-radius: 7px; padding: 2px 6px; }
.ss-trade-cur input { width: 78px; background: none; border: 0; color: #eaf1ff; font-size: 12px; padding: 4px 2px; }
.ss-trade-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid #22314a; background: #10192a; }
.ss-trade-cancel { border: 0; border-radius: 9px; padding: 9px 18px; font-weight: 800; font-size: 13px; cursor: pointer; color: #fff; background: linear-gradient(#8a3a3a,#6d2626); box-shadow: 0 3px 0 #4a1717; }
.ss-trade-accept { border: 0; border-radius: 9px; padding: 9px 22px; font-weight: 800; font-size: 13px; cursor: pointer; color: #fff; background: linear-gradient(#3aa0ff,#2b6fd6); box-shadow: 0 3px 0 #1e4f9e; }
.ss-trade-accept.on { background: linear-gradient(#31b06a,#1f8a4e); box-shadow: 0 3px 0 #145f36; }
.ss-trade-cancel:active, .ss-trade-accept:active { transform: translateY(2px); }
.ss-trade.locked .ss-trade-side:first-child { opacity: .82; }
.ss-trade-pick { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; background: #0e1726; }
.ss-trade-pickh { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 14px; padding: 12px 14px; border-bottom: 1px solid #22314a; }
.ss-trade-pickx { background: none; border: 0; color: #9fb2cc; font-size: 22px; cursor: pointer; }
.ss-trade-pickgrid { flex: 1; overflow-y: auto; padding: 10px 12px; display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 6px; align-content: start; }
.ss-trade-pk { display: flex; align-items: center; gap: 6px; background: #16233a; border: 1px solid #2a3a54; border-radius: 8px; padding: 6px 8px; cursor: pointer; font-size: 12px; }
.ss-trade-pk:hover { border-color: #4db3ff; }
.ss-trade-pk .picon { transform: scale(.7); transform-origin: left center; margin: -8px -4px -8px 0; }
.ss-trade-pk .bm-iicon { width: 24px; height: 24px; }
.ss-trade-pkn { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; overflow: hidden; }
.ss-trade-pkn { white-space: nowrap; text-overflow: ellipsis; }
.ss-trade-pkn small { color: #8a99ad; font-size: 10px; }
.ss-trade-picksearch { padding: 8px 12px 4px; }
.ss-trade-picksearch input { width: 100%; box-sizing: border-box; background: #0c1320; border: 1px solid #27374e; color: #eaf1ff; border-radius: 8px; padding: 8px 12px; font-size: 13px; }
.ss-trade-picksearch input:focus { outline: none; border-color: #4a6fa0; }
.ss-trade-pickpager { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; padding: 8px 12px 12px; }
.ss-trade-pg { min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid #2a3346; background: #0e1726; color: #cdd8ea; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 700; font-family: inherit; }
.ss-trade-pg:hover:not(:disabled):not(.on) { border-color: #4db3ff; color: #fff; }
.ss-trade-pg.on { background: #2f8f4f; border-color: #2f8f4f; color: #fff; cursor: default; }
.ss-trade-pg:disabled { opacity: .38; cursor: default; }
.ss-trade-pgell { color: #6f86a6; padding: 0 2px; }
@media (max-width: 560px) { .ss-trade-cols { grid-template-columns: 1fr; } .ss-trade-cur input { width: 64px; } }