/* ============ 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; }
.geoSpawn {
  width:52px; height:52px; image-rendering:pixelated; cursor:pointer;
  filter:drop-shadow(0 5px 4px rgba(0,0,0,.35));
  animation:spawnBob 1.6s ease-in-out infinite;
}
@keyframes spawnBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.geoStop {
  width:26px; height:26px; border-radius:50%; cursor:pointer;
  background:radial-gradient(circle at 35% 35%, #7cc4ff, #2276cc);
  border:3px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,.35);
}
.geoGym {
  font-size:26px; cursor:pointer; text-align:center; line-height:34px;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.4));
}
.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); }
#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; }

/* 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;
  background:radial-gradient(ellipse at 50% 100%, #3d6b3d 0%, #2a4d3a 40%, var(--sky,#173a5e) 100%);
}
.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:34px;
  padding:10px 14px 14px; background:var(--bg2);
}
.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 58%; 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:26%; left:0; right:0; text-align:center;
  color:#fff; font-size:1.25em; text-shadow:0 2px 6px rgba(0,0,0,.4);
}
.pdCp b { font-size:1.35em; }
.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:14px 16px 20px;
  border-radius:22px 22px 0 0; margin-top:-18px; z-index:3;
}

/* 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); }
.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;
  background:linear-gradient(160deg,#1b2a4a 0%,#14405a 45%,#0d3b33 100%); padding:18px;
}
.loginBox {
  background:var(--bg2); border:1px solid var(--line); border-radius:20px;
  padding:26px 22px; width:100%; max-width:360px; text-align:center;
  box-shadow:0 16px 50px rgba(0,0,0,.5); animation:popIn .25s;
}
.loginBox input { text-align:center; }

/* ---------- 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:70vw; margin-top:66px; }
.catchMon { display:flex; justify-content:center; }
.catchMon img { width:auto; }

/* misc */
.sectionLabel { font-size:.8em; font-weight:700; color:var(--fg2); text-transform:uppercase; letter-spacing:1px; margin:14px 0 6px; }
.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; }
  #dustChip { display:none; }
  .navBtn span { display:none; }
}