/* ============ Pokémon GO Browser — estilos ============ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root {
  --accent:#4dabf7; --accent2:#845ef7; --good:#51cf66; --bad:#ff6b6b; --warn:#ffd43b;
  --radius:14px; --nav-h:64px; --top-h:56px;
}
body[data-theme="dark"] {
  --bg:#101418; --bg2:#1a2129; --bg3:#242e39; --fg:#e9eef4; --fg2:#9db0c2; --line:#2e3a47;
}
body[data-theme="light"] {
  --bg:#eef3f7; --bg2:#ffffff; --bg3:#dfe8f0; --fg:#1c2733; --fg2:#5d7186; --line:#c9d6e2;
}
html,body { height:100%; overflow:hidden; }
body {
  font-family:'Segoe UI',system-ui,Arial,sans-serif; background:var(--bg); color:var(--fg);
  user-select:none; touch-action:manipulation;
}
.hidden { display:none !important; }
.tiny { font-size:.72em; color:var(--fg2); }
button { font-family:inherit; }

/* ---------- Splash ---------- */
#splash {
  position:fixed; inset:0; z-index:99; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  background:linear-gradient(160deg,#1b2a4a 0%,#14405a 45%,#0d3b33 100%);
  color:#fff; overflow:hidden;
}
#splashArt { position:absolute; inset:0; pointer-events:none; }
.splashMon {
  position:absolute; width:130px; opacity:0; filter:drop-shadow(0 8px 16px rgba(0,0,0,.5));
  animation:splashFloat 7s ease-in-out infinite;
}
@keyframes splashFloat {
  0%,100% { opacity:0; transform:translateY(24px) scale(.9); }
  18%,80% { opacity:.85; transform:translateY(0) scale(1); }
  50% { transform:translateY(-14px) scale(1.04); }
}
.splashDica { position:absolute !important; bottom:26px; left:0; right:0; text-align:center; font-size:.8em; opacity:.75; padding:0 20px; z-index:2; }
#splash > *:not(#splashArt):not(.splashDica) { position:relative; z-index:2; }
.splash-logo { font-size:2.6em; font-weight:900; text-shadow:0 3px 12px #000; }
.splash-logo span { color:#ffd43b; }
.splash-sub { opacity:.7; letter-spacing:3px; text-transform:uppercase; font-size:.8em; }
.splash-bar { width:260px; height:8px; background:rgba(255,255,255,.15); border-radius:6px; overflow:hidden; }
#splashFill { height:100%; width:0%; background:#ffd43b; border-radius:6px; transition:width .3s; }
#splashMsg { font-size:.85em; opacity:.8; }

/* ---------- Layout ---------- */
#app { height:100%; display:flex; flex-direction:column; }
#topbar {
  height:var(--top-h); display:flex; align-items:center; gap:10px; padding:0 12px;
  background:var(--bg2); border-bottom:1px solid var(--line); z-index:10;
}
#playerChip { display:flex; align-items:center; gap:8px; cursor:pointer; }
#avatarMini {
  width:38px; height:38px; border-radius:50%; background:var(--bg3);
  display:flex; align-items:center; justify-content:center; font-size:1.3em;
  border:2px solid var(--accent);
}
#playerName { font-weight:700; font-size:.9em; }
.xpTrack { width:110px; height:5px; background:var(--bg3); border-radius:4px; overflow:hidden; margin:2px 0; }
#xpFill { height:100%; width:0%; background:var(--accent); }
#weatherChip { margin-left:auto; font-size:1.5em; cursor:pointer; }
#topRight { display:flex; align-items:center; gap:10px; font-weight:700; font-size:.85em; }
.iconBtn { background:none; border:none; font-size:1.2em; cursor:pointer; color:var(--fg); }
#notifBadge {
  position:absolute; top:-4px; right:-6px; background:var(--bad); color:#fff;
  font-size:.55em; font-weight:800; border-radius:10px; padding:1px 5px; min-width:16px;
}
.navIcon { width:26px; height:26px; image-rendering:pixelated; }

#screens { flex:1; position:relative; overflow:hidden; }
.screen {
  position:absolute; inset:0; overflow-y:auto; padding:12px;
  opacity:0; pointer-events:none; transition:opacity .2s; background:var(--bg);
}
.screen.active { opacity:1; pointer-events:auto; }
#screen-map { padding:0; overflow:hidden; }

#navbar {
  height:var(--nav-h); display:flex; background:var(--bg2); border-top:1px solid var(--line);
  overflow-x:auto; z-index:10;
}
.navBtn {
  flex:1; min-width:60px; border:none; background:none; color:var(--fg2); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-size:1.15em; transition:.15s;
}
.navBtn span { font-size:.55em; font-weight:600; }
.navBtn.active { color:var(--accent); }
.navBtn:hover { color:var(--fg); }

/* ---------- Mapa ---------- */
#mapCanvas { width:100%; height:100%; display:block; cursor:crosshair; }
#mapGeo { position:absolute; inset:0; z-index:1; background:var(--bg3); }
/* o #mapGeo cria um stacking context próprio, então o HUD só precisa ficar acima dele
   dentro da tela do mapa — sem vazar por cima das telas de captura/batalha (z-index 40+) */
#mapHud, #radarBtn, #joystick { z-index:2; }
.geoPlayer {
  width:44px; height:44px; border-radius:50%; border:4px solid #4dabf7;
  background:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.45em; box-shadow:0 4px 12px rgba(0,0,0,.4);
}
body[data-theme="dark"] .geoPlayer { background:#1a2129; }
/* caixa fixa: alinha os Pokémon pela BASE (ficam "de pé" no ponto), independente do tamanho */
.geoSpawnBox {
  width:66px; height:60px; display:flex; align-items:flex-end; justify-content:center;
  cursor:pointer; position:relative;
}
/* selo de clima impulsionado (weather boost) — igual ao GO, aparece sobre o Pokémon */
.geoSpawnBox .wxBoost {
  position:absolute; top:-2px; left:50%; transform:translateX(-50%);
  font-size:13px; line-height:1; padding:1px 3px; border-radius:8px; z-index:2;
  background:rgba(255,255,255,.85); box-shadow:0 0 6px rgba(120,200,255,.9);
  animation:wxPulse 1.8s ease-in-out infinite;
}
@keyframes wxPulse { 0%,100%{ box-shadow:0 0 5px rgba(120,200,255,.7) } 50%{ box-shadow:0 0 11px rgba(120,200,255,1) } }
.geoSpawn {
  /* tamanho NATURAL do sprite (mantém a proporção real entre pequenos e grandes), com teto */
  width:auto; height:auto; max-width:64px; max-height:58px;
  image-rendering:pixelated;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.35));
}
/* PokéStop: poste azul com disco (fica roxo quando tem isca/lure) */
.geoStop {
  width:26px; height:34px; cursor:pointer; position:relative;
}
.geoStop::before { content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:4px; height:16px; background:#8aa0b8; border-radius:2px; }
.geoStop::after {
  content:''; position:absolute; left:50%; top:0; transform:translateX(-50%); width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #7cc4ff, #2276cc); border:3px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,.35);
}
.geoStop.lure::after { background:radial-gradient(circle at 35% 35%, #f19bff, #a12fd6); box-shadow:0 0 10px #d46bff; }
.geoStop.lure::before { background:#c07be0; }
/* Ginásio: disco com torre, cor do time via variável --gcor */
.geoGym {
  width:38px; height:38px; border-radius:12px; cursor:pointer; position:relative;
  background:linear-gradient(145deg, var(--gcor,#8a8f98), color-mix(in srgb, var(--gcor,#8a8f98) 60%, #000));
  border:2px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
/* badge de reide sobre o ginásio */
.geoRaidBadge {
  position:absolute; top:-10px; right:-10px; min-width:20px; height:20px; padding:0 4px;
  background:#e23b3b; color:#fff; border:2px solid #fff; border-radius:11px;
  font-size:11px; font-weight:900; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 5px rgba(0,0,0,.4);
}
.geoRaidEgg { animation:balaoFlutua 2s ease-in-out infinite; }
/* isca (lure) no mapa: módulo rosa hexagonal com brilho e pétalas caindo */
.geoLure { width:34px; height:34px; position:relative; animation:lureBob 2.4s ease-in-out infinite; }
.geoLure .lureDev { position:absolute; left:50%; top:50%; width:30px; height:30px; transform:translate(-50%,-50%); filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)); z-index:2; }
.geoLure .lureHalo { /* pulso de atração ao redor */
  position:absolute; left:50%; top:50%; width:30px; height:30px; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle, rgba(31,188,207,.55), transparent 70%);
  animation:lureHalo 1.8s ease-out infinite;
}
.geoLure .lureConf { position:absolute; left:50%; top:50%; width:5px; height:5px; border-radius:1px; opacity:0; }
.geoLure .c1 { background:#8ef23a; animation:lureCai 1.9s linear infinite; }
.geoLure .c2 { background:#1fbccf; animation:lureCai 1.9s linear .63s infinite; }
.geoLure .c3 { background:#ffd166; animation:lureCai 1.9s linear 1.26s infinite; }
@keyframes lureBob { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3px) } }
@keyframes lureHalo { 0%{ transform:translate(-50%,-50%) scale(.6); opacity:.7 } 100%{ transform:translate(-50%,-50%) scale(2.1); opacity:0 } }
@keyframes lureCai { 0%{ opacity:0; transform:translate(-50%,-50%) translateY(-10px) rotate(0) } 25%{ opacity:1 } 100%{ opacity:0; transform:translate(-50%,-50%) translateY(20px) rotate(220deg) } }
.geoRota {
  width:28px; height:28px; border-radius:50%; background:var(--accent2); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:900;
  border:3px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,.4);
}
.geoRota.feito { background:var(--good); }
.geoBalao {
  position:relative; width:46px; height:60px; cursor:pointer;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.45));
  animation:balaoFlutua 2.6s ease-in-out infinite;
}
.geoBalao .balaoCorpo {
  position:absolute; top:0; left:50%; transform:translateX(-50%); width:42px; height:42px;
  border-radius:50% 50% 46% 46%; background:radial-gradient(circle at 34% 28%, #767c86 0 18%, #3a3f47 70%, #24272d 100%);
  border:2px solid #14161a;
}
.geoBalao .balaoR {
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  color:#e23b3b; font-weight:900; font-size:18px; text-shadow:0 1px 2px #000; letter-spacing:-1px;
}
.geoBalao .balaoCesta {
  position:absolute; top:44px; left:50%; transform:translateX(-50%); width:16px; height:11px;
  background:linear-gradient(#6b4423,#4a2f18); border:1px solid #2e1c0d; border-radius:2px 2px 3px 3px;
}
.geoBalao .balaoCesta::before, .geoBalao .balaoCesta::after {
  content:''; position:absolute; top:-8px; width:1px; height:8px; background:#333;
}
.geoBalao .balaoCesta::before { left:2px; } .geoBalao .balaoCesta::after { right:2px; }
@keyframes balaoFlutua { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }

/* ---------- ovo CSS + animação de rachar ---------- */
.ovoOverlay {
  position:fixed; inset:0; z-index:92; display:flex; flex-direction:column;
  align-items:center; justify-content:center; cursor:pointer;
  background:radial-gradient(ellipse at 50% 45%, #3d5a3a 0%, #16281c 70%);
  animation:fadeIn .3s;
}
/* incubadora (cápsula) com ovo balançando dentro */
.incubViz { position:relative; width:46px; height:64px; flex:0 0 auto; }
.incubViz .incubCap { width:46px; height:64px; display:block; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.incubViz.ativa .incubCap { filter:drop-shadow(0 0 5px rgba(47,110,224,.8)); }
.incubViz .incubOvo {
  position:absolute; left:50%; bottom:16px; width:15px; height:19px; transform:translateX(-50%);
  background:radial-gradient(circle at 40% 32%, #fffdf5, #ead9a6 70%, #d3bd80);
  border-radius:50% 50% 48% 48% / 60% 60% 40% 40%;
  box-shadow:0 1px 2px rgba(0,0,0,.3);
}
.incubViz.ativa .incubOvo { transform-origin:50% 92%; animation:incubWobble 1.1s ease-in-out infinite; }
@keyframes incubWobble { 0%,100%{ transform:translateX(-50%) rotate(-9deg) } 50%{ transform:translateX(-50%) rotate(9deg) } }
.ovoDica { color:#fff; font-size:.95em; font-weight:600; margin-top:14px; opacity:.9; text-shadow:0 2px 6px #000; animation:dicaPisca 1.3s ease-in-out infinite; }
@keyframes dicaPisca { 0%,100%{ opacity:.45 } 50%{ opacity:1 } }
.ovoCss.ovoPronto { animation:ovoEspera 1.6s ease-in-out infinite; }
@keyframes ovoEspera { 0%,100%{ transform:rotate(-3deg) } 50%{ transform:rotate(3deg) } }
.ovoTitulo { color:#fff; font-size:1.6em; font-weight:900; text-shadow:0 2px 8px #000; margin-bottom:16px; }
.ovoPalco { position:relative; height:220px; display:flex; align-items:center; justify-content:center; }
.ovoCss {
  position:relative; width:130px; height:165px;
  background:radial-gradient(circle at 38% 28%, #fffef6 0%, #f2ecd8 55%, #ded4b6 100%);
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow:inset -10px -14px 22px rgba(0,0,0,.14), 0 14px 22px rgba(0,0,0,.35);
}
.ovoMini { width:56px; height:70px; margin:4px auto 8px; box-shadow:inset -4px -6px 10px rgba(0,0,0,.12), 0 5px 8px rgba(0,0,0,.25); }
.ovoMancha { position:absolute; border-radius:50%; background:rgba(120,180,110,.55); }
.ovoMancha.m1 { width:26%; height:20%; top:22%; left:18%; }
.ovoMancha.m2 { width:20%; height:16%; top:48%; right:14%; }
.ovoMancha.m3 { width:16%; height:13%; bottom:16%; left:30%; }
.ovoRachadura {
  position:absolute; opacity:0; height:3px; background:#5d5240; border-radius:2px;
  box-shadow:0 1px 0 rgba(255,255,255,.35);
}
.ovoRachadura.r1 { width:36%; top:34%; left:26%; transform:rotate(24deg); }
.ovoRachadura.r2 { width:46%; top:48%; left:20%; transform:rotate(-18deg); }
.ovoRachadura.r3 { width:56%; top:60%; left:16%; transform:rotate(9deg); }
.ovoRachadura.mostra { opacity:1; transition:opacity .1s; }
.ovoCss.balanca { animation:ovoBalanca .8s ease-in-out infinite; transform-origin:50% 92%; }
@keyframes ovoBalanca {
  0%,100% { transform:rotate(0); }
  20% { transform:rotate(-9deg); }
  50% { transform:rotate(7deg); }
  75% { transform:rotate(-4deg); }
}
.ovoOverlay.ovoFlash::after {
  content:''; position:absolute; inset:0; background:#fff;
  animation:evoFlashAn .6s ease-out forwards;
}
.ovoFilhote { image-rendering:pixelated; animation:evoPop .5s ease-out; }
.ovoNome { color:#fff; font-size:1.15em; font-weight:700; margin-top:14px; text-shadow:0 2px 6px #000; }
.ovoGrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; }
.ovoCard { text-align:center; cursor:pointer; }
.ovoCard:hover { border-color:var(--accent); }
#mapHud { position:absolute; top:10px; left:10px; right:10px; display:flex; flex-direction:column; gap:6px; pointer-events:none; }
#buddyChip, #eventBanner {
  pointer-events:auto; background:color-mix(in srgb, var(--bg2) 88%, transparent);
  border:1px solid var(--line); border-radius:20px; padding:5px 12px; font-size:.8em;
  display:flex; align-items:center; gap:6px; width:fit-content;
}
#eventBanner { border-color:var(--warn); }
#joystick {
  position:absolute; bottom:22px; left:22px; width:110px; height:110px; border-radius:50%;
  background:color-mix(in srgb, var(--bg2) 55%, transparent); border:2px solid var(--line);
  display:none;
}
#joyKnob {
  position:absolute; width:46px; height:46px; border-radius:50%; background:var(--accent);
  left:32px; top:32px; opacity:.9;
}
@media (pointer:coarse) { #joystick { display:block; } }
#radarBtn {
  position:absolute; bottom:22px; right:22px; width:58px; height:58px; border-radius:50%;
  border:2px solid var(--line); background:var(--bg2); color:var(--fg); font-size:1.6em;
  cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.35); transition:.15s;
}
#radarBtn:hover { transform:scale(1.08); border-color:var(--accent); }
#radarBtn:active { transform:scale(.94); }

/* ---------- Avatar empilhado ---------- */
.avatarStack { display:flex; flex-direction:column; align-items:center; line-height:1.05; width:fit-content; margin:0 auto; }
.avRow { text-align:center; }
.avChapeu { font-size:.9em; margin-bottom:-4px; }
.avRosto { font-size:1.15em; }
.avTronco { display:flex; align-items:center; gap:2px; }
.avRoupa { font-size:1.1em; }
.avMao { font-size:.7em; width:1em; }
.avCalca { font-size:1em; margin-top:-2px; }
.avSapato { font-size:.8em; }

/* ---------- Overlays ---------- */
.overlay { position:fixed; inset:0; z-index:40; background:var(--bg); }

/* ---------- Componentes ---------- */
.card {
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px; margin-bottom:10px;
}
.btn {
  padding:11px 18px; border:none; border-radius:12px; font-weight:700; cursor:pointer;
  background:var(--accent); color:#fff; font-size:.95em; transition:.15s;
}
.btn:hover { filter:brightness(1.12); }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.btn.sec { background:var(--bg3); color:var(--fg); }
.btn.danger { background:var(--bad); }
.btn.good { background:var(--good); }
.btn.small { padding:6px 12px; font-size:.8em; border-radius:9px; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.grow { flex:1; }
h2.screenTitle { margin:4px 0 12px; font-size:1.3em; }
input[type=text], input[type=search], select {
  background:var(--bg2); color:var(--fg); border:1px solid var(--line); border-radius:10px;
  padding:9px 12px; font-size:.95em; outline:none; width:100%;
}
input:focus, select:focus { border-color:var(--accent); }

/* grid de pokémon */
.pokeGrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(105px,1fr)); gap:10px; }
.pokeCell {
  background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:8px 4px;
  text-align:center; cursor:pointer; position:relative; transition:.12s;
}
.pokeCell:hover { transform:translateY(-3px); border-color:var(--accent); }
.pokeCell img { width:72px; height:72px; }
.pokeCell .cp { font-size:.7em; color:var(--fg2); }
.pokeCell .nm { font-size:.8em; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.badges { position:absolute; top:4px; left:6px; right:6px; display:flex; justify-content:space-between; font-size:.75em; pointer-events:none; }

/* ===== foto real do local (nível do chão) em pokéstops/ginásios ===== */
.poiFoto { position:relative; width:calc(100% + 32px); margin:-16px -16px 10px; height:150px; overflow:hidden; border-radius:12px 12px 0 0; background:#1c2740; display:flex; align-items:center; justify-content:center; }
.poiFoto img { width:100%; height:100%; object-fit:cover; display:block; }
.poiFotoGrad { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,.35)); pointer-events:none; }
.poiFotoLoad { color:#9fb0c8; font-size:.85em; }
/* sem foto disponível: disco estilizado (nada de imagem de cima) */
.poiFoto.semFoto { background:repeating-linear-gradient(45deg,#243350,#243350 10px,#2b3c5c 10px,#2b3c5c 20px); }
.poiFoto.semFoto::before { content:'📍'; font-size:2.4em; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }

/* ===== marcadores (shiny/lucky/sombroso/etc) — pílulas estilizadas ===== */
.pokeCell .pbadges { position:absolute; top:4px; left:4px; right:4px; z-index:3; display:flex; flex-wrap:wrap; gap:2px; pointer-events:none; }
.pbadge {
  display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:17px; border-radius:50%; font-size:.6rem; line-height:1;
  border:1px solid rgba(255,255,255,.5); box-shadow:0 1px 3px rgba(0,0,0,.45);
  overflow:hidden;
}
.pbadges.big { position:static; display:inline-flex; vertical-align:middle; gap:5px; }
.pbadges.big .pbadge {
  width:auto; height:auto; border-radius:999px; padding:3px 9px; gap:4px;
  font-size:.72rem; font-weight:700; color:#1b2130;
}
.pbadge.b-shiny    { background:linear-gradient(135deg,#ffe259,#ffa751); }
.pbadge.b-lucky    { background:linear-gradient(135deg,#43e97b,#38f9d7); }
.pbadge.b-shadow   { background:linear-gradient(135deg,#2a0a53,#7c3aed); color:#fff; box-shadow:0 0 8px rgba(124,58,237,.8); }
.pbadge.b-purified { background:linear-gradient(135deg,#eafaff,#8ec5fc); }
.pbadge.b-mega     { background:linear-gradient(135deg,#f857a6,#ff5858); color:#fff; }
.pbadge.b-gmax     { background:linear-gradient(135deg,#f83600,#f9d423); }
.pbadge.b-fav      { background:linear-gradient(135deg,#ffd93b,#ff9a3b); }
.pbadge.b-buddy    { background:linear-gradient(135deg,#a1c4fd,#c2e9fb); }
.pbadge.b-shiny    { animation:badgeGlow 1.6s ease-in-out infinite alternate; }
@keyframes badgeGlow { from{ box-shadow:0 1px 3px rgba(0,0,0,.45);} to{ box-shadow:0 0 9px rgba(255,213,74,.95);} }

/* ===== Aura SHADOW (sombroso) — diferencia dos Pokémon normais ===== */
.pokeCell.shadowCell {
  border-color:#7c3aed;
  box-shadow:0 0 0 1px #7c3aed, 0 0 12px rgba(124,58,237,.55);
  background:radial-gradient(circle at 50% 40%, rgba(124,58,237,.18), var(--bg2) 70%);
}
.pokeCell.shadowCell img { filter:drop-shadow(0 0 6px rgba(124,58,237,.9)); }
/* halo de fumaça roxa que pulsa atrás do sprite (coleção, detalhe e captura) */
.shadowAura { position:relative; }
.shadowAura::before {
  content:''; position:absolute; inset:-8%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle, rgba(124,58,237,.55), rgba(88,28,135,.25) 55%, transparent 72%);
  filter:blur(2px); animation:shadowPulse 2.2s ease-in-out infinite;
}
@keyframes shadowPulse { 0%,100%{ transform:scale(1); opacity:.75 } 50%{ transform:scale(1.12); opacity:1 } }
.pdSprite.shadowAura { filter:drop-shadow(0 0 10px rgba(124,58,237,.95)); }
.catchMon.shadowAura img { filter:drop-shadow(0 0 12px rgba(124,58,237,.95)); }

/* ===== Barra de filtro de TIPO da Pokédex (ícones reais, roláveis) ===== */
.dexTipoBar { display:flex; gap:6px; overflow-x:auto; padding:4px 2px 8px; margin-bottom:6px; -webkit-overflow-scrolling:touch; }
.dexTipoBar::-webkit-scrollbar { height:5px; }
.dexTipoBar::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
.dexTipoChip {
  flex:0 0 auto; background:var(--bg2); border:2px solid var(--line); border-radius:12px;
  padding:4px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; transition:.12s; color:var(--fg2); font-size:.8em; font-weight:700;
}
.dexTipoChip .typeMedal { width:34px; height:34px; }
.dexTipoChip:hover { transform:translateY(-2px); }
.dexTipoChip.ativo { border-color:var(--accent); box-shadow:0 0 8px var(--accent); background:var(--bg3, var(--bg2)); }

/* ===== COMBATE: contagem, golpes por tipo, troca retrô ===== */
.bSprite { position:relative; }

/* contagem 3-2-1 */
.battleCountdown {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:5em; font-weight:900; color:#fff; text-shadow:0 4px 18px rgba(0,0,0,.6);
  pointer-events:none; z-index:20;
}
.battleCountdown.pulse { animation:cdPulse .6s ease-out; }
@keyframes cdPulse { 0%{ transform:scale(2.4); opacity:0 } 30%{ opacity:1 } 100%{ transform:scale(1); opacity:.15 } }

/* projétil de golpe por tipo */
.golpeProj {
  position:absolute; left:50%; z-index:15; pointer-events:none;
  filter:drop-shadow(0 0 8px var(--corGolpe));
}
.golpeProj .typeMedal { box-shadow:0 0 14px var(--corGolpe); }
.golpeSobe { animation:golpeSobe .44s ease-in forwards; }
.golpeDesce { animation:golpeDesce .44s ease-in forwards; }
.golpeCarregado.golpeSobe { animation:golpeSobe .56s cubic-bezier(.5,-0.3,.7,1) forwards; }
.golpeCarregado.golpeDesce { animation:golpeDesce .56s cubic-bezier(.5,-0.3,.7,1) forwards; }
@keyframes golpeSobe {
  0%   { top:60%; transform:translate(-50%,0) scale(.5) rotate(0deg); opacity:0; }
  20%  { opacity:1; }
  100% { top:22%; transform:translate(-50%,0) scale(1.15) rotate(360deg); opacity:1; }
}
@keyframes golpeDesce {
  0%   { top:22%; transform:translate(-50%,0) scale(.5) rotate(0deg); opacity:0; }
  20%  { opacity:1; }
  100% { top:58%; transform:translate(-50%,0) scale(1.15) rotate(-360deg); opacity:1; }
}
/* impacto no alvo */
.golpeImpacto {
  position:absolute; left:50%; top:45%; width:70px; height:70px; margin:-35px 0 0 -35px;
  border-radius:50%; pointer-events:none; z-index:16;
  background:radial-gradient(circle, var(--corGolpe), transparent 68%);
  animation:golpeImpacto .5s ease-out forwards;
}
.golpeImpacto.grande { width:120px; height:120px; margin:-60px 0 0 -60px; }
@keyframes golpeImpacto { 0%{ transform:scale(.3); opacity:.95 } 100%{ transform:scale(1.5); opacity:0 } }
.flashGolpe { animation:flashGolpe .24s ease-out; }
@keyframes flashGolpe { 0%{ filter:brightness(1) } 40%{ filter:brightness(1.8) } 100%{ filter:brightness(1) } }

/* troca estilo retrô: Pokémon "sai da bola" (estica de baixo pra cima) */
.goEnviar { animation:goEnviar .6s cubic-bezier(.2,.9,.3,1.2); transform-origin:center bottom; }
@keyframes goEnviar {
  0%   { transform:scale(.05,.6); opacity:0; filter:brightness(3); }
  40%  { transform:scale(1.1,1); opacity:1; filter:brightness(2); }
  70%  { transform:scale(.95,1); filter:brightness(1.2); }
  100% { transform:scale(1,1); filter:brightness(1); }
}

/* cooldown visual do ataque rápido */
.goMoveBtn.emCd { opacity:.5; pointer-events:none; position:relative; overflow:hidden; }
.goMoveBtn.emCd::after {
  content:''; position:absolute; left:0; bottom:0; height:100%; width:100%;
  background:rgba(0,0,0,.35); transform-origin:left; animation:cdSweep var(--cd,.5s) linear forwards;
}
@keyframes cdSweep { from{ transform:scaleX(1) } to{ transform:scaleX(0) } }

/* envio de Pokémon: bola arremessada que abre (usa .ball3d do tipo da bola) */
.envioBola { position:absolute; left:50%; top:42%; width:40px !important; height:40px !important; margin:-20px 0 0 -20px; z-index:6; }
.envioBola.envioToss { animation:envioToss .95s ease-out; }
@keyframes envioToss { 0%{ transform:translateY(110px) scale(.45) rotate(0); opacity:0 } 25%{ opacity:1 } 100%{ transform:translateY(0) scale(1) rotate(720deg); opacity:1 } }
.envioBola.envioAbre { animation:envioAbre .2s ease-out forwards; }
@keyframes envioAbre { to { transform:scale(2.3); opacity:0; filter:brightness(3.5) } }
/* Poké Ball abrindo quando o Pokémon escapa */
.ball3d.bolaAbre { animation:bolaAbre .24s ease-out; }
@keyframes bolaAbre { 0%{ transform:scale(1) } 50%{ transform:scale(1.35); filter:brightness(2.6) } 100%{ transform:scale(1) } }

/* ===== Tela de espera do PvP (bloqueia o jogo até o oponente entrar) ===== */
.pvpEspera {
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  background:rgba(6,10,16,.86); backdrop-filter:blur(4px);
}
.pvpEsperaBox {
  background:var(--bg2); border:1px solid var(--line); border-radius:18px; padding:28px 26px;
  text-align:center; max-width:320px; box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.pvpEsperaTxt { font-weight:800; font-size:1.05em; margin-top:10px; }
.pvpSpinner {
  width:52px; height:52px; margin:0 auto; border-radius:50%;
  border:5px solid var(--line); border-top-color:var(--accent); animation:pvpSpin .9s linear infinite;
}
@keyframes pvpSpin { to { transform:rotate(360deg); } }

/* spawn shiny no mapa real: brilho dourado + faísca */
.spawnShiny .geoSpawn { filter:drop-shadow(0 0 6px gold) drop-shadow(0 0 10px #fff3); }
.spawnShiny::after { content:'✨'; position:absolute; top:-2px; right:2px; font-size:14px; }

/* ===== Skins de treinador (avatar) ===== */
.avatarSkin { image-rendering:pixelated; object-fit:contain; display:block; margin:0 auto; }
.geoPlayer img { width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
.skinGrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:8px; }
.skinChip {
  background:var(--bg2); border:2px solid var(--line); border-radius:12px; padding:6px 2px;
  text-align:center; cursor:pointer; transition:.12s;
}
.skinChip img { width:56px; height:56px; object-fit:contain; image-rendering:pixelated; }
.skinChip:hover { transform:translateY(-2px); }
.skinChip.sel { border-color:var(--accent); box-shadow:0 0 8px var(--accent); }
/* área rolável de skins (não cresce a tela toda conforme você tem mais) */
.skinScroll { max-height:300px; overflow-y:auto; padding:4px; border:1px solid var(--line); border-radius:12px; -webkit-overflow-scrolling:touch; }
.skinScroll::-webkit-scrollbar { width:6px; } .skinScroll::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
.amigoSkin { width:40px; height:40px; object-fit:contain; image-rendering:pixelated; flex:0 0 auto; }

/* sub-abas (loja, eventos) */
.subTabs { display:flex; gap:6px; margin-bottom:12px; border-bottom:1px solid var(--line); }
.subTab {
  flex:1; padding:9px 8px; border:none; background:transparent; color:var(--fg2);
  font-weight:700; cursor:pointer; border-bottom:3px solid transparent; font-size:.9em;
}
.subTab.ativo { color:var(--fg); border-bottom-color:var(--accent); }

/* calendário de eventos */
.evItem { cursor:pointer; padding:8px 12px; }
.evItem:hover { border-color:var(--accent); }
.evItem.evPassou { opacity:.5; }
.evItem.evAgora { border-color:var(--warn); box-shadow:0 0 8px var(--warn); }

/* calendário em grade */
.calTopo { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.calGrid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.calHead { color:var(--fg2); font-size:.72em; font-weight:800; text-align:center; margin-bottom:4px; }
.calCel { min-height:46px; background:var(--bg2); border:1px solid var(--line); border-radius:8px; padding:3px; cursor:pointer; position:relative; }
.calCel.vazio { background:transparent; border:none; cursor:default; }
.calCel.temEv:hover { border-color:var(--accent); }
.calCel.hoje { border-color:var(--accent); }
.calCel.sel { background:var(--bg3); border-color:var(--warn); }
.calNum { font-size:.78em; font-weight:700; }
.calPontos { display:flex; gap:2px; flex-wrap:wrap; margin-top:3px; }
.calPonto { width:6px; height:6px; border-radius:50%; display:inline-block; }

/* berry na mão (no lugar da Poké Ball) e efeito no Pokémon */
.berryNaMao { width:56px; height:56px; display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.berryNaMao img, .berryNaMao .itemIcon { width:46px; height:46px; }
.catchMon.berryAtivo { position:relative; }
.catchMon.berryAtivo::after {
  content:''; position:absolute; inset:-10%; border-radius:50%; z-index:-1; pointer-events:none;
  background:radial-gradient(circle, rgba(120,220,110,.5), transparent 70%);
  animation:berryAura 1.6s ease-in-out infinite;
}
@keyframes berryAura { 0%,100%{ transform:scale(1); opacity:.6 } 50%{ transform:scale(1.15); opacity:1 } }
.catchMon.berryPulso { animation:berryPulso .6s ease-out; }
@keyframes berryPulso { 0%{ filter:brightness(2) saturate(1.5) } 100%{ filter:brightness(1) } }

/* ===== Golpes no detalhe do Pokémon ===== */
.pdBola { display:inline-flex; vertical-align:middle; margin-left:4px; }
.pdBola img, .pdBola .itemIcon { width:22px; height:22px; }
.moveCard {
  background:var(--bg2); border:1px solid var(--line); border-radius:10px;
  padding:8px 10px; margin:6px 0; border-left:4px solid var(--line);
}
.moveCard.mvFast { border-left-color:#8bd; }
.moveCard.mvCharged { border-left-color:#e6a; }
.moveRow { display:flex; align-items:center; gap:10px; }
.moveRow .typeMedal { width:28px; height:28px; flex:0 0 auto; }
.moveInfo { display:flex; flex-direction:column; line-height:1.2; min-width:0; flex:1; }
.moveInfo b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.moveNums { display:flex; gap:10px; font-size:.82em; font-weight:700; white-space:nowrap; }
.moveNums span { color:var(--fg2); }

/* ===== Troca forçada ao desmaiar (combate) ===== */
.escolherMon {
  position:absolute; inset:0; z-index:18; display:flex; align-items:center; justify-content:center;
  background:rgba(6,10,16,.82); backdrop-filter:blur(3px);
}
.escolherBox {
  background:var(--bg2); border:1px solid var(--line); border-radius:16px; padding:18px 16px;
  max-width:340px; width:88%; box-shadow:0 16px 50px rgba(0,0,0,.5);
}
.escolherTitulo { font-weight:800; text-align:center; margin-bottom:12px; line-height:1.3; }
.escolherBox .pokeGrid { max-height:52vh; overflow-y:auto; }

/* ===== Animação de TROCA (estilo Red/Blue do Game Boy) ===== */
.trocaOverlay {
  position:fixed; inset:0; z-index:9998; display:flex; flex-direction:column;
  align-items:center; justify-content:center; overflow:hidden;
  background:radial-gradient(circle at 50% 40%, #10305a, #050a14 75%);
}
.trocaOverlay.flash { animation:trocaFlash .4s ease-out; }
@keyframes trocaFlash { 0%{ filter:brightness(3.5) } 100%{ filter:brightness(1) } }
.trocaTitulo { color:#fff; font-weight:900; font-size:1.4em; letter-spacing:1px; margin-bottom:10px; text-shadow:0 2px 8px rgba(0,0,0,.6); }
.trocaCena { position:relative; width:min(320px,86vw); height:190px; }
/* "cabo de link" pontilhado atravessando a cena */
.trocaCabo {
  position:absolute; top:50%; left:-10%; width:120%; height:4px; transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,#7fd7ff 0 12px,transparent 12px 24px); opacity:.5;
  animation:trocaCabo 1s linear infinite;
}
@keyframes trocaCabo { to { background-position:24px 0; } }
.trocaMon {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:120px; height:120px; object-fit:contain; image-rendering:pixelated;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));
}
.trocaMon.trocaEncolhe { animation:trocaEncolhe .6s ease-in forwards; }
@keyframes trocaEncolhe { to { transform:translate(-50%,-50%) scale(.04); opacity:0; filter:brightness(4); } }
.trocaMon.trocaSurge { animation:trocaSurge .5s cubic-bezier(.2,.9,.3,1.3); }
@keyframes trocaSurge { 0%{ transform:translate(-50%,-50%) scale(.05); filter:brightness(4) } 60%{ transform:translate(-50%,-50%) scale(1.12) } 100%{ transform:translate(-50%,-50%) scale(1); filter:brightness(1) } }
/* pokébola CSS clássica */
.trocaBall {
  position:absolute; top:50%; left:50%; width:44px; height:44px; margin:-22px 0 0 -22px;
  border-radius:50%; opacity:0; transform:scale(0);
  background:
    radial-gradient(circle at 50% 50%, #fff 0 8px, #222 8px 12px, transparent 12px),
    linear-gradient(#ee1515 0 47%, #222 47% 53%, #f5f5f5 53% 100%);
  border:2px solid #222; box-shadow:0 3px 8px rgba(0,0,0,.5);
}
.trocaBall.mostra { opacity:1; transform:scale(1); transition:.25s; }
.trocaBall.trocaVai { animation:trocaVai .8s ease-in forwards; }
@keyframes trocaVai { to { left:130%; transform:scale(.6) rotate(360deg); } }
.trocaBall.trocaVem { left:-30%; opacity:1; transform:scale(.6); animation:trocaVem .8s ease-out forwards; }
@keyframes trocaVem { from { left:-30%; transform:scale(.6) rotate(-360deg);} to { left:50%; transform:scale(1) rotate(0);} }
.trocaBall.trocaAbre { animation:trocaAbre .3s ease-out forwards; }
@keyframes trocaAbre { to { transform:scale(1.6); filter:brightness(3); opacity:0; } }
.trocaMsg { color:#dfe8f5; margin-top:12px; text-align:center; max-width:86vw; }

/* tipos */
.typeTag {
  display:inline-block; padding:2px 9px; border-radius:20px; font-size:.7em; font-weight:700;
  color:#fff; text-transform:capitalize; margin:1px;
}

/* modal */
.modalBack {
  position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center; padding:16px;
  animation:fadeIn .15s;
}
.modalBox {
  background:var(--bg2); border:1px solid var(--line); border-radius:18px; padding:18px;
  max-width:480px; width:100%; max-height:86vh; overflow-y:auto;
  animation:popIn .18s;
}
@keyframes fadeIn { from{opacity:0} }
@keyframes popIn { from{transform:scale(.92); opacity:0} }

/* toast */
#toastRoot { position:fixed; bottom:calc(var(--nav-h) + 14px); left:50%; transform:translateX(-50%); z-index:80; display:flex; flex-direction:column; gap:6px; align-items:center; }
.toast {
  background:var(--bg2); border:1px solid var(--line); color:var(--fg);
  padding:10px 18px; border-radius:24px; font-size:.88em; font-weight:600;
  box-shadow:0 4px 18px rgba(0,0,0,.35); animation:toastIn .25s;
  max-width:86vw; text-align:center;
}
@keyframes toastIn { from{transform:translateY(16px); opacity:0} }

/* ---------- Captura ---------- */
#catchOverlay { display:flex; flex-direction:column; }
.catchArena {
  flex:1; position:relative; overflow:hidden;
  /* cenário padrão de captura: céu ao amanhecer + gramado subindo até os pés do Pokémon */
  background:
    radial-gradient(circle at 80% 12%, rgba(255,240,190,.9) 0 6%, rgba(255,225,150,.5) 7%, transparent 18%), /* sol */
    linear-gradient(180deg, #8fd3ff 0%, #bfe3f7 20%, #eaf6d8 32%, #86c463 38%, #5ba24d 100%); /* céu → campo bem alto */
}
/* colinas ao fundo (logo acima da grama da frente) */
.catchArena::before {
  content:''; position:absolute; left:-5%; right:-5%; bottom:62%; height:20%; z-index:0;
  background:radial-gradient(ellipse 60% 100% at 25% 100%, #79b85a 0 60%, transparent 61%),
             radial-gradient(ellipse 70% 100% at 75% 100%, #6fae52 0 60%, transparent 61%);
  opacity:.9;
}
/* faixa de grama da frente — sobe até ~66% pra o Pokémon ficar plantado no chão */
.catchArena::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:66%; z-index:0;
  background:linear-gradient(180deg, #6fbb52 0%, #57a044 100%);
  box-shadow:inset 0 8px 20px rgba(0,0,0,.12);
}
.catchArena > * { position:relative; z-index:1; } /* conteúdo acima do cenário */
.catchMonWrap {
  position:absolute; left:50%; top:19%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:14px; will-change:transform;
  z-index:3; /* acima dos anéis de captura */
}
.catchLabel {
  background:rgba(0,0,0,.6); color:#fff; border-radius:16px; padding:5px 15px;
  font-size:.85em; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.35);
  position:relative; z-index:4; /* nome + CP nunca ficam atrás do círculo */
}
.catchRing { z-index:2; }
.catchMon { width:170px; }
.catchMon img { width:100%; filter:drop-shadow(0 12px 14px rgba(0,0,0,.4)); }
.catchDica {
  position:absolute; bottom:64px; left:0; right:0; text-align:center; color:#fff; opacity:.6;
  pointer-events:none;
}
.catchRing { position:absolute; border-radius:50%; border:4px solid #fff; pointer-events:none; }
.ringOuter { opacity:.85; }
.ringInner { transition:none; }
.catchBall {
  position:absolute; width:68px; height:68px; left:calc(50% - 34px); bottom:56px;
  cursor:grab; z-index:5; transition:none;
  animation:ballIdle 2.4s ease-in-out infinite;
}
.catchBall:active { cursor:grabbing; animation:none; }
@keyframes ballIdle { 0%,100%{margin-bottom:0} 50%{margin-bottom:7px} }
.ballSombra {
  position:absolute; width:52px; height:12px; left:calc(50% - 26px); bottom:44px;
  background:radial-gradient(ellipse, rgba(0,0,0,.4), transparent 70%); border-radius:50%; z-index:4;
}

/* pokébola 3D em CSS puro */
.ball3d {
  --ballcor:#ee1515;
  width:100%; height:100%; border-radius:50%; position:relative; pointer-events:none;
  background:linear-gradient(180deg,
    var(--ballcor) 0%, var(--ballcor) 45%,
    #16181c 45%, #16181c 55%,
    #f6f6f6 55%, #d5d8dd 100%);
  box-shadow:
    inset -10px -12px 18px rgba(0,0,0,.42),
    inset 7px 9px 14px rgba(255,255,255,.30),
    0 8px 16px rgba(0,0,0,.45);
}
.ball3d::before { /* botão central */
  content:''; position:absolute; left:50%; top:50%; width:30%; height:30%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 32%, #ffffff 0%, #e8e8e8 45%, #b9bec6 100%);
  border:3px solid #16181c; border-radius:50%;
  box-shadow:0 0 0 3px rgba(255,255,255,.15);
}
.ball3d::after { /* reflexo de luz */
  content:''; position:absolute; top:7%; left:15%; width:34%; height:20%;
  background:rgba(255,255,255,.55); border-radius:50%;
  filter:blur(3px); transform:rotate(-18deg);
}
.ballMini { width:44px; height:44px; margin:0 auto 4px; }

/* designs por tipo de bola */
.ball3d.great { /* azul com detalhes vermelhos */
  background:
    radial-gradient(circle at 26% 20%, #e33b3b 0 13%, transparent 14%),
    radial-gradient(circle at 74% 20%, #e33b3b 0 13%, transparent 14%),
    linear-gradient(180deg,#2f6fd0 0%,#2f6fd0 45%,#16181c 45%,#16181c 55%,#f6f6f6 55%,#d5d8dd 100%);
}
.ball3d.ultra { /* preta com faixa/detalhes amarelos */
  background:
    radial-gradient(circle at 27% 24%, #f6c700 0 11%, transparent 12%),
    radial-gradient(circle at 73% 24%, #f6c700 0 11%, transparent 12%),
    linear-gradient(180deg, transparent 0 6%, #f6c700 6% 40%, transparent 40%) 50% 0/22% 100% no-repeat,
    linear-gradient(180deg,#26282e 0%,#26282e 45%,#16181c 45%,#16181c 55%,#f6f6f6 55%,#d5d8dd 100%);
}
.ball3d.premier { /* toda branca com anel vermelho */
  background:
    linear-gradient(180deg,#fbfbfb 0%,#f0f0f0 45%,#d33b3b 45%,#d33b3b 55%,#f6f6f6 55%,#d5d8dd 100%);
}
.catchTop { position:absolute; top:12px; left:14px; right:14px; display:flex; justify-content:space-between; z-index:6; }
.catchInfo { background:rgba(0,0,0,.45); color:#fff; border-radius:12px; padding:6px 14px; font-weight:700; }
.catchBottom {
  position:absolute; bottom:12px; left:0; right:0; display:flex; justify-content:center; gap:18px; z-index:6;
}
.catchTool { background:rgba(0,0,0,.45); border:none; color:#fff; border-radius:14px; padding:8px 12px; cursor:pointer; font-size:1em; }
.catchTool.sel { outline:2px solid var(--warn); }
.throwMsg {
  position:absolute; top:44%; left:0; right:0; text-align:center; font-size:1.6em; font-weight:900;
  color:#ffd43b; text-shadow:0 2px 8px #000; pointer-events:none; animation:flutuar 1s forwards; z-index:7;
}
@keyframes flutuar { from{opacity:1; transform:translateY(0)} to{opacity:0; transform:translateY(-50px)} }
@keyframes ballShake { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-22deg)} 75%{transform:rotate(22deg)} }
.shaking { animation:ballShake .55s ease-in-out; }

/* ---------- minigame de carga ---------- */
.cargaOverlay {
  position:absolute; inset:0; z-index:20; touch-action:none; user-select:none;
  background:color-mix(in srgb, var(--corTipo,#845ef7) 22%, rgba(0,0,0,.55));
  display:flex; flex-direction:column; align-items:center; padding-top:26px;
  animation:fadeIn .2s;
}
.cargaTitulo { font-size:1.4em; font-weight:900; color:#fff; text-shadow:0 2px 8px #000; }
.cargaInstrucao { color:#fff; opacity:.9; font-weight:700; margin:6px 0 10px; animation:piscar .5s infinite alternate; }
.cargaBarra { width:70%; height:16px; background:rgba(0,0,0,.5); border-radius:10px; overflow:hidden; border:2px solid rgba(255,255,255,.4); }
.cargaFill { height:100%; width:0%; background:linear-gradient(90deg, var(--corTipo,#845ef7), #fff); transition:width .1s; }
.cargaArea { position:absolute; inset:0; top:90px; }
.cargaCirculo {
  position:absolute; width:64px; height:64px; border-radius:50%; cursor:pointer;
  background:radial-gradient(circle at 35% 35%, #fff8, var(--corTipo,#845ef7));
  border:3px solid #fff; display:flex; align-items:center; justify-content:center; font-size:1.6em;
  animation:circuloPulsa 1.4s forwards; box-shadow:0 0 18px var(--corTipo,#845ef7);
}
@keyframes circuloPulsa { from{transform:scale(.4); opacity:1} 60%{transform:scale(1.05)} to{transform:scale(1.2); opacity:.2} }
@keyframes piscar { from{opacity:.55} to{opacity:1} }

/* ---------- prompt de escudo ---------- */
.escudoPrompt {
  position:absolute; inset:0; z-index:22; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center; animation:fadeIn .15s;
}
.escudoBox {
  background:var(--bg2); border:2px solid var(--warn); border-radius:16px; padding:18px 22px;
  text-align:center; max-width:320px; box-shadow:0 10px 40px rgba(0,0,0,.6);
}
.escudoTimer { height:6px; background:var(--bg3); border-radius:4px; margin-top:12px; overflow:hidden; }
.escudoTimerFill { height:100%; width:100%; background:var(--warn); }
@keyframes starBurst { from{transform:scale(.3); opacity:1} to{transform:scale(1.6); opacity:0} }
.starBurst { position:absolute; font-size:2.4em; animation:starBurst .8s forwards; pointer-events:none; z-index:8; }

/* ---------- Batalha (layout estilo GO) ---------- */
#battleOverlay { display:flex; flex-direction:column; }
.battleArena {
  flex:1; position:relative; overflow:hidden;
  background:radial-gradient(ellipse at 50% 100%, #4a5a7a 0%, #2a3a5a 50%, #16233c 100%);
}
.goArena {
  background:
    radial-gradient(ellipse 130% 55% at 50% 108%, #4e8f3d 0%, #3f7a34 34%, transparent 60%),
    linear-gradient(180deg, #0e1f38 0%, #1d3a5f 40%, #2c5a52 72%, #3f7a34 100%);
  touch-action:manipulation; cursor:pointer;
}
.goArena::before { /* linhas do campo */
  content:''; position:absolute; left:8%; right:8%; bottom:16%; height:30%;
  border:2px solid rgba(255,255,255,.14); border-radius:50%;
}
.goTopo {
  position:absolute; top:10px; left:10px; right:10px; z-index:6;
  display:flex; align-items:center; gap:8px;
}
.goMini {
  width:42px; height:42px; border-radius:50%; border:2px solid rgba(255,255,255,.4);
  background:rgba(0,0,0,.35); color:#fff; font-size:1.15em; cursor:pointer;
}
.goMini:hover { background:rgba(0,0,0,.55); }
.goEscudos { font-size:1em; filter:drop-shadow(0 2px 3px #000); }
.goMon { position:absolute; display:flex; flex-direction:column; align-items:center; gap:6px; }
.goEnemy { top:58px; left:50%; transform:translateX(-50%); }
.goAlly { bottom:11%; left:50%; transform:translateX(-50%); flex-direction:column-reverse; }
.goBarra {
  width:200px; background:rgba(0,0,0,.5); border-radius:12px; padding:6px 12px;
  box-shadow:0 2px 8px rgba(0,0,0,.3); z-index:3;
}
.goNome { color:#fff; font-size:.82em; font-weight:700; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px; }
.goEnemy .bSprite, .goAlly .bSprite {
  position:static; width:auto; min-height:80px;
  display:flex; align-items:flex-end; justify-content:center;
}
.goCostas { image-rendering:pixelated; }
.goEspelhado { transform:scaleX(-1); }
.goDica {
  position:absolute; bottom:8px; left:0; right:0; text-align:center;
  color:#fff; opacity:.45; font-size:.72em; pointer-events:none;
}
.goControles {
  display:flex; justify-content:center; align-items:flex-end; gap:16px; flex-wrap:wrap;
  padding:10px 10px 14px; background:var(--bg2);
}
@media (max-width:420px) { .goMoveBtn { width:64px; height:64px; font-size:1.6em; } .goControles { gap:12px; } }
.goMoveWrap { display:flex; flex-direction:column; align-items:center; gap:5px; }
.goMoveNome { font-size:.78em; font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
.goMoveBtn {
  width:76px; height:76px; border-radius:50%; font-size:1.9em; cursor:pointer;
  border:4px solid var(--line); background:var(--bg3); color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.35), inset 0 2px 6px rgba(255,255,255,.15);
  transition:transform .1s;
}
.goMoveBtn:active { transform:scale(.92); }
.goMoveBtn:disabled { opacity:.5; cursor:not-allowed; }
.goChargedBtn { border-color:rgba(255,255,255,.35); }
.goChargedBtn.pronto { animation:prontoP 1s infinite alternate; }
@keyframes prontoP { from{box-shadow:0 0 6px 2px rgba(255,255,255,.3)} to{box-shadow:0 0 20px 6px rgba(255,255,255,.55)} }
.bSprite { position:absolute; transition:filter .1s; }
.bSprite img { width:100%; pointer-events:none; }
.bEnemy { top:8%; right:10%; width:150px; cursor:pointer; }
.bAlly { bottom:4%; left:8%; width:165px; transform:scaleX(-1); }
.bHud { position:absolute; background:rgba(0,0,0,.5); border-radius:10px; padding:6px 10px; color:#fff; min-width:220px; }
.bHudEnemy { top:10px; left:10px; }
.bHudAlly { bottom:10px; right:10px; }
.hpTrack { height:8px; background:#333; border-radius:5px; overflow:hidden; margin-top:4px; }
.hpFill { height:100%; background:var(--good); transition:width .2s; }
.enTrack { height:5px; background:#333; border-radius:4px; overflow:hidden; margin-top:4px; }
.enFill { height:100%; background:var(--accent); transition:width .15s; }
.battleControls { display:flex; gap:8px; padding:10px; background:var(--bg2); }
.battleControls .btn { flex:1; }
.shieldChip { font-size:.8em; }
@keyframes bshake { 0%,100%{translate:0 0} 25%{translate:-8px 0} 75%{translate:8px 0} }
.bhit { animation:bshake .28s; }
.dmgFloat {
  position:absolute; font-weight:900; font-size:1.3em; color:#fff; text-shadow:0 2px 4px #000;
  pointer-events:none; animation:flutuar .8s forwards; z-index:5;
}
.battleMsg {
  position:absolute; top:42%; left:0; right:0; text-align:center; font-size:1.5em; font-weight:900;
  color:#fff; text-shadow:0 2px 10px #000; pointer-events:none; z-index:6;
}

/* ---------- Detalhe do Pokémon (tela cheia estilo GO) ---------- */
#detailOverlay { display:flex; flex-direction:column; z-index:45; }
.pdArena {
  position:relative; flex:0 0 46%; overflow:hidden; touch-action:pan-y;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding-bottom:12px; user-select:none;
  background:
    radial-gradient(ellipse 150% 60% at 50% 112%, #63b04e 0%, #52a044 40%, transparent 65%),
    linear-gradient(180deg, #7ecbe8 0%, #a5dcef 34%, #8fca6f 68%, #63b04e 100%);
}
.pdTopo {
  position:absolute; top:10px; left:10px; right:10px; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
}
.pdArcoWrap {
  position:absolute; top:20px; left:50%; transform:translateX(-50%);
  width:min(300px, 78vw); pointer-events:none;
}
.pdArco { width:100%; display:block; }
.pdCp {
  position:absolute; top:15%; left:50%; transform:translateX(-50%); z-index:4;
  color:#fff; font-size:1.15em; font-weight:700; text-align:center; pointer-events:none;
  background:rgba(0,0,0,.32); padding:3px 16px; border-radius:20px;
  text-shadow:0 2px 6px rgba(0,0,0,.5);
}
.pdCp b { font-size:1.3em; }
.pdContador {
  background:rgba(0,0,0,.35); color:#fff; border-radius:20px; padding:5px 14px;
  font-size:.75em; font-weight:700; letter-spacing:.5px;
}
.pdSprite {
  width:min(210px, 48vw); z-index:2;
  filter:drop-shadow(0 14px 12px rgba(0,0,0,.30));
  animation:pdRespira 3s ease-in-out infinite;
}
@keyframes pdRespira { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.pdNome {
  color:#fff; font-size:1.25em; font-weight:800; text-shadow:0 2px 6px rgba(0,0,0,.45);
  margin:8px 0 4px; z-index:2;
}
.pdArena > div:last-child { margin-bottom:14px; z-index:2; } /* tags de tipo com respiro da ficha */
.pdSeta {
  position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:46px; height:46px; border-radius:50%; border:2px solid rgba(255,255,255,.5);
  background:rgba(0,0,0,.25); color:#fff; font-size:1.5em; cursor:pointer;
}
.pdSeta:hover { background:rgba(0,0,0,.45); }
.pdEsq { left:8px; } .pdDir { right:8px; }
.pdFicha {
  flex:1; overflow-y:auto; background:var(--bg2); padding:16px 16px 28px;
  border-radius:22px 22px 0 0; margin-top:-18px; z-index:3;
  -webkit-overflow-scrolling:touch;
}
/* dados menos espremidos: linhas com mais respiro e botões que quebram linha */
.pdFicha .statRow { padding:9px 2px; font-size:.95em; gap:10px; }
.pdFicha .statRow > span:first-child { color:var(--fg2); white-space:nowrap; }
.pdFicha .statRow > b { text-align:right; }
.pdAcoes { display:flex; flex-wrap:wrap; gap:8px; }
.pdAcoes .btn { flex:0 1 auto; }
.pdFicha .sectionLabel { margin-top:14px; }
/* telas estreitas (celular): dá ainda mais espaço pros dados */
@media (max-width:520px) {
  .pdArena { flex:0 0 42%; }
  .pdArena .pdSprite { max-width:46vw; max-height:52%; }
  .pdCp { top:12%; }
  .pdNome { font-size:1.15em; }
}

/* ficha modal antiga (ainda usada na pokédex) */
.detailHead { text-align:center; padding:14px 12px 4px; position:relative; }
.detailHead img { width:150px; }
.cpBig { font-size:1.5em; font-weight:900; }
.statRow { display:flex; justify-content:space-between; padding:7px 2px; border-bottom:1px solid var(--line); font-size:.9em; }
.ivBar { display:inline-block; width:90px; height:7px; background:var(--bg3); border-radius:4px; overflow:hidden; vertical-align:middle; }
.ivBar i { display:block; height:100%; background:var(--warn); }

/* pokédex */
.dexCell { opacity:.35; filter:grayscale(1); }

/* silhueta (radar "por perto": Pokémon ainda não capturado) */
.pokeCell.silhueta img { filter:brightness(0) saturate(0); opacity:.9; }
.pokeCell.silhueta .nm { color:var(--fg2); }
.radarCel { position:relative; }
.radarNum { position:absolute; top:4px; left:6px; font-weight:900; font-size:.9em; color:var(--accent); background:var(--bg); border-radius:50%; width:20px; height:20px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); }
.dexCell.seen { opacity:.7; filter:grayscale(.6); }
.dexCell.caught { opacity:1; filter:none; }

/* avatar */
.avatarPreview { font-size:4em; text-align:center; padding:10px; }
.optRow { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 14px; }
.optChip {
  background:var(--bg3); border:2px solid transparent; border-radius:12px; padding:8px 12px;
  cursor:pointer; font-size:1.1em;
}
.optChip.sel { border-color:var(--accent); }

/* ---------- portão de login ---------- */
.loginGate {
  position:fixed; inset:0; z-index:95; display:flex; align-items:center; justify-content:center;
  padding:18px; overflow:hidden;
  background:linear-gradient(200deg,#12224a 0%,#14405a 40%,#0d4d3d 80%, #0a3a2e 100%);
  background-size:160% 160%;
  animation:loginFundo 14s ease-in-out infinite alternate;
}
@keyframes loginFundo { from{background-position:0% 0%} to{background-position:100% 100%} }
.loginGate::before { /* brilho suave girando atrás da caixa */
  content:''; position:absolute; width:640px; height:640px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,217,74,.14) 0%, transparent 60%);
  animation:evoGira 22s linear infinite;
}
.loginMon {
  position:absolute; width:120px; opacity:0; pointer-events:none;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.5));
  animation:splashFloat 8s ease-in-out infinite;
}
/* imagem de fundo do login (cena cobrindo a tela toda, escurecida p/ leitura) */
.loginBg {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top; pointer-events:none; z-index:0;
  opacity:.85;
}
/* véu escuro por cima da imagem pra caixa de login ficar legível */
.loginGate::after {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,12,26,.35) 0%, rgba(6,12,26,.55) 60%, rgba(6,12,26,.8) 100%);
}
.loginBox {
  position:relative; z-index:2;
  background:color-mix(in srgb, var(--bg2) 88%, transparent);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14); border-radius:24px;
  padding:30px 26px; width:100%; max-width:380px; text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  animation:popIn .3s;
}
.loginBox input {
  text-align:center; padding:12px; border-radius:12px; font-size:1em;
  transition:border-color .15s, box-shadow .15s;
}
.loginBox input:focus { box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.loginBox .btn { padding:13px; border-radius:12px; }

/* ---------- animação de evolução ---------- */
.evoOverlay {
  position:fixed; inset:0; z-index:90; display:flex; flex-direction:column;
  align-items:center; justify-content:center; overflow:hidden;
  background:radial-gradient(ellipse at 50% 45%, #2a3f6e 0%, #101830 70%);
  animation:fadeIn .3s;
}
.evoEspiral {
  position:absolute; width:420px; height:420px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 20deg, rgba(120,160,255,.12) 20deg 40deg,
    transparent 40deg 60deg, rgba(120,160,255,.12) 60deg 80deg, transparent 80deg 100deg,
    rgba(120,160,255,.12) 100deg 120deg, transparent 120deg 140deg, rgba(120,160,255,.12) 140deg 160deg,
    transparent 160deg 180deg, rgba(120,160,255,.12) 180deg 200deg, transparent 200deg 220deg,
    rgba(120,160,255,.12) 220deg 240deg, transparent 240deg 260deg, rgba(120,160,255,.12) 260deg 280deg,
    transparent 280deg 300deg, rgba(120,160,255,.12) 300deg 320deg, transparent 320deg 340deg,
    rgba(120,160,255,.12) 340deg 360deg);
  animation:evoGira 5s linear infinite;
}
@keyframes evoGira { to { transform:rotate(360deg); } }
.evoSprite { width:200px; image-rendering:pixelated; z-index:2; transition:filter .4s; }
.evoBrilho { animation:evoPulsa .5s ease-in-out infinite alternate; }
@keyframes evoPulsa {
  from { filter:brightness(1.6) saturate(0) drop-shadow(0 0 12px #fff); transform:scale(1); }
  to   { filter:brightness(8) saturate(0) drop-shadow(0 0 34px #fff); transform:scale(1.12); }
}
.evoOverlay.evoFlash::after {
  content:''; position:absolute; inset:0; background:#fff; z-index:3;
  animation:evoFlashAn .5s ease-out forwards;
}
@keyframes evoFlashAn { from { opacity:1; } to { opacity:0; } }
.evoRevela { animation:evoPop .6s ease-out; filter:none; }
@keyframes evoPop { from { transform:scale(.4); } 70% { transform:scale(1.15); } to { transform:scale(1); } }
.evoNome {
  margin-top:18px; color:#fff; font-size:1.25em; font-weight:900; z-index:2;
  text-shadow:0 2px 10px rgba(0,0,0,.6); min-height:1.4em;
}

/* ícones reais de itens/tipos */
.itemIcon { image-rendering:pixelated; vertical-align:middle; }
.itemIconWrap { width:38px; display:flex; align-items:center; justify-content:center; }
.typeIconBtn { width:58px; pointer-events:none; filter:drop-shadow(0 1px 3px rgba(0,0,0,.4)); }
/* medalhão de tipo estilo GO: círculo colorido, anel prateado, glifo branco */
.typeMedal {
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:
    0 0 0 3px #c3c8cf,
    0 0 0 4px #8f959e,
    inset 0 0 0 2px rgba(255,255,255,.30),
    inset 0 -4px 8px rgba(0,0,0,.28),
    0 3px 8px rgba(0,0,0,.35);
  pointer-events:none; margin:0 auto;
}
.typeMedal img {
  width:54%; height:54%;
  filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

/* sprites pixelados nítidos em todo o jogo (largura definida por JS na escala natural) */
.pokeCell img, .catchMon img, .pdSprite, .bSprite img, .detailHead img, #buddyChip img {
  image-rendering: pixelated;
}
.pdSprite { width:auto; max-width:52vw; max-height:56%; margin-top:0; object-fit:contain; }
.catchMon { display:flex; justify-content:center; }
.catchMon img { width:auto; }

/* misc */
.sectionLabel {
  font-size:.8em; font-weight:800; color:var(--fg2); text-transform:uppercase; letter-spacing:1px;
  margin:16px 0 8px; padding-left:9px; border-left:3px solid var(--accent);
}

/* ===== Mochila em grade compacta ===== */
.itemGrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; margin-bottom:6px; }
.itemTile {
  position:relative; background:var(--bg2); border:1px solid var(--line); border-radius:14px;
  padding:10px 6px 8px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px;
}
.itemTile .itemIconWrap { width:44px; height:44px; }
.itemTile .itemQtd { position:absolute; top:5px; right:8px; font-size:.72em; font-weight:800; color:var(--fg2); }
.itemTile .itemNome { font-size:.74em; line-height:1.15; min-height:2.3em; display:flex; align-items:center; }
.itemTile .btn.small { width:100%; padding:5px 0; }

/* ===== Loja: cards com mais respiro ===== */
#screen-shop .card { display:flex; align-items:center; }
#screen-shop .card .row { width:100%; }
.card { transition:border-color .12s, transform .12s; }
#screen-shop .card:hover, #screen-bag .itemTile:hover { border-color:var(--accent); }
.progressTrack { height:8px; background:var(--bg3); border-radius:5px; overflow:hidden; margin-top:6px; }
.progressFill { height:100%; background:var(--accent); border-radius:5px; }
.shinySpark { animation:sparkle 1.2s infinite alternate; }
@keyframes sparkle { from{filter:drop-shadow(0 0 4px #ffd43b)} to{filter:drop-shadow(0 0 14px #ffd43b)} }

@media (max-width:560px) {
  #playerName { max-width:80px; overflow:hidden; text-overflow:ellipsis; }
  .xpTrack { width:70px; }
  /* mantém moedas E stardust visíveis no celular, só compacta */
  #topRight { gap:6px; font-size:.78em; }
  #weatherChip { font-size:1.2em; }
  #coinChip img, #dustChip img { width:15px !important; }
  .navBtn span { display:none; }
}
#coinChip, #dustChip { display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }