:root {
  --bg: #0F1620;
  --panel: #1A2330;
  --panel-2: #212D3E;
  --line: #2C3A4E;
  --text: #F2F5F9;
  --muted: #8FA0B5;
  --red: #E3350D;
  --red-dark: #B22A0B;
  --gold: #FFCB05;
  --green: #58C15A;
  --radius: 14px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Nunito", "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  min-height: 100vh;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
}
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

h1, h2 { margin: 0; }

/* ---------- aviso sem dados ---------- */
.nodata {
  max-width: 480px;
  margin: 15vh auto;
  padding: 0 16px;
  text-align: center;
}
.nodata pre {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
}

/* ---------- topo ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 20px;
  background: var(--panel);
  border-bottom: 3px solid var(--red);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-wrap: wrap;
}
.logo {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.5px;
}
.logo::first-letter { color: var(--red); }

.tabs { display: flex; gap: 6px; }
.tab {
  padding: 6px 16px;
  border-radius: 999px;
  font-weight: 700;
  color: var(--muted);
  background: transparent;
}
.tab:hover { color: var(--text); }
.tab.is-on { background: var(--red); color: #fff; }

.profilechip {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 2px 12px 2px 8px; height: 44px;
  border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line);
  color: var(--text); font-weight: 800; font-size: 13px;
}
.profilechip[hidden] { display: none; }
.profilechip:hover { border-color: var(--muted); }
.profilechip canvas { width: 24px; height: 48px; image-rendering: pixelated; margin-top: -4px; }
.profilechip span { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profilechip + .wallet { margin-left: 16px; }
.wallet {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 700;
}
.money { color: var(--gold); font-size: 17px; font-variant-numeric: tabular-nums; }
.balls { color: var(--muted); font-size: 13px; display: flex; gap: 10px; }
.balls b { color: var(--text); }

/* ---------- layout ---------- */
.layout {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 16px 40px;
  align-items: start;
}

.stage { min-width: 0; }

/* ---------- rota ---------- */
.routebar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.routenav {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 20px;
  font-weight: 900;
}
.routenav:disabled { opacity: 0.3; cursor: default; }
.autobtn {
  width: auto;
  margin-left: auto;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
}
.autobtn.off { opacity: 0.45; }
.loopbtn {
  width: auto;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0.6;
}
.loopbtn.on { opacity: 1; background: var(--red-dark); border-color: var(--red); color: #fff; }
.mapselect {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  max-width: 220px;
}
.badge-region { margin-bottom: 8px; }
.badge-region strong {
  display: block;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}
.badgerow { display: flex; gap: 10px; flex-wrap: wrap; }
.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--line);
  font-size: 22px;
  min-width: 58px;
}
.badge small { font-size: 11px; color: var(--muted); }
.badge.got { color: var(--gold); }
.badge.got small { color: var(--text); }
.routeinfo { display: flex; flex-direction: column; }
.routeinfo strong { font-size: 18px; }
.routeprog { color: var(--muted); font-size: 13px; }
.routetrack {
  margin-top: 6px;
  height: 8px;
  min-width: 220px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.routetrack[hidden] { display: none; }
.routetrack i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--red-dark), var(--red));
  transition: width 0.25s ease;
}
.routetrack.done i { background: var(--green); }

.encounter {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}

/* ----- cena de batalha ----- */
.battlefield {
  position: relative;
  height: 340px;
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #9CD8F0 0%, #B8E4F4 38%, #8CC860 40%, #74B44C 70%, #619C40 100%);
  -webkit-tap-highlight-color: transparent;
}

.platform {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  width: 150%;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #578F3C 0%, #4E8236 55%, rgba(78,130,54,0) 72%);
}

.foe {
  position: absolute;
  right: 9%;
  top: 13%;
  width: 168px;
  height: 158px;
  display: grid;
  place-items: end center;
  cursor: pointer;
}
.foe img {
  position: relative;
  width: 160px;
  height: 160px;
  image-rendering: pixelated;
  object-fit: contain;
}
.foe .platform { width: 170px; bottom: -6px; left: 50%; }

.ally {
  position: absolute;
  left: 5%;
  bottom: -3%;
  width: 260px;
  height: 220px;
  display: grid;
  place-items: end center;
  pointer-events: none;
}
.ally img {
  position: relative;
  width: 260px;
  height: 260px;
  image-rendering: pixelated;
  object-fit: contain;
}
.ally .platform { width: 230px; bottom: -4px; }

.foe-box, .ally-box {
  position: absolute;
  background: rgba(15, 22, 32, 0.88);
  border: 2px solid #F2F5F9;
  border-radius: 10px;
  padding: 8px 12px;
  min-width: 190px;
  z-index: 2;
}
.foe-box { left: 3%; top: 7%; }
.ally-box {
  right: 3%;
  bottom: 9%;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.ally-name { font-weight: 900; }
.ally-lvl { color: var(--muted); font-size: 13px; white-space: nowrap; }

.wildname { font-size: 17px; font-weight: 900; }
.shiny-tag { color: var(--gold); font-size: 14px; }

/* animações da batalha */
.ally img.attack { animation: lunge 0.35s ease; }
@keyframes lunge {
  35% { transform: translate(34px, -22px); }
  70% { transform: translate(-4px, 2px); }
}
.foe img.hit { animation: hitflash 0.3s ease; }
@keyframes hitflash {
  25% { transform: translateX(-6px); filter: brightness(2.6) saturate(0.3); }
  60% { transform: translateX(4px); }
}
.foe img.faint { animation: faint 0.45s ease forwards; }
@keyframes faint {
  to { transform: translateY(46px); opacity: 0; }
}
.foe img.spawn { animation: spawnin 0.4s ease; }
@keyframes spawnin {
  from { transform: translateX(70px); opacity: 0; }
}
.foe img.in-ball { transform: scale(0); opacity: 0; transition: transform 0.25s ease, opacity 0.25s ease; }
.ally img.swap { animation: spawnin 0.35s ease; }

.fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.fx .dmg {
  position: absolute;
  font-weight: 900;
  font-size: 20px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
  animation: dmgfloat 0.8s ease-out forwards;
}
.fx .dmg.crit { color: var(--gold); }
.fx .dmg.heal { color: var(--green); }
@keyframes dmgfloat {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-52px); opacity: 0; }
}
.fx .ball {
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--red) 0 46%, #2A2A2A 46% 54%, #F2F5F9 54% 100%);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.35);
  animation: ballarc 0.45s ease-in forwards;
}
@keyframes ballarc {
  0% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(190px, -110px) rotate(280deg); }
  100% { transform: translate(360px, -40px) rotate(560deg); }
}
.fx .ball.wiggling { animation: wiggle 0.9s ease; }
@keyframes wiggle {
  0%, 100% { transform: translate(360px, -40px) rotate(0); }
  20% { transform: translate(360px, -40px) rotate(-22deg); }
  40% { transform: translate(360px, -40px) rotate(20deg); }
  60% { transform: translate(360px, -40px) rotate(-14deg); }
  80% { transform: translate(360px, -40px) rotate(10deg); }
}

.typerow { display: flex; gap: 6px; margin: 6px 0 10px; }
.typechip {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.hpbar {
  height: 14px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  overflow: hidden;
}
.hpfill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--green);
  transition: width 0.15s ease;
}
.hpfill.low { background: var(--red); }
.hptext { color: var(--muted); font-size: 13px; margin-top: 4px; font-variant-numeric: tabular-nums; }

.throwrow {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.throwbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-weight: 700;
  min-width: 92px;
}
.throwbtn:hover:not(:disabled) { border-color: var(--red); }
.throwbtn:disabled { opacity: 0.35; cursor: default; }
.throwbtn .chance { font-size: 12px; color: var(--muted); font-weight: 400; }
.throwbtn .count { font-size: 12px; color: var(--gold); }

.hint { color: var(--muted); font-size: 13px; margin: 14px 0 0; }

.battlelog {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 90px;
  font-size: 13.5px;
  color: var(--muted);
}
.battlelog .good { color: var(--green); }
.battlelog .gold { color: var(--gold); }
.battlelog .bad { color: #E07A5F; }

/* ---------- mapa ---------- */
.mapwrap {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
}
#world {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}
.mapname {
  position: absolute;
  top: 10px; left: 10px;
  background: rgba(15, 22, 32, 0.85);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px 12px;
  font-weight: 900;
  font-size: 14px;
  pointer-events: none;
}
.dialog {
  position: absolute;
  z-index: 3; /* acima da camada de efeitos do mapa */
  left: 10px; right: 10px; bottom: 10px;
  background: rgba(15, 22, 32, 0.94);
  border: 2px solid var(--text);
  border-radius: 10px;
  padding: 10px 14px 12px;
  cursor: pointer;
}
.dlgname { color: var(--gold); font-weight: 900; font-size: 13px; }
.dlgtext { font-size: 15.5px; min-height: 40px; }
.dlgtext::after { content: " ▾"; color: var(--red); }
.dialog.has-choices .dlgtext::after { content: ""; }
.dlgchoices { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.dlgchoices button {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 700;
}
.dlgchoices button:hover { border-color: var(--red); }
.dlgchoices img { width: 64px; height: 64px; image-rendering: pixelated; }

.dpad {
  position: absolute;
  z-index: 3;
  right: 12px; bottom: 12px;
  display: none;
  grid-template-columns: repeat(3, 44px);
  grid-template-rows: repeat(3, 44px);
  gap: 4px;
  opacity: 0.85;
}
.dpad button {
  background: rgba(26, 35, 48, 0.9);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
  touch-action: none;
}
.dpad button[data-d="up"] { grid-area: 1 / 2; }
.dpad button[data-d="left"] { grid-area: 2 / 1; }
.dpad button[data-d="a"] { grid-area: 2 / 2; color: var(--red); }
.dpad button[data-d="right"] { grid-area: 2 / 3; }
.dpad button[data-d="down"] { grid-area: 3 / 2; }
@media (hover: none) and (pointer: coarse) {
  .dpad { display: grid; }
}

/* ---------- cena de batalha de treinador (GBA) ---------- */
#battleScene {
  position: absolute;
  inset: 0;
  z-index: 4;
}
#battleScene .battlefield {
  height: 100%;
  border-radius: 0;
  /* campo estilo GBA: sol difuso, céu, faixa do horizonte e gramado listrado */
  background:
    radial-gradient(circle at 80% 12%, rgba(255,252,214,0.6) 0%, rgba(255,252,214,0) 26%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0) 0 14px, rgba(255,255,255,0.05) 14px 28px),
    linear-gradient(180deg, #92CCEC 0%, #B6E0F4 30%, #DCEED2 36%, #E8F4D0 38%,
      #94C860 41%, #7CB450 62%, #689E44 82%, #578C3A 100%);
}
/* os fundos oficiais do Showdown já trazem o terreno: sem plataformas */
#battleScene .platform { display: none; }
/* posições oficiais do campo 640×360: aliado em (210,~357), inimigo em (430,~223) */
#battleScene .ally {
  left: 32.8%; bottom: 1%; right: auto; top: auto;
  width: auto; height: auto;
  transform: translateX(-50%);
}
#battleScene .ally img { width: 190px; height: 190px; }
#battleScene .foe {
  left: 67.2%; bottom: 38%; right: auto; top: auto;
  width: auto; height: auto;
  transform: translateX(-50%);
}
#battleScene .foe img { width: 115px; height: 115px; }
#battleScene .foe, #battleScene .ally { z-index: 1; }
#battleScene .ally-box { bottom: 24%; right: 3%; }
/* camadas de efeito no sistema de coordenadas lógico do Showdown (640×360) */
#battleScene #bsFx, #battleScene #bsBgFx {
  inset: auto;
  left: 0; top: 0;
  width: 640px; height: 360px;
  transform-origin: 0 0;
}
#battleScene #bsBgFx { z-index: 0; }
.psfx { position: absolute; display: block; pointer-events: none; }
.psbg { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
/* camada das animações oficiais na batalha do mapa */
#owFxLayer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2; /* acima do canvas, abaixo de diálogo e cena de líder */
}
.owcast { position: absolute; left: 0; top: 0; }
.owcast-stage {
  position: absolute;
  left: 0; top: 0;
  width: 640px; height: 360px;
  transform-origin: 0 0;
}
/* caixas de dados creme do GBA */
#battleScene .foe-box, #battleScene .ally-box {
  background: linear-gradient(180deg, #F8F0D0 0%, #F0E2B4 100%);
  border: 2px solid #6A6A4A;
  border-radius: 8px 8px 8px 16px;
  box-shadow: 2px 3px 0 rgba(30,40,25,0.35), inset 0 0 0 2px #FFFAE6;
  color: #3A3A26;
}
#battleScene .foe-box .wildname, #battleScene .ally-box .ally-name { color: #3A3A26; }
#battleScene .foe-box .hptext, #battleScene .ally-box .ally-lvl { color: #6A6444; }
#battleScene .hpbar {
  background: #585040;
  border: 2px solid #6A6A4A;
  height: 12px;
}
#battleScene .hpfill {
  background: linear-gradient(180deg, #78E048 0%, #48B830 100%);
  transition: width 0.6s cubic-bezier(0.35, 0, 0.25, 1); /* barra drena devagar, como no GBA */
}
#battleScene .hpfill.low { background: linear-gradient(180deg, #F8A048 0%, #E85838 100%); }
.bs-allybox { display: block; min-width: 200px; }
.bs-allybox .hpbar { margin-top: 5px; }
.bmsg {
  position: absolute;
  left: 8px; right: 8px; bottom: 8px;
  background: #22304C;
  border: 2px solid #F0F0E8;
  outline: 2px solid #5880B8;
  border-radius: 6px;
  padding: 9px 14px;
  font-weight: 700;
  font-size: 15px;
  min-height: 24px;
  z-index: 3;
  color: #F8F8F0;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}
#battleScene img.a-attack { animation: lunge 0.6s ease; }
#battleScene .foe img.a-attack { animation: lungeFoe 0.6s ease; }
@keyframes lungeFoe {
  35% { transform: translate(-34px, 22px); }
  70% { transform: translate(4px, -2px); }
}
/* atingido pisca como no GBA (some/aparece em passos) */
#battleScene img.a-hit { animation: gbablink 0.55s steps(1); }
@keyframes gbablink {
  0% { opacity: 1; transform: translateX(-5px); }
  14% { opacity: 0; }
  28% { opacity: 1; transform: translateX(4px); }
  42% { opacity: 0; }
  56% { opacity: 1; transform: translateX(-2px); }
  70% { opacity: 0; }
  84% { opacity: 1; transform: translateX(0); }
}
#battleScene img.a-faint { animation: faint 0.7s ease forwards; }
#battleScene img.a-spawn { animation: spawnin 0.55s ease; }
#battleScene .fx .dmg { animation: dmgpop 1.3s ease-out forwards; font-size: 23px; }
@keyframes dmgpop {
  0% { transform: translateY(0) scale(1.6); opacity: 1; }
  18% { transform: translateY(-6px) scale(1); }
  100% { transform: translateY(-56px) scale(1); opacity: 0; }
}
.fx .dmg.hurt { color: #FF8A7A; }
.bsflash {
  position: absolute;
  width: 150px;
  height: 150px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.bsp {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
/* sprite oficial de efeito (fx do cliente Showdown) */
.bsfx {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
/* flash de tela inteira (relâmpagos) */
.bsscreen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
#battleScene.bfshake-sm { animation: bfshakesm 0.32s ease; }
@keyframes bfshakesm {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(-3px, 2px); }
  60% { transform: translate(3px, -2px); }
}
#battleScene.bfshake { animation: bfshake 0.7s ease; }
@keyframes bfshake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-5px, 3px); }
  40% { transform: translate(5px, -3px); }
  60% { transform: translate(-4px, -2px); }
  80% { transform: translate(3px, 2px); }
}

/* transição de abertura (flash + círculo, estilo GBA) */
#bsTrans {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: transparent;
}
#bsTrans.run { animation: gbaflash 1.1s steps(1) forwards; }
@keyframes gbaflash {
  0%   { background: rgba(255,255,255,0); }
  8%   { background: rgba(255,255,255,0.95); }
  16%  { background: rgba(255,255,255,0); }
  24%  { background: rgba(255,255,255,0.95); }
  32%  { background: rgba(255,255,255,0); }
  45%  { background: #10161F; }
  100% { background: #10161F; }
}
#bsTrans.fadeout { animation: gbafade 0.5s ease forwards; }
@keyframes gbafade {
  from { background: #10161F; }
  to   { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  #bsTrans.run { animation: none; background: transparent; }
  #battleScene img.a-attack, #battleScene .foe img.a-attack,
  #battleScene img.a-hit, #battleScene img.a-spawn { animation: none; }
}

/* ---------- mapa-múndi (trilha) ---------- */
.worldwrap {
  position: relative;
  background: linear-gradient(180deg, #17311D, #1D3D25 60%, #17311D);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.worldwrap svg { position: absolute; inset: 0; pointer-events: none; }
.wnode {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #58A845;
  border: 3px solid #2E5C33;
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 0 rgba(0,0,0,0.35);
  transition: transform 0.08s;
}
.wnode:hover:not(.locked) { transform: translate(-50%, -50%) scale(1.12); }
.wnode.city, .wnode.league {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: #4A78C8;
  border-color: #2C4A80;
  font-size: 24px;
}
.wnode.league { background: #B8912E; border-color: #7C5F1A; }
.wnode.locked {
  background: #3A4450;
  border-color: #2A303A;
  color: #6A7686;
  cursor: default;
  box-shadow: none;
}
.wnode.here {
  outline: 4px solid var(--gold);
  outline-offset: 2px;
}
.wnode .wbadge {
  position: absolute;
  right: -6px;
  top: -6px;
  font-size: 15px;
  color: var(--gold);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.wnode .wlabel {
  position: absolute;
  top: 100%;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: #CFE3CF;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  pointer-events: none;
}

/* ---------- pokédex ---------- */
.dexhead { margin-bottom: 14px; }
.dexstats {
  font-weight: 700;
  margin-bottom: 10px;
}
.dexstats span { color: var(--muted); font-weight: 400; }
.dexfilters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.dexfilters input[type="search"], .dexfilters select {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
}
.dexfilters input[type="search"] { flex: 1; min-width: 180px; }
.checkline { color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 6px; }

.dexgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
}
.dexcell {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 4px;
  text-align: center;
  font-size: 11.5px;
  color: var(--muted);
  position: relative;
  transition: border-color 0.1s;
}
.dexcell img {
  width: 68px; height: 68px;
  image-rendering: pixelated;
  display: block;
  margin: 0 auto;
}
.dexcell .nm {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dexcell.unseen img { visibility: hidden; }
.dexcell.unseen::after {
  content: "?";
  position: absolute;
  top: 26px; left: 0; right: 0;
  font-size: 26px;
  font-weight: 900;
  color: var(--line);
}
.dexcell.seen img { filter: brightness(0) opacity(0.55); }
.dexcell.caught { color: var(--text); cursor: pointer; }
.dexcell.caught:hover { border-color: var(--red); }
.dexcell.caught.inteam { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.dexcell.shiny { border-color: var(--gold); }
.dexcell .lv { color: var(--gold); }

/* ---------- coluna lateral ---------- */
.side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 76px;
}
.sidecard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}
.sidecard h2 { font-size: 16px; margin-bottom: 8px; }
.sidenote { color: var(--muted); font-size: 12.5px; margin: 0 0 10px; }

.team { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.team li {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-2);
  border-radius: 8px;
  padding: 3px 10px 3px 3px;
  font-size: 13.5px;
}
.team img { width: 44px; height: 44px; image-rendering: pixelated; }
.team .tmid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.team .tn { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team .tbar {
  height: 5px;
  border-radius: 999px;
  background: var(--bg);
  overflow: hidden;
}
.team .tbar i { display: block; height: 100%; background: var(--green); border-radius: 999px; }
.team .tbar i.low { background: var(--red); }
.team li.ko img { filter: grayscale(1) brightness(0.6); }
.team li.ko .tn { color: var(--muted); }
.team .tl { color: var(--muted); font-variant-numeric: tabular-nums; }
.team .empty { color: var(--muted); justify-content: center; padding: 10px; font-size: 12.5px; }
.team li.leader { border-color: var(--gold); }
.team .leadtag {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 0 6px;
  vertical-align: 1px;
}
.team li.dragging { opacity: 0.35; }
.team li.dragover { outline: 2px dashed var(--gold); outline-offset: -2px; }

.dps { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.dps strong { color: var(--text); font-variant-numeric: tabular-nums; }

.shop { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.buyrow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--panel-2);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 10px;
}
.buyrow:hover:not(:disabled) { border-color: var(--red); }
.buyrow:disabled { opacity: 0.45; cursor: default; }
.buyrow .bi { flex: 1; }
.buyrow .bn { font-weight: 700; font-size: 13.5px; display: block; }
.buyrow .bd { color: var(--muted); font-size: 12px; display: block; }
.buyrow .bc { color: var(--gold); font-weight: 700; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }

.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12.5px;
  padding: 0 4px;
}
.wipe {
  color: var(--muted);
  text-decoration: underline;
  font-size: 12.5px;
}
.wipe:hover { color: #E07A5F; }

/* ---------- modal (editor de golpes / PC) ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(8, 12, 18, 0.7);
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal[hidden] { display: none; }
.modal-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  width: min(560px, 100%);
  max-height: 84vh;
  overflow-y: auto;
  position: relative;
}
.modal-card h2 { font-size: 17px; margin-bottom: 12px; padding-right: 30px; }
.modal-x {
  position: absolute;
  top: 10px; right: 12px;
  font-size: 22px;
  color: var(--muted);
}
.modal-x:hover { color: var(--text); }

.mvrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--panel-2);
  margin-bottom: 6px;
  font-size: 13.5px;
}
.mvrow.locked { opacity: 0.45; }
.mvrow input { width: 16px; height: 16px; accent-color: var(--red); }
.mvrow .mvname { flex: 1; font-weight: 700; }
.mvrow .mvtype {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  padding: 1px 8px;
  border-radius: 999px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.mvrow .mvmeta { color: var(--muted); font-size: 12px; white-space: nowrap; }
.mvblock { margin-bottom: 6px; }
.mvblock .mvrow { margin-bottom: 0; }
.mvcls { display: inline-flex; align-items: center; }
.mvhelp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  color: var(--muted); background: transparent; border: 1px solid var(--line);
  padding: 0; cursor: pointer;
}
.mvhelp:hover { color: var(--text); border-color: var(--muted); }
.mvhelp.on { color: #fff; background: #4a7bd6; border-color: #4a7bd6; }
.mvchips { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 4px 0 30px; }
.mvchips:empty { display: none; }
.mvchip {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em;
  padding: 1px 7px; border-radius: 999px;
  background: #2b3a4f; color: #cfe0f5; white-space: nowrap;
}
.mvchip.k-status { background: #6b3a8f; color: #f0dcff; }
.mvchip.k-stat { background: #7a4a1c; color: #ffe2bd; }
.mvchip.k-self { background: #1f6b3d; color: #cdf5db; }
.mvchip.k-selfbad { background: #7a2c2c; color: #ffd0d0; }
.mvchip.k-drain { background: #1f6b3d; color: #cdf5db; }
.mvchip.k-recoil { background: #7a2c2c; color: #ffd0d0; }
.mvchip.k-multi { background: #1d5f7a; color: #c8ecfa; }
.mvchip.k-crit { background: #8a6a12; color: #ffefb5; }
.mvchip.k-prio { background: #2f5fb0; color: #dbe8ff; }
.mvchip.k-flinch { background: #5a4a1c; color: #ffeebd; }
.mvchip.k-wait { background: #4a4a55; color: #e2e2ea; }
.mvchip.k-acc { background: #3a3f4a; color: #b7c2d3; }
.mvchip.k-sure { background: #24564a; color: #c9f2e6; }
.mvinfo {
  margin: 6px 0 0 30px; padding: 10px 12px;
  background: #121b28; border: 1px solid var(--line); border-radius: 10px;
  font-size: 12.5px; line-height: 1.45;
}
.mvinfo[hidden] { display: none; }
.mvi-top { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.mvi-stat { display: flex; flex-direction: column; gap: 1px; min-width: 76px; }
.mvi-stat small { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; }
.mvi-stat b { font-size: 15px; }
.mvi-stat em { color: var(--muted); font-style: normal; font-size: 11px; }
.mvi-clsline { display: inline-flex; align-items: center; gap: 5px; }
.mvi-power { min-width: 120px; }
.mvi-bar { display: block; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 3px 0 1px; }
.mvi-bar u { display: block; height: 100%; text-decoration: none; background: linear-gradient(90deg, #f0a030, var(--red)); border-radius: inherit; }
.mvi-fx { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mvi-fx li { display: flex; gap: 8px; align-items: baseline; padding-left: 8px; border-left: 3px solid #3a4a62; }
.mvi-fx li b { min-width: 92px; font-size: 11.5px; color: #cfe0f5; }
.mvi-fx li span { color: var(--text); }
.mvi-fx li.k-status { border-color: #a866d8; }
.mvi-fx li.k-stat { border-color: #d98a3a; }
.mvi-fx li.k-self, .mvi-fx li.k-drain { border-color: #4cc07a; }
.mvi-fx li.k-recoil { border-color: #d05a5a; }
.mvi-fx li.k-multi { border-color: #4aa8d0; }
.mvi-fx li.k-crit { border-color: #e0b030; }
.mvi-fx li.k-prio { border-color: #5a8ae0; }
.mvi-fx li.k-none span { color: var(--muted); }
.mvi-en { margin: 8px 0 0; color: var(--muted); font-size: 11.5px; }
.mvi-en small { text-transform: uppercase; letter-spacing: 0.05em; margin-right: 4px; }
.stbadge {
  margin-left: 5px; font-size: 9.5px; font-weight: 800; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; background: #6b3a8f; color: #f0dcff; vertical-align: 1px;
}
.stbadge.s-burn { background: #b5451b; color: #ffe6d6; }
.stbadge.s-paralysis { background: #a58a10; color: #fff6c2; }
.stbadge.s-poison { background: #7a3aa0; color: #f3ddff; }
.stbadge.s-freeze { background: #2f7f9a; color: #d9f4ff; }
.stbadge.s-sleep { background: #4a5570; color: #dfe6f5; }
.stbadge.s-confusion { background: #8a5a9a; color: #ffe6ff; }
.stbadge.s-trap { background: #5a4a35; color: #f0e2c8; }
.modal-actions { display: flex; gap: 8px; margin-top: 12px; }
.modal-actions button {
  flex: 1;
  padding: 9px;
  border-radius: 9px;
  font-weight: 700;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.modal-actions button.primary { background: var(--red); border-color: var(--red); color: #fff; }
.modal-note { color: var(--muted); font-size: 12.5px; margin: 0 0 10px; }
.statrow { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.statchip {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 9px;
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.statchip small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.pcgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.pccell {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 4px;
  text-align: center;
  font-size: 11.5px;
  color: var(--muted);
}
.pccell img { width: 56px; height: 56px; image-rendering: pixelated; }
.pccell .nm { display: block; color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pccell:hover { border-color: var(--red); }
.pccell.inteam { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.pccell.inteam::after { content: 'No time'; display: block; color: var(--gold); font-size: 10px; font-weight: 700; }
.team li { cursor: pointer; }
.team li:hover { outline: 1px solid var(--line); }

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .side { position: static; }
  .battlefield { height: 300px; }
  .ally { left: 2%; }
  .ally img { width: 150px; height: 150px; }
  .foe { right: 3%; }
  .foe-box, .ally-box { min-width: 150px; padding: 6px 9px; }
}
@media (max-width: 500px) {
  .topbar { gap: 10px; padding: 10px 12px; }
  .wallet { gap: 10px; }
  .balls { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ally img.attack, .foe img.hit, .foe img.spawn, .ally img.swap { animation: none; }
  .foe img.faint { animation: none; opacity: 0; }
  .fx .dmg { animation-duration: 0.4s; }
  .hpfill { transition: none; }
}

/* ---------- conta de treinador / personagem ---------- */
.chr { display: grid; grid-template-columns: 148px 1fr; gap: 16px; align-items: start; }
.chr-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.chr-preview canvas {
  width: 112px; height: 224px; image-rendering: pixelated;
  background: radial-gradient(circle at 50% 30%, #243248, #141c28); border: 1px solid var(--line); border-radius: 12px;
}
.chr-dirs { display: flex; gap: 4px; }
.chr-dirs button {
  width: 30px; height: 28px; border-radius: 8px; font-weight: 800; font-size: 15px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
}
.chr-dirs button:hover { border-color: var(--muted); }
.chr-form { display: grid; gap: 10px; min-width: 0; }
.chr-field { display: grid; gap: 5px; }
.chr-field > span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.chr-field input[type="text"] {
  padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); font: inherit; font-weight: 700;
}
.chr-field input[type="text"]:focus { outline: 2px solid var(--red); outline-offset: 0; }
.chr-error { margin: -4px 0 0; color: #ff8a7a; font-size: 12px; }
.chr-seg { display: flex; gap: 6px; }
.chr-seg button {
  flex: 1; padding: 7px 10px; border-radius: 9px; font-weight: 800;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
}
.chr-seg button.on { background: var(--red); border-color: var(--red); color: #fff; }
.chr-swatches { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.chr-sw {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.18); padding: 0; cursor: pointer;
}
.chr-sw:hover { transform: scale(1.12); }
.chr-sw.on { border-color: #fff; box-shadow: 0 0 0 2px var(--red); }
.chr-custom { width: 30px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); cursor: pointer; }
@media (max-width: 560px) {
  .chr { grid-template-columns: 1fr; }
  .chr-preview { flex-direction: row; justify-content: center; }
}

/* ---- conta do jogador (js/account.js) ---- */
.acc { display: grid; gap: 12px; min-width: 0; max-width: 360px; }
.acc-lead { margin: 0; color: var(--muted); font-size: 13px; }
.acc form { display: grid; gap: 10px; }
.acc .chr-field input[type="text"], .acc .chr-field input[type="email"], .acc .chr-field input[type="password"] {
  padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); width: 100%; box-sizing: border-box;
  background: var(--panel-2); color: var(--text); font: inherit; font-weight: 700;
}
.acc .chr-field input:focus { outline: 2px solid var(--red); outline-offset: 0; }
.acc-pw { display: flex; gap: 6px; }
.acc-pw input { flex: 1; min-width: 0; }
.acc-eye { padding: 0 10px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 700; }
.acc-meter { display: none; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.acc-meter.on { display: grid; }
.acc-meter i { height: 4px; border-radius: 2px; background: var(--line); }
.acc-meter[data-level="0"] i:nth-child(-n+1) { background: #e5484d; }
.acc-meter[data-level="1"] i:nth-child(-n+2) { background: #f0883e; }
.acc-meter[data-level="2"] i:nth-child(-n+3) { background: #e3b341; }
.acc-meter[data-level="3"] i:nth-child(-n+4), .acc-meter[data-level="4"] i { background: #3fb950; }
.acc-hint { color: var(--muted); font-size: 11.5px; margin: 0; }
.acc-submit { padding: 10px; border-radius: 10px; font-weight: 800; }
.acc-submit:disabled { opacity: 0.6; }
.acc-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.acc-or::before, .acc-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.acc-or[hidden], .acc-google[hidden] { display: none; }
.acc-google { display: flex; justify-content: center; min-height: 44px; }
.acc .chr-error { margin: 0; }
.acc-conflict { display: grid; gap: 8px; }
.acc-conflict > div { display: grid; gap: 2px; padding: 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.acc-conflict small { color: var(--muted); }
.chr-account { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); padding-top: 8px; border-top: 1px solid var(--line); }
.chr-account[hidden] { display: none; }
.chr-account button { background: none; border: 0; color: #ff8a7a; font-weight: 700; cursor: pointer; padding: 0; }
.acc-submit.primary { background: var(--red); border: 1px solid var(--red); color: #fff; cursor: pointer; }
.acc-submit.primary:hover:not(:disabled) { filter: brightness(1.1); }

/* ---- tipos, sexo, natureza e IVs/EVs ---- */
.tchip {
  display: inline-block; padding: 1px 7px; border-radius: 9px; color: #fff; font-size: 10px; font-weight: 800;
  letter-spacing: 0.02em; line-height: 15px; text-shadow: 0 1px 1px rgba(0,0,0,0.35); white-space: nowrap;
}
.tchip.shiny { background: var(--gold); color: #3a2f00; text-shadow: none; }
.ttypes { display: flex; gap: 3px; align-items: center; margin: 2px 0 1px; flex-wrap: wrap; }
.gsym { font-weight: 900; font-size: 13px; margin-right: 2px; }
.gsym.g-m { color: #6fa8ff; }
.gsym.g-f { color: #ff8fc1; }
.dexcell .dtypes { display: flex; gap: 2px; justify-content: center; flex-wrap: wrap; }
.dexcell .dtypes .tchip { font-size: 8px; padding: 0 5px; line-height: 12px; }
.bs-types .tchip { font-size: 9px; padding: 0 5px; line-height: 13px; vertical-align: middle; }
.monsheet { display: grid; gap: 6px; margin: 0 0 10px; font-size: 13px; }
.monsheet .ms-line { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.monsheet small, .ms-sp { color: var(--muted); }
.statchip { position: relative; }
.statchip i { display: block; font-style: normal; font-size: 9px; color: var(--muted); margin-top: 1px; }
.statchip.up { border-color: #58C15A; }
.statchip.down { border-color: #e5484d; }
.statchip.up small { color: #58C15A; }
.statchip.down small { color: #ff8a7a; }
.pccell { position: relative; }
.pccell .pcm { display: block; color: var(--muted); font-size: 11px; }
.pccell .pcinfo { position: absolute; top: 2px; right: 4px; font-size: 12px; color: var(--muted); cursor: pointer; }
.pccell .pcinfo:hover { color: var(--text); }
.relbtn { margin-top: 10px; background: none; border: 1px solid var(--line); color: #ff8a7a; padding: 6px 10px; border-radius: 9px; cursor: pointer; font-weight: 700; }

/* ---- Premium ---- */
.premiumbtn {
  margin-left: auto; padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: 12px; cursor: pointer;
  background: linear-gradient(135deg, #f6c343, #e58a1f); color: #3a2400; border: 0;
}
.premiumbtn.on { background: var(--panel-2); color: var(--gold); border: 1px solid var(--gold); }
.premiumbtn[hidden] { display: none; }
.prem { display: grid; gap: 12px; max-width: 380px; }
.prem-status { margin: 0; padding: 8px 10px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); }
.prem-status.on { color: var(--text); border-color: var(--gold); }
.prem-perks { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 13px; }
.prem-ok { margin: 0; color: #58C15A; font-weight: 800; }
.prem-pix { display: grid; gap: 8px; justify-items: center; text-align: center; }
.prem-pix img { background: #fff; padding: 6px; border-radius: 10px; image-rendering: pixelated; }
.prem-pix .acc-pw { width: 100%; }
.prem-pix input[type="text"] { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: inherit; font-size: 11px; }
.prem-wait { margin: 0; color: var(--gold); font-weight: 700; font-size: 13px; }
.prem-auto { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.prem-auto h4 { margin: 0; font-size: 13px; }
.prem-auto select { padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: inherit; font-weight: 700; }
.prem-check { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.premiumbtn + .profilechip { margin-left: 8px; }