/* =========================================================
   Pokémon Bullet Heaven — interface

   Identidade de GBA, no padrão do Pokemon All (o outro projeto do Fellipe,
   DEC-002 de lá): caixa de diálogo do FireRed de verdade como moldura,
   botões em relevo duro, ponteiro ▸ e Poké Ball como marcador, divisórias
   pontilhadas, Press Start 2P nos títulos e Pixelify Sans no texto. Nada de
   gradiente suave nem sombra borrada em elemento de interface: se a tela
   puder ser confundida com um painel de administração, falta identidade.

   As molduras (assets/ui/window-frame*.png) já vêm ampliadas no arquivo:
   border-image ignora image-rendering, então a largura da borda tem de ser
   igual à fatia (24 px no painel, 16 px no botão) para sair nítida.
   ========================================================= */
/* As fontes do Pokemon All, servidas daqui (assets/fonts, licença OFL):
   Press Start 2P nos títulos, Pixelify Sans no texto. */
@font-face {
  font-family: 'Pixelify Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../assets/fonts/pixelify-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Pixelify Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../assets/fonts/pixelify-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Press Start 2P'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../assets/fonts/press-start-2p-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Press Start 2P'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../assets/fonts/press-start-2p-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* GBA: a caixa de diálogo do FireRed (stdpal_0) */
  --gba-frame: #4a73a4;
  --gba-fill: #ffffff;
  --gba-ink: #2d3442;
  --gba-ink-soft: #6b7384;
  --gba-shade: #c3cede;
  --gba-button: #eef2f8;
  --gba-button-shade: #b9c6d9;
  --gba-hover: #dfe8f5;
  --gba-night: #13203a;
  --gba-night-edge: #0a1222;
  --gba-night-line: #2b4470;

  /* vermelho de Poké Ball para a ação principal, e o ouro de destaque */
  --poke-red: #d8412f;
  --poke-red-dark: #7a1c12;
  --gba-gold: #ffd970;
  --gba-gold-ink: #3a2a0c;
  --yellow: #ffcb05;
  --logo-blue: #2b54a6;
  --logo-blue-deep: #15295e;

  /* tema escuro do fundo */
  --bg: #0b0e14;
  --text: #e8edf5;
  --muted: #93a1b8;
  --ok: #3fb950;
  --danger: #f85149;
  --xp: #58a6ff;

  /* barras de vida do FireRed */
  --hp-high: #48c868;
  --hp-mid: #f8c030;
  --hp-low: #f85838;

  --font-arcade: 'Press Start 2P', 'Pixelify Sans', monospace;
  --font-pixel: 'Pixelify Sans', 'Trebuchet MS', sans-serif;
  --font: var(--font-pixel);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);

  /* relevo duro: claro em cima e à esquerda, sombra em baixo e à direita */
  --relief: inset -2px -2px 0 var(--gba-button-shade), inset 2px 2px 0 #ffffff;
  --drop: 2px 2px 0 rgba(45, 52, 66, .35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  overflow: hidden;
  user-select: none;
  /* a Pixelify Sans liga "fi" num glifo que parece um "A" */
  font-variant-ligatures: no-common-ligatures;
}

button { font: inherit; color: inherit; }

#app {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg);
  isolation: isolate;
}

.hidden { display: none !important; }

/* ===================== FUNDO DOS MENUS =====================
   O cenário de metatiles do próprio jogo (render/scenery.js), pintado num
   canvas em 1x e ampliado sem suavizar; o véu escuro garante a leitura. */
#menu-bg {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  z-index: -2;
  object-fit: cover;
  image-rendering: pixelated;
  animation: bg-drift 80s ease-in-out infinite alternate;
}
@keyframes bg-drift {
  from { transform: translate(0, 0); }
  to { transform: translate(-3%, -2%); }
}
#menu-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 60% at 50% 45%, rgba(6, 10, 18, .30), rgba(6, 10, 18, .62) 80%),
    linear-gradient(180deg, rgba(6, 10, 18, .45) 0%, transparent 30%, transparent 65%, rgba(6, 10, 18, .7) 100%);
}

/* ============================ SCROLLBARS ============================ */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--gba-button); }
::-webkit-scrollbar-thumb { background: var(--gba-frame); border: 3px solid var(--gba-button); }
::-webkit-scrollbar-thumb:hover { background: var(--logo-blue-deep); }

:focus-visible { outline: 3px solid var(--poke-red); outline-offset: 2px; }

/* ============================ SIDE RAIL ============================
   Botões quadrados de ícone, como a engrenagem do Pokemon All. O nome
   aparece numa plaquinha do jogo ao passar o mouse. */
#side-rail {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rail-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--gba-button);
  border: 2px solid var(--gba-frame);
  border-radius: 3px;
  color: var(--gba-ink);
  cursor: pointer;
  box-shadow: var(--relief), 2px 2px 0 rgba(0, 0, 0, .45);
  transition: background .12s var(--ease), transform .08s var(--ease);
}
.rail-btn:hover { background: var(--gba-hover); }
.rail-btn:active { transform: translate(2px, 2px); box-shadow: var(--relief); }
.rail-btn .rail-icon { width: 30px; height: 30px; }
.rail-btn .rail-label {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translate(-6px, -50%);
  padding: 4px 10px;
  white-space: nowrap;
  font-family: var(--font-pixel);
  font-size: 15px;
  font-weight: 600;
  color: var(--gba-ink);
  background: var(--gba-fill);
  border: 2px solid var(--gba-frame);
  border-radius: 3px;
  box-shadow: inset -2px -2px 0 var(--gba-shade), 2px 2px 0 rgba(0, 0, 0, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s var(--ease), transform .12s var(--ease);
}
.rail-btn:hover .rail-label, .rail-btn:focus-visible .rail-label { opacity: 1; transform: translate(0, -50%); }

/* ============================= TELAS ============================= */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 28px 28px 28px 110px;
  overflow: hidden;
}
.screen.scrollable, #screen-campaign, #screen-starter, #screen-trainer { overflow-y: auto; }
/*
 * Telas que rolam centralizam com margem automática, e não com
 * justify-content: no centro do flex, o que passa da altura da janela some
 * para cima e não dá para rolar até lá.
 */
.screen.scrollable, #screen-campaign, #screen-starter, #screen-trainer { justify-content: flex-start; }
.screen.scrollable > :first-child, #screen-campaign > :first-child,
#screen-starter > :first-child, #screen-trainer > :first-child { margin-top: auto; }
.screen.scrollable > :last-child, #screen-campaign > :last-child,
#screen-starter > :last-child, #screen-trainer > :last-child { margin-bottom: auto; }

.screen-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* título de tela: placa da caixa de diálogo, letra de arcade com sombra dura */
.screen-title {
  padding: 4px 14px;
  font-family: var(--font-arcade);
  font-size: clamp(14px, 1.9vw, 22px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--gba-frame);
  text-shadow: 2px 2px 0 var(--gba-shade);
  border: 16px solid transparent;
  border-image: url(../assets/ui/window-frame-button.png) 16 fill stretch;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5));
}
.subtitle {
  color: #d6deeb;
  text-align: center;
  max-width: 760px;
  font-size: 16px;
  line-height: 1.45;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .65);
}
.subtitle.small { font-size: 14px; }
.version-tag {
  position: absolute; bottom: 14px; right: 18px;
  font-family: var(--font-pixel); font-size: 13px;
  color: rgba(232, 237, 245, .7); text-shadow: 2px 2px 0 rgba(0, 0, 0, .6);
}

/* ========================= TELA DE TÍTULO =========================
   A arte de fundo é do Fellipe (a clareira à noite, cercada pela horda de
   olhos vermelhos): ela é o motivo da tela existir, então o véu é leve e só
   escurece atrás do logo e do menu. O menu segue o do Pokemon All: cada
   entrada é uma caixa de diálogo própria, com a Poké Ball de ponteiro na
   escolhida, navegável por ↑ ↓ e Enter (ui/titleMenu.js). */
.title-screen { justify-content: center; padding: 28px; gap: 0; }
/* no título, a arte é o fundo: a barra lateral e o cenário dos menus saem */
#app[data-screen="screen-title"] #side-rail,
#app[data-screen="screen-title"] #menu-bg { display: none; }

.title-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  animation: title-breathe 24s ease-in-out infinite alternate;
}
/* o cenário respira devagar, como uma câmera parada na clareira */
@keyframes title-breathe { from { transform: scale(1); } to { transform: scale(1.045); } }

.title-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 52% at 50% 44%, rgba(6, 8, 22, .55), transparent 78%),
    linear-gradient(180deg, rgba(6, 8, 22, .45) 0%, transparent 22%, transparent 70%, rgba(6, 8, 22, .72) 100%);
}

.title-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  margin-top: -2vh;
  animation: title-in .8s var(--ease) both;
}
@keyframes title-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* saída para o jogo: clareia e afasta, como a abertura do FireRed */
.title-screen.leaving .title-content,
.title-screen.leaving .title-footer,
.title-screen.leaving .title-corner { opacity: 0; transform: scale(1.04); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.title-screen.leaving .title-scrim { background: rgba(6, 8, 22, .9); transition: background .35s var(--ease); }

/* O logo, em pixel: o amarelo e o azul da marca com contorno duro em degraus. */
.logo-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: title-float 7s ease-in-out infinite;
}
@keyframes title-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.logo-main {
  font-family: var(--font-arcade);
  font-size: clamp(34px, 6.2vw, 76px);
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.15;
  color: var(--yellow);
  text-shadow:
    -4px 0 0 var(--logo-blue), 4px 0 0 var(--logo-blue), 0 -4px 0 var(--logo-blue), 0 4px 0 var(--logo-blue),
    -4px -4px 0 var(--logo-blue), 4px -4px 0 var(--logo-blue), -4px 4px 0 var(--logo-blue), 4px 4px 0 var(--logo-blue),
    0 8px 0 var(--logo-blue-deep), 4px 8px 0 var(--logo-blue-deep), -4px 8px 0 var(--logo-blue-deep),
    0 14px 18px rgba(0, 0, 0, .55);
}
/* a placa vermelha de Poké Ball, com moldura dura em degraus */
.logo-sub {
  margin-top: 18px;
  padding: 10px 22px 9px;
  background: var(--poke-red);
  border: 4px solid #ffffff;
  box-shadow: 0 0 0 4px var(--poke-red-dark), 6px 6px 0 4px rgba(0, 0, 0, .45);
}
.logo-sub span {
  font-family: var(--font-arcade);
  font-size: clamp(12px, 1.9vw, 22px);
  letter-spacing: .14em;
  color: #ffffff;
  text-shadow: 2px 2px 0 var(--poke-red-dark);
}
/* o aviso do reset da história (0.39): a caixa de texto do FireRed, no canto livre do título
   (o de cima à direita tem os atalhos; embaixo, a faixa do progresso) */
.story-reset {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  max-width: 300px;
  margin: 0;
  padding: 10px 16px;
  font-family: var(--font-pixel);
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
  color: var(--gba-ink);
  background: #fff;
  border: 4px double var(--gba-frame);
  border-radius: 6px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
}
.tagline {
  font-family: var(--font-pixel);
  font-size: 17px;
  font-weight: 500;
  color: #eef2f8;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .8);
}

/* --- o menu --- */
.title-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(84vw, 360px);
}
.title-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 10px 4px 6px;
  color: var(--gba-ink);
  background: none;
  border: 16px solid transparent;
  border-image: url(../assets/ui/window-frame-button.png) 16 fill stretch;
  font-family: var(--font-pixel);
  font-size: 19px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  /* sombra curta: separa da arte, não dá profundidade */
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .55));
  transition: transform .14s var(--ease), filter .14s var(--ease);
}
.title-item .title-label { flex: 1; }
/* a escolhida: a Poké Ball aparece e a caixa avança, como o cursor do jogo */
.title-item .title-pointer { opacity: 0; transition: opacity .14s var(--ease), transform .14s var(--ease); }
.title-item.on { transform: translateX(8px); filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .6)); }
.title-item.on .title-pointer { opacity: 1; transform: rotate(-12deg); }
.title-item.on .title-label { color: var(--gba-frame); }
.title-item:focus-visible { outline: none; }
.title-item:active:not(:disabled) { transform: translate(10px, 2px); }
.title-item:disabled { cursor: not-allowed; }
.title-item:disabled .title-label { color: #9aa4b6; }

/* selo com moldura no lugar de texto solto (o "em breve" do Pokemon All) */
.title-seal {
  flex-shrink: 0;
  padding: 3px 6px 2px;
  font-family: var(--font-pixel);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gba-ink-soft);
  background: var(--gba-button);
  border: 2px solid var(--gba-button-shade);
  border-radius: 2px;
}
#btn-continue:not(:disabled) .title-seal { color: var(--gba-frame); border-color: var(--gba-frame); }

/* a engrenagem fora do título e da partida (lá ela mora nos atalhos de cada um) */
#gear-btn.gear-float { position: absolute; top: 18px; right: 18px; z-index: 30; }
#app[data-screen="screen-title"] .gear-float,
#app[data-screen="game"] .gear-float { display: none; }

/* --- atalhos no canto --- */
.title-corner {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: flex;
  gap: 8px;
}
.corner-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  color: var(--gba-frame);
  background: var(--gba-button);
  border: 2px solid var(--gba-frame);
  border-radius: 3px;
  cursor: pointer;
  /* relevo duro e sombra sólida: é o que separa o botão da arte */
  box-shadow: var(--relief), 2px 2px 0 rgba(0, 0, 0, .55);
  transition: background .14s var(--ease), transform .08s var(--ease);
}
.corner-btn img { width: 30px; height: 30px; image-rendering: pixelated; }
.corner-btn:hover { background: var(--gba-hover); }
.corner-btn:active { transform: translate(2px, 2px); box-shadow: var(--relief); }
.corner-label {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  padding: 3px 8px;
  white-space: nowrap;
  font-family: var(--font-pixel);
  font-size: 14px;
  font-weight: 600;
  color: var(--gba-ink);
  background: var(--gba-fill);
  border: 2px solid var(--gba-frame);
  border-radius: 3px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s var(--ease);
}
.corner-btn:hover .corner-label, .corner-btn:focus-visible .corner-label { opacity: 1; }

/* --- rodapé: o progresso da conta e as teclas --- */
.title-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.title-hint {
  font-family: var(--font-pixel);
  font-size: 14px;
  color: #dfe6f2;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .8);
}
.title-hint kbd {
  display: inline-block;
  min-width: 22px;
  margin: 0 2px;
  padding: 1px 5px;
  font-family: var(--font-pixel);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: var(--gba-ink);
  background: var(--gba-button);
  border: 2px solid var(--gba-frame);
  border-radius: 3px;
  box-shadow: inset -1px -2px 0 var(--gba-button-shade);
  text-shadow: none;
}
.title-hint .dot { margin: 0 6px; }

/* progresso da conta: selos com moldura, não texto solto */
.progress-strip { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.progress-strip .pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 8px;
  font-family: var(--font-pixel);
  font-size: 14px;
  font-weight: 500;
  color: var(--gba-ink);
  background: var(--gba-button);
  border: 2px solid var(--gba-frame);
  border-radius: 3px;
  box-shadow: var(--relief), 2px 2px 0 rgba(0, 0, 0, .45);
}
.progress-strip .pill b { color: var(--gba-frame); font-weight: 700; }

@media (max-height: 700px) {
  .title-content { gap: 18px; }
  .logo-main { font-size: clamp(28px, 5vw, 58px); }
  .title-item { font-size: 17px; }
  .tagline { display: none; }
}

/* ============================= BOTÕES ============================= */
.menu-column { display: flex; flex-direction: column; gap: 10px; width: min(380px, 86vw); }
.row-buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/*
 * Botão de menu: cada um é uma caixa de diálogo do jogo, com a Poké Ball de
 * ponteiro que aparece no item sob o cursor (ela ocupa espaço sempre, para o
 * rótulo não pular).
 */
.menu-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 3px 6px;
  color: var(--gba-ink);
  background: none;
  border: 16px solid transparent;
  border-image: url(../assets/ui/window-frame-button.png) 16 fill stretch;
  font-family: var(--font-pixel);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .5));
  transition: transform .14s var(--ease);
}
.menu-btn .btn-text { flex: 1; text-align: left; }
.menu-btn:hover:not(:disabled), .menu-btn:focus-visible { transform: translateX(4px); outline: none; }
.menu-btn:active:not(:disabled) { transform: translate(6px, 2px); }
.menu-btn:disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.6) drop-shadow(0 3px 5px rgba(0, 0, 0, .5)); }
/* a ação principal ganha a Poké Ball sempre à vista e o texto em azul */
.menu-btn.primary { color: var(--gba-frame); }
.menu-btn.danger { color: var(--poke-red); }
.menu-btn.ghost { font-size: 16px; }
.menu-btn.slim { font-size: 15px; width: auto; align-self: center; }
.menu-btn.back { width: min(260px, 80vw); justify-content: center; }
.menu-btn.back .btn-text { text-align: center; }
.row-buttons .menu-btn .btn-text, .row-buttons .menu-btn { text-align: center; }

/* Poké Ball no lugar de qualquer bolinha genérica */
.btn-ball, .ball-icon {
  width: 20px;
  height: 20px;
  flex: none;
  background: url(../assets/items/poke-ball.png) center / 30px 30px no-repeat;
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity .14s var(--ease), transform .14s var(--ease);
}
.menu-btn.primary .btn-ball,
.menu-btn:hover:not(:disabled) .btn-ball,
.menu-btn:focus-visible .btn-ball { opacity: 1; }
.menu-btn:hover:not(:disabled) .btn-ball { transform: rotate(-12deg); }
.ball-icon { opacity: 1; }
.ball-icon.big { width: 46px; height: 46px; background-size: 60px 60px; }

/* botão quadrado de ícone (fechar, pausar) */
.icon-btn {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  color: var(--gba-frame);
  background: var(--gba-button);
  border: 2px solid var(--gba-frame);
  border-radius: 3px;
  font-family: var(--font-pixel);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--relief), var(--drop);
  transition: background .12s var(--ease), transform .08s var(--ease);
}
.icon-btn:hover { background: var(--gba-hover); }
.icon-btn:active { transform: translate(2px, 2px); box-shadow: var(--relief); }
.icon-btn.close { position: absolute; top: 0; right: 0; }

/* cartões de escolha: a caixa de diálogo, que sobe ao apontar (o treinador, a
   melhoria e a captura; o inicial tem o card de escolha, mais abaixo) */
.trainer-card, .card {
  color: var(--gba-ink);
  background: none;
  border: 16px solid transparent;
  border-image: url(../assets/ui/window-frame-button.png) 16 fill stretch;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45));
  cursor: pointer;
  transition: transform .14s var(--ease), filter .14s var(--ease);
}
.trainer-card:hover, .trainer-card:focus-visible, .card:hover {
  transform: translateY(-6px);
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .55));
  outline: none;
}

/* ======================= ESCOLHA DO TREINADOR ======================= */
.oak-intro { display: flex; align-items: center; gap: 18px; max-width: 780px; }
.oak-portrait { width: 128px; height: 128px; flex-shrink: 0; image-rendering: pixelated; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }

/* A caixa de texto do FireRed: a mesma moldura, em 3x. */
.fr-window {
  padding: 4px 10px;
  color: var(--gba-ink);
  font-family: var(--font-pixel);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.5;
  text-shadow: 2px 2px 0 var(--gba-shade);
  border: 24px solid transparent;
  border-image: url(../assets/ui/window-frame.png) 24 fill stretch;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .5));
}
/* no FireRed o menino é azul e a menina é vermelha */
.fr-window .boy { color: #3068d8; }
.fr-window .girl { color: #e03838; }

.trainer-grid { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.trainer-card {
  width: 236px;
  padding: 8px 10px 10px;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.trainer-card.selected { transform: translateY(-4px); }
.trainer-portrait { width: 192px; height: 192px; image-rendering: pixelated; }
.trainer-card h3 { font-family: var(--font-arcade); font-size: 15px; font-weight: 400; color: var(--gba-frame); text-shadow: 2px 2px 0 var(--gba-shade); }
.trainer-name { font-size: 14px; color: var(--gba-ink-soft); }

/*
 * O sprite de andar, quadro a quadro como no jogo: folha de 18 quadros de
 * 16x32 em 3x (48x96 cada). O boneco ocupa só a parte de baixo do quadro,
 * por isso a margem negativa.
 */
.trainer-walker {
  width: 48px;
  height: 96px;
  margin-top: -30px;
  background-size: 864px 96px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  animation: trainer-walk .53s step-end infinite;
}
.trainer-card:hover .trainer-walker,
.trainer-card:focus-visible .trainer-walker { animation: trainer-run .27s step-end infinite; }

/* sAnim_GoSouth: um pé, parado, o outro pé, parado */
@keyframes trainer-walk {
  0%   { background-position: -144px 0; }
  25%  { background-position: 0 0; }
  50%  { background-position: -192px 0; }
  75%  { background-position: 0 0; }
}
/* sAnim_RunSouth: a passada por 5/8 do passo, o pé da vez no resto */
@keyframes trainer-run {
  0%     { background-position: -432px 0; }
  31.25% { background-position: -480px 0; }
  50%    { background-position: -432px 0; }
  81.25% { background-position: -528px 0; }
}

/* tipos: pílulas com borda dura */
.type-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.type-tag {
  font-family: var(--font-pixel);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px 1px;
  border: 2px solid rgba(0, 0, 0, .35);
  border-radius: 3px;
  color: #10162a;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .45);
}

/* ========================= MAPA DA JORNADA =========================
   O lobby é o Town Map de Kanto (0.13): ver LOBBY, mais abaixo. */
.silhouette { filter: brightness(0) opacity(.45); }

/* o que o controle está apontando (ui/pad.js) */
.pad-focus { outline: 3px solid var(--poke-red); outline-offset: 3px; }

/* apresentação do líder: retrato grande e a fala na caixa de texto do FireRed */
.leader-intro { display: flex; align-items: center; gap: 24px; max-width: 860px; padding: 0 20px; }
.leader-intro-portrait { width: 256px; height: 256px; flex-shrink: 0; image-rendering: pixelated; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .6)); }
.leader-intro-text { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.leader-intro-text h2 {
  font-family: var(--font-arcade); font-size: 26px; font-weight: 400;
  color: var(--yellow); text-shadow: 3px 3px 0 var(--logo-blue-deep), 0 0 0 transparent;
}
.leader-intro-text .menu-btn { min-width: 200px; }

/* Hall da Fama: a equipe campeã entra um Pokémon por vez. Só o card do Hall da Fama (o
   overlay-card): o card do salão do Kyogre e o das missões também usam .hall-card, e com
   esta regra o banner deles encolhia a zero (0.39) */
.overlay-card.hall-card { max-width: 940px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hall-row { display: flex; align-items: center; gap: 20px; }
.hall-trainer { width: 192px; height: 192px; flex-shrink: 0; image-rendering: pixelated; }
.hall-team { display: grid; grid-template-columns: repeat(3, 150px); gap: 10px; }
.hall-mon {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px; background: var(--gba-button); border: 2px solid var(--gba-shade); border-radius: 3px;
  opacity: 0; animation: hall-in .5s ease-out forwards;
}
.hall-mon img { width: 72px; height: 72px; object-fit: contain; image-rendering: pixelated; }
.hall-mon b { font-size: 15px; color: var(--gba-ink); }
.hall-mon span { font-size: 13px; color: var(--gba-frame); font-weight: 700; }
.hall-credits { font-size: 13px; color: var(--gba-ink-soft); max-width: 640px; line-height: 1.45; }
@keyframes hall-in { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }

/* o treinador parado, de frente, em 2x (o quadro 0 da folha, sem o espaço vazio de cima) */
.option-trainer {
  display: block;
  width: 32px;
  height: 42px;
  background-size: 576px 64px;
  background-position: 0 -22px;
  image-rendering: pixelated;
}

/* ============================ LISTAS ============================
   Dentro das janelas brancas: linhas separadas por pontilhado. */
.node-list { display: flex; flex-direction: column; }

.node {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 6px;
  color: var(--gba-ink);
  border-bottom: 3px dotted var(--gba-shade);
}
.node:last-child { border-bottom: none; }
.node.locked { opacity: .5; }
.node .node-icon { width: 34px; text-align: center; }
.node .node-body { flex: 1; min-width: 0; }
.node .node-body h4 { font-family: var(--font-pixel); font-size: 16px; font-weight: 700; color: var(--gba-ink); }
.node .node-body p { font-size: 14px; color: var(--gba-ink-soft); margin-top: 2px; line-height: 1.4; }
.node .node-meta { font-size: 13px; color: var(--gba-ink-soft); margin-top: 3px; }
.node .node-state { font-size: 14px; font-weight: 600; color: var(--gba-ink-soft); text-align: right; min-width: 74px; }
.node .node-state.done { color: #2f9a45; }
.node img.node-sprite { width: 52px; height: 52px; object-fit: contain; image-rendering: pixelated; }
/* botões dentro das listas (Opções) */
.node button:not(.claim-btn):not(.buy-btn) {
  padding: 6px 12px;
  font-family: var(--font-pixel);
  font-size: 15px;
  font-weight: 600;
  color: var(--gba-ink);
  background: var(--gba-button);
  border: 2px solid var(--gba-frame);
  border-radius: 3px;
  box-shadow: var(--relief), var(--drop);
  cursor: pointer;
}
.node button:not(.claim-btn):not(.buy-btn):hover { background: var(--gba-hover); }
.node button:not(.claim-btn):not(.buy-btn):active { transform: translate(2px, 2px); box-shadow: var(--relief); }
/* a pergunta de reiniciar a jornada (Opções, 0.33): os dois botões lado a lado, e o
   "Sim" no vermelho do que não volta (depois da regra de cima, com o mesmo peso) */
.node .node-actions { display: flex; gap: 8px; flex-shrink: 0; }
.node .node-actions button.danger { color: var(--poke-red); border-color: var(--poke-red); }

.stat-list { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.stat-list div {
  display: flex; justify-content: space-between; gap: 20px;
  padding-bottom: 5px; border-bottom: 3px dotted var(--gba-shade);
  font-size: 15px; color: var(--gba-ink-soft);
}
.stat-list div:last-child { border-bottom: none; }
.stat-list div b { color: var(--gba-ink); }

/* ============================= MODAIS =============================
   A janela do jogo por cima da tela escurecida. */
.modal {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(180deg, rgba(6, 10, 18, .72), rgba(6, 10, 18, .86));
  animation: fade-in .16s ease-out;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal-card, .overlay-card {
  position: relative;
  color: var(--gba-ink);
  border: 24px solid transparent;
  border-image: url(../assets/ui/window-frame.png) 24 fill stretch;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .55));
  animation: pop-in .3s var(--ease) both;
}
.modal-card {
  width: min(680px, 94vw);
  max-height: min(86vh, 780px);
  display: flex;
  flex-direction: column;
}
.modal-card.wide { width: min(1060px, 96vw); }
@keyframes pop-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

.modal-head {
  position: relative;
  padding: 4px 48px 14px 6px;
  border-bottom: 3px dotted var(--gba-shade);
}
.modal-head h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-arcade);
  font-size: clamp(12px, 1.6vw, 16px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--gba-frame);
  text-shadow: 2px 2px 0 var(--gba-shade);
}
.modal-head h3 .ui-icon { width: 26px; height: 26px; }
.modal-head .modal-sub { display: block; font-size: 15px; color: var(--gba-ink-soft); margin-top: 8px; }

.modal-body { padding: 14px 6px 4px; overflow-y: auto; }

.help-grid { display: flex; flex-direction: column; margin-bottom: 14px; }
.help-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 4px;
  border-bottom: 3px dotted var(--gba-shade);
}
.help-item b {
  min-width: 130px;
  padding: 2px 8px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: var(--gba-ink);
  background: var(--gba-button);
  border: 2px solid var(--gba-button-shade);
  border-radius: 3px;
}
.help-item span { font-size: 15px; color: var(--gba-ink); }
.modal-body .subtitle { color: var(--gba-ink-soft); text-shadow: none; text-align: left; margin-top: 8px; }

/* ============================= POKÉDEX ============================= */
.dex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 6px;
}
.dex-cell {
  padding: 6px 4px 5px;
  text-align: center;
  font-size: 13px;
  color: var(--gba-ink-soft);
  background: var(--gba-button);
  border: 2px solid var(--gba-shade);
  border-radius: 3px;
  transition: transform .12s var(--ease);
}
.dex-cell img { width: 58px; height: 58px; object-fit: contain; image-rendering: pixelated; margin: 0 auto; display: block; }
.dex-cell .dex-num { font-family: var(--font-arcade); font-size: 8px; color: var(--gba-ink-soft); }
/* não capturado = silhueta */
.dex-cell.unknown img { filter: brightness(0) opacity(.28); }
.dex-cell.unknown .dex-name { color: #9aa4b6; }
/* o lendário secreto do fim da Pokédex (0.35): sem número e sem silhueta, só o "?" */
.dex-cell.mystery .dex-mystery { height: 58px; display: grid; place-items: center; font-family: var(--font-arcade); font-size: 26px; color: #9aa4b6; }
.dex-cell.mystery .dex-name { color: #9aa4b6; }
.dex-cell.caught {
  color: var(--gba-ink);
  background: var(--gba-fill);
  border-color: var(--gba-frame);
  box-shadow: var(--relief);
}
.dex-cell.caught .dex-num { color: var(--gba-frame); }
.dex-cell.caught:hover { transform: translateY(-3px); }

/* =============================== JOGO =============================== */
#stage-wrapper {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #04060e;
}
#game-canvas { width: 100%; height: 100%; object-fit: contain; display: block; image-rendering: pixelated; }

/*
 * O HUD da partida fica sobre o mapa: caixas "noite" do jogo (azul-escuro
 * com contorno duro e a linha clara por dentro), que não brigam com o
 * cenário claro.
 */
#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 18px 18px;
}
#hud button, #hud .mon-card, #hud .bench-mon { pointer-events: auto; }

.hud-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.hud-chip, .mon-card, .bench-mon, .swap-chip {
  background: rgba(19, 32, 58, .92);
  border: 2px solid var(--gba-night-edge);
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px var(--gba-night-line), 3px 3px 0 rgba(0, 0, 0, .45);
}
.hud-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
}
.stage-chip { flex-direction: column; align-items: flex-start; gap: 3px; }
#stage-name { font-family: var(--font-arcade); font-size: 10px; color: #eef2f8; }
#objective { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--gba-gold); }
.timer-chip { padding: 8px 20px; }
#timer { font-family: var(--font-arcade); font-size: 22px; color: #ffffff; text-shadow: 2px 2px 0 #000; }
.stats-chip { font-size: 15px; font-weight: 600; }
#kill-count::before { content: '⚔ '; color: var(--hp-low); }
#ball-count::before { content: '◓ '; color: var(--gba-gold); }
#shard-count::before { content: '◆ '; color: #7fdcff; }   /* os Shards (0.25) */
.stats-chip .icon-btn { min-width: 30px; height: 30px; font-size: 12px; padding: 0 6px; }

/* ============ o mixer de volume (Opções) ============
   A barra em degraus e a Poké Ball de manopla, como no Pokemon All. */
.volume-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.volume-value { min-width: 48px; font-weight: 700; color: var(--gba-frame); text-align: right; }
.volume-slider {
  --fill: 60%;
  flex: 1;
  height: 22px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
.volume-slider::-webkit-slider-runnable-track {
  height: 12px;
  border: 2px solid var(--gba-frame);
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(0, 0, 0, .12) 6px 8px),
    linear-gradient(90deg, var(--gba-frame) var(--fill), var(--gba-button) var(--fill));
}
.volume-slider::-moz-range-track {
  height: 12px;
  border: 2px solid var(--gba-frame);
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(0, 0, 0, .12) 6px 8px),
    linear-gradient(90deg, var(--gba-frame) var(--fill), var(--gba-button) var(--fill));
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -9px;
  border: none;
  background: url(../assets/items/poke-ball.png) center / 38px 38px no-repeat;
  image-rendering: pixelated;
}
.volume-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: none;
  background: url(../assets/items/poke-ball.png) center / 38px 38px no-repeat;
  image-rendering: pixelated;
}

/* ====== equipe no HUD ====== */
#team-hud { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.active-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.mon-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 224px;
  padding: 7px 12px 8px 8px;
  cursor: pointer;
  transition: transform .12s var(--ease);
}
.mon-card:hover { transform: translateY(-2px); }
.mon-card.selected { border-color: var(--gba-gold); box-shadow: inset 0 0 0 2px var(--gba-gold), 3px 3px 0 rgba(0, 0, 0, .45); }
.mon-card.fainted { filter: grayscale(1); opacity: .5; }
.mon-card img { width: 46px; height: 46px; object-fit: contain; image-rendering: pixelated; flex: none; }
.mon-card .mon-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mon-card .mon-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.mon-card .mon-name {
  font-size: 15px; font-weight: 600; color: #eef2f8; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.mon-card .mon-lv { font-family: var(--font-arcade); font-size: 8.5px; color: var(--gba-gold); flex: none; }
.mon-card .key-hint, .bench-mon .key-hint {
  position: absolute; top: -9px; left: -9px;
  min-width: 20px; height: 20px; padding: 0 4px;
  display: grid; place-items: center;
  font-family: var(--font-arcade); font-size: 8px;
  color: var(--gba-ink);
  background: var(--gba-button);
  border: 2px solid var(--gba-frame);
  border-radius: 3px;
}

.bench-block { display: flex; align-items: center; gap: 12px; }
.bench-row { display: flex; gap: 8px; }

.bench-mon {
  position: relative;
  width: 60px;
  padding: 5px 4px 6px;
  text-align: center;
  cursor: pointer;
  transition: transform .12s var(--ease);
}
.bench-mon:hover { transform: translateY(-2px); border-color: var(--gba-gold); }
.bench-mon.disabled { opacity: .55; cursor: not-allowed; }
.bench-mon.fainted { filter: grayscale(1); opacity: .42; cursor: not-allowed; }
.bench-mon.empty { opacity: .35; cursor: default; box-shadow: inset 0 0 0 2px var(--gba-night-line); }
.bench-mon img { width: 38px; height: 38px; object-fit: contain; image-rendering: pixelated; margin: 0 auto; display: block; }
.bench-mon .bench-lv { font-family: var(--font-arcade); font-size: 7px; color: var(--gba-gold); }

/* quem sai na próxima troca */
.mon-card .swap-tag {
  position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%);
  padding: 1px 7px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  color: var(--gba-gold-ink); background: var(--gba-gold);
  border: 2px solid var(--gba-gold-ink); border-radius: 3px;
  pointer-events: none;
}

/* espadinha: o Pokémon ativo ataca (ligada) ou só acompanha (desligada) */
.attack-btn {
  position: absolute; bottom: -11px; left: -11px;
  width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center;
  background: var(--poke-red);
  border: 2px solid #ffffff;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--poke-red-dark), 2px 2px 0 2px rgba(0, 0, 0, .4);
}
.attack-btn:active { transform: translate(1px, 1px); }
.attack-btn.off { background: #3a4466; box-shadow: 0 0 0 2px var(--gba-night-edge); }
.attack-btn.off svg { opacity: .5; }
.attack-btn.off::after {
  content: ''; position: absolute; width: 24px; height: 3px;
  background: var(--hp-low); transform: rotate(-45deg);
}
.mon-card.passive img { filter: saturate(.5); }

/* botão de subir nível acumulado */
.level-btn {
  position: absolute;
  top: -11px; right: -11px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 900;
  color: var(--gba-gold-ink);
  background: var(--gba-gold);
  border: 2px solid #ffffff;
  border-radius: 3px;
  box-shadow: 0 0 0 2px var(--gba-gold-ink), 2px 2px 0 2px rgba(0, 0, 0, .35);
  cursor: pointer;
  animation: pulse-up 1.1s steps(2) infinite;
}
@keyframes pulse-up {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.level-btn .count {
  position: absolute; bottom: -8px; right: -7px;
  padding: 0 4px;
  font-size: 10px; font-weight: 700;
  color: #ffffff; background: var(--poke-red);
  border: 1px solid #ffffff; border-radius: 2px;
}

/* barras em degraus, nas cores do FireRed */
.bar {
  position: relative;
  height: 9px;
  background: #283048;
  border: 2px solid #0a1222;
  border-radius: 2px;
  overflow: hidden;
}
.bar i {
  display: block; height: 100%; width: 0%;
  transition: width .14s linear;
  /* os degraus: um risco escuro a cada 4 px, como a barra do jogo */
  background-image: repeating-linear-gradient(90deg, transparent 0 3px, rgba(0, 0, 0, .14) 3px 4px);
}
.bar.hp i { background-color: var(--hp-high); }
.bar.hp.low i { background-color: var(--hp-mid); }
.bar.hp.critical i { background-color: var(--hp-low); }
.bar.xp { height: 7px; }
.bar.xp i { background-color: var(--xp); }
/* o Level Cap: no teto, a barra de XP cheia e dourada, e o nível num selo */
.bar.xp.capped i { background-color: var(--gba-gold); }
.mon-card .mon-lv.capped { color: #2b1d00; background: var(--gba-gold); padding: 2px 4px; border-radius: 2px; }
.bar.swap { width: 90px; height: 8px; }
.bar.swap i { background-color: #a07cff; }
.bar.tiny { height: 6px; margin-top: 3px; }

.swap-chip {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 7px 12px;
}
.swap-label { font-family: var(--font-arcade); font-size: 8px; color: #c8d2e6; }
#swap-text { font-size: 13px; font-weight: 600; color: #eef2f8; }

/* ============================ OVERLAYS ============================ */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(180deg, rgba(6, 10, 18, .66), rgba(6, 10, 18, .82));
  animation: fade-in .14s ease-out;
}
.overlay-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 8px 10px;
  max-width: 94vw;
  max-height: 92vh;
  overflow-y: auto;
}
.overlay-card.narrow { width: min(460px, 92vw); }
.overlay-card h2 {
  font-family: var(--font-arcade);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--gba-frame);
  text-shadow: 2px 2px 0 var(--gba-shade);
}
.overlay-card .subtitle { color: var(--gba-ink-soft); text-shadow: none; }
.glow { color: var(--gba-frame); }
#result-title.victory { color: #2f9a45; }
#result-title.defeat { color: var(--poke-red); }

.overlay-head {
  display: flex; align-items: center; gap: 16px; text-align: left;
  width: 100%; padding-bottom: 12px; border-bottom: 3px dotted var(--gba-shade);
}
.overlay-head .subtitle { text-align: left; }
.overlay-sprite { width: 76px; height: 76px; object-fit: contain; image-rendering: pixelated; }

.card-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* escolhas de melhoria e de captura: caixinhas do jogo dentro da janela */
.card {
  width: 236px;
  padding: 6px 6px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3));
}
.card:hover { filter: drop-shadow(0 7px 6px rgba(0, 0, 0, .35)); }
.card.evolution { box-shadow: inset 0 0 0 3px var(--gba-gold); }
.card h3 { font-size: 17px; font-weight: 700; color: var(--gba-ink); }
/* já registrado na Pokédex (0.17): a Poké Ball ao lado do nome, como no FireRed */
.card h3 .caught-ball { width: 16px; height: 16px; margin-right: 5px; vertical-align: -2px; image-rendering: pixelated; }
.card p { font-size: 14.5px; color: var(--gba-ink-soft); line-height: 1.4; }
.card .card-icon { line-height: 1; }
.card img.card-sprite { width: 92px; height: 92px; object-fit: contain; image-rendering: pixelated; }
.card .stack-info { font-size: 13px; color: var(--gba-ink-soft); }
.card .chip {
  font-size: 13px; font-weight: 600; padding: 2px 8px;
  color: var(--gba-ink); background: var(--gba-button);
  border: 2px solid var(--gba-button-shade); border-radius: 3px;
}

.team-summary { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.team-summary .sum-mon {
  width: 66px; padding: 5px 3px;
  text-align: center; font-size: 13px; color: var(--gba-ink-soft);
  background: var(--gba-button); border: 2px solid var(--gba-shade); border-radius: 3px;
}
.team-summary .sum-mon img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; margin: 0 auto; display: block; }
.team-summary .sum-mon.fainted { filter: grayscale(1); opacity: .45; }
.team-summary .sum-mon b { display: block; color: var(--gba-frame); font-size: 13px; }

/* ============================= TOASTS ============================= */
#toast-container {
  position: absolute;
  top: 86px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  z-index: 60; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px;
  font-size: 16px; font-weight: 600;
  color: var(--gba-ink);
  border: 16px solid transparent;
  border-image: url(../assets/ui/window-frame-button.png) 16 fill stretch;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5));
  animation: toast-in .22s var(--ease);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ============================ RESPONSIVO ============================ */
@media (max-width: 820px) {
  .screen { padding-left: 86px; }
  .mon-card { width: 182px; }
  #side-rail { left: 10px; }
  .rail-btn { width: 42px; height: 42px; }
}

/* ===================== EVOLUÇÃO ===================== */
.evolution-card { text-align: center; }
.evo-stage { display: flex; align-items: center; justify-content: center; gap: 18px; }
.evo-sprite { width: 110px; height: 110px; object-fit: contain; image-rendering: pixelated; }
.evo-sprite.evo-new { animation: evo-pop .6s ease-out; }
.evo-arrow { font-size: 30px; color: var(--gba-frame); }
@keyframes evo-pop {
  0% { transform: scale(.4); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}

/* ================= MELHORIAS DO TREINADOR ================= */
.shop-item { align-items: center; }
.shop-item .bar { margin-top: 6px; }
.buy-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 100px; padding: 6px 12px;
  font-family: var(--font-pixel); font-size: 14px; font-weight: 600;
  color: var(--gba-ink);
  background: var(--gba-button);
  border: 2px solid var(--gba-frame); border-radius: 3px;
  box-shadow: var(--relief), var(--drop);
  cursor: pointer;
  transition: background .12s var(--ease), transform .08s var(--ease);
}
.buy-btn b { color: var(--gba-frame); font-size: 15px; }
.buy-btn:hover:not(:disabled) { background: var(--gba-hover); }
.buy-btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: var(--relief); }
.buy-btn:disabled { opacity: .5; cursor: not-allowed; }
.buy-btn.maxed { border-color: #2f9a45; color: #2f9a45; }

.coin-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px;
  font-weight: 700; font-size: 15px;
  color: var(--gba-gold-ink); background: var(--gba-gold);
  border: 2px solid var(--gba-gold-ink); border-radius: 3px;
}

/* TM e evolução destacadas na tela de melhoria */
.card.tm { box-shadow: inset 0 0 0 3px #7d63ff; }
.card.tm .card-icon { animation: pulse-up 1.4s steps(2) infinite; }

/* trecho da jornada no HUD */
#segment-name { font-size: 14px; font-weight: 600; color: #c8d2e6; }

/* ===================== ÍCONES DE ITEM ===================== */
.ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 15px;
  line-height: 1;
}
.ui-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.ui-icon.big { width: 54px; height: 54px; }
.node-icon .ui-icon { width: 100%; height: 100%; }
.card-icon .ui-icon { width: 44px; height: 44px; }
.progress-strip .pill .ui-icon { width: 20px; height: 20px; }
.toast .ui-icon { width: 22px; height: 22px; }

/* ================= LOJA DO TREINADOR (Shards) ================= */
.shop-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 6px;
  border-bottom: 3px dotted var(--gba-shade);
}
.shop-card:last-child { border-bottom: none; }
.shop-card.locked { opacity: .62; }

.shop-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--gba-button);
  border: 2px solid var(--gba-shade);
  border-radius: 3px;
  flex: none;
}
.shop-body { flex: 1; min-width: 0; }
.shop-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.shop-title h4 { font-size: 16px; font-weight: 700; color: var(--gba-ink); }
.shop-level { font-family: var(--font-arcade); font-size: 8px; color: var(--gba-frame); }
.shop-body p { font-size: 14px; color: var(--gba-ink-soft); margin-top: 3px; line-height: 1.4; }

/* barra em degraus: um bloco por nível */
.pips { display: flex; gap: 3px; margin-top: 7px; }
.pips .pip {
  width: 100%;
  height: 8px;
  background: var(--gba-button);
  border: 2px solid var(--gba-shade);
}
.pips .pip.on { background: var(--gba-frame); border-color: var(--logo-blue-deep); }

.buy-btn b, .claim-btn b { display: inline-flex; align-items: center; gap: 4px; }

/* ================= CONQUISTAS COLETÁVEIS ================= */
.node.achievement.claimable { background: #fff8de; }
.node.achievement.claimed .node-state { color: #2f9a45; }
.node.achievement .node-state { display: inline-flex; align-items: center; gap: 5px; justify-content: flex-end; }

.claim-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 108px;
  padding: 6px 12px;
  font-family: var(--font-pixel);
  font-size: 14px;
  font-weight: 700;
  color: var(--gba-gold-ink);
  background: var(--gba-gold);
  border: 2px solid var(--gba-gold-ink);
  border-radius: 3px;
  box-shadow: inset -2px -2px 0 #d9a93a, inset 2px 2px 0 #fff3c4, var(--drop);
  cursor: pointer;
  animation: pulse-up 1.4s steps(2) infinite;
}
.claim-btn:active { transform: translate(2px, 2px); }
.claim-btn b { color: var(--gba-gold-ink); font-size: 15px; }

/* insígnias oficiais no mapa */
.badge-img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  image-rendering: pixelated;
}

/* ================= CONQUISTAS EM NÍVEIS =================
   O degrau em algarismo romano e uma Poké Ball por degrau: cheia nos
   coletados, piscando no que está pronto para coletar. */
.tier-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px 0;
  font-family: var(--font-arcade);
  font-size: 9px;
  color: var(--gba-frame);
  background: var(--gba-button);
  border: 2px solid var(--gba-frame);
  border-radius: 2px;
  vertical-align: 2px;
}
.tier-pips { display: inline-flex; gap: 3px; margin-right: 6px; vertical-align: -3px; }
.tier-pip {
  width: 14px;
  height: 14px;
  background: url(../assets/items/poke-ball.png) center / 21px 21px no-repeat;
  image-rendering: pixelated;
  filter: grayscale(1) opacity(.35);
}
.tier-pip.on { filter: none; }
.tier-pip.ready { filter: none; animation: pulse-up 1s steps(2) infinite; }


/* ================================ PC ================================
   A tela de armazenamento do FireRed, trazida do Pokemon All (DEC-004 de lá;
   0.12 aqui). É composta em pixels do GBA, 288x160; `--px` é quanto vale um
   pixel do GBA na tela (ui/pcScreen.js: o maior inteiro que cabe) e `--ipx`,
   o pixel do ícone do Pokémon, um degrau abaixo. A arte vem ampliada 4x no
   arquivo; cada peça é desenhada com o tamanho dela em pixels do GBA. */
.modal.pc-modal {
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(6, 10, 18, .8), rgba(6, 10, 18, .9)),
    url(../assets/ui/title-background.webp) center 58% / cover no-repeat;
}
.pc-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pc-screen {
  --px: 2px;
  --ipx: 1px;
  position: relative;
  width: calc(var(--px) * 288);
  height: calc(var(--px) * 160);
  overflow: hidden;
  background: url(../assets/pc/background-tile.png) 0 0 / calc(var(--px) * 32) calc(var(--px) * 32) repeat;
  image-rendering: pixelated;
  font-family: var(--font-pixel);
  font-size: calc(var(--px) * 8);
  color: var(--gba-ink);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  cursor: none;
  /* a moldura do "monitor": contorno duro, sem blur */
  box-shadow:
    0 0 0 calc(var(--px) * 2) var(--gba-night-edge),
    0 0 0 calc(var(--px) * 4) var(--gba-frame),
    8px 10px 0 calc(var(--px) * 4) rgba(0, 0, 0, .45);
  animation: pop-in .3s var(--ease) both;
}
.pc-hint {
  margin: 0;
  max-width: 92vw;
  font-family: var(--font-pixel);
  font-size: 15px;
  color: #dfe8f5;
  text-align: center;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .6);
}
.pc-hint--warn { color: var(--gba-gold); }

/* toda peça é posicionada em pixels do GBA */
.gba {
  position: absolute;
  left: calc(var(--px) * var(--x));
  top: calc(var(--px) * var(--y));
  width: calc(var(--px) * var(--w));
  height: calc(var(--px) * var(--h));
}
:where(.pc-screen button) { padding: 0; border: 0; background-color: transparent; color: inherit; cursor: none; }
.pc-screen button:focus-visible { outline: calc(var(--px) * 1) solid var(--gba-gold); outline-offset: calc(var(--px) * 1); }

/* --- DADOS (o PKMN DATA do jogo) --- */
.pc-data {
  background: url(../assets/pc/data-panel-wave.png) 0 0 / 400% 100% no-repeat;
  image-rendering: pixelated;
  animation: pc-wave 1.2s steps(4) infinite;
}
@keyframes pc-wave { to { background-position: 133.333% 0; } }
.pc-data__label {
  position: absolute;
  left: calc(var(--px) * 14);
  top: calc(var(--px) * 2);
  width: calc(var(--px) * 53);
  height: calc(var(--px) * 10);
  display: grid;
  place-items: center;
  font-size: calc(var(--px) * 8);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #f8d88f;
  text-shadow:
    calc(var(--px) * 1) 0 0 #4f4f57, calc(var(--px) * -1) 0 0 #4f4f57,
    0 calc(var(--px) * 1) 0 #4f4f57, 0 calc(var(--px) * -1) 0 #4f4f57;
}
.pc-data__sprite {
  position: absolute;
  left: calc(var(--px) * 8);
  top: calc(var(--px) * 15);
  width: calc(var(--px) * 64);
  height: calc(var(--px) * 64);
  image-rendering: pixelated;
}
.pc-data__info {
  position: absolute;
  left: calc(var(--px) * 6);
  top: calc(var(--px) * 83);
  width: calc(var(--px) * 68);
  display: flex;
  flex-direction: column;
  gap: calc(var(--px) * 3);
  line-height: 1;
  color: #fff;
  text-shadow: calc(var(--px) * 1) calc(var(--px) * 1) 0 #4f4f57;
}
.pc-data__info p { margin: 0; }
.pc-data__name { font-size: calc(var(--px) * 8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-data__level { font-family: var(--font-arcade); font-size: calc(var(--px) * 6); }
.pc-data__line { font-size: calc(var(--px) * 7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-data__where { color: #f8d88f; }
.pc-types { display: flex; flex-wrap: wrap; gap: calc(var(--px) * 2); }
.pc-type {
  padding: calc(var(--px) * 1) calc(var(--px) * 3);
  border-radius: calc(var(--px) * 2);
  font-size: calc(var(--px) * 6);
  color: #fff;
  text-shadow: calc(var(--px) * .5) calc(var(--px) * .5) 0 rgba(0, 0, 0, .45);
}

/* --- a caixa --- */
.pc-banner {
  display: grid;
  place-items: center;
  background: center / 100% 100% no-repeat;
  image-rendering: pixelated;
  font-family: var(--font-arcade);
  font-size: calc(var(--px) * 8);
  line-height: 1;
  color: var(--gba-ink);
  text-shadow: calc(var(--px) * 1) calc(var(--px) * 1) 0 rgba(255, 255, 255, .65);
}
.pc-arrow { background: center / 100% 100% no-repeat; image-rendering: pixelated; }
.pc-arrow--left { background-image: url(../assets/pc/arrow-left.png); animation: pc-nudge-left .8s steps(1) infinite; }
.pc-arrow--right { background-image: url(../assets/pc/arrow-right.png); animation: pc-nudge-right .8s steps(1) infinite; }
@keyframes pc-nudge-left { 50% { transform: translateX(calc(var(--px) * -1)); } }
@keyframes pc-nudge-right { 50% { transform: translateX(calc(var(--px) * 1)); } }
.pc-wall { background: 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }

/* --- as casas e os ícones --- */
.pc-slot { --lift: 0; }
.pc-slot--team { --lift: 2; }
.pc-mon { position: absolute; inset: 0; pointer-events: none; }
/* centrado na casa, com o pé no fundo dela; dois quadros empilhados, o de cima é o parado */
.pc-icon {
  position: absolute;
  left: calc((var(--w) * var(--px) - 32 * var(--ipx)) / 2);
  bottom: calc(var(--lift) * var(--px));
  width: calc(32 * var(--ipx));
  height: calc(32 * var(--ipx));
  background: 0 0 / 100% 200% no-repeat;
  image-rendering: pixelated;
}
.pc-icon--active { animation: pc-icon .5s steps(1) infinite; }
@keyframes pc-icon { 50% { background-position: 0 100%; } }
.pc-mon--ghost { opacity: .55; }
/* a bolinha dos 3 em campo, no canto da vaga da equipe */
.pc-slot--field::before {
  content: '';
  position: absolute;
  left: calc(var(--px) * 1);
  top: calc(var(--px) * 1);
  width: calc(var(--px) * 5);
  height: calc(var(--px) * 5);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--poke-red) 45%, #2d3442 45% 55%, #f8f8f8 55%);
  box-shadow: 0 0 0 calc(var(--px) * .5) #2d3442;
  z-index: 1;
}

/* --- a mira: o lugar sob a mão ganha moldura; com um Pokémon na mão, a cor diz
   o que acontece ao soltar: dourada vai, laranja troca, vermelha não pode --- */
.pc-slot::after, .pc-banner::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.pc-slot--point::after, .pc-banner--aim::after {
  box-shadow: inset 0 0 0 var(--px) var(--gba-ink), inset 0 0 0 calc(var(--px) * 2) #f8f8f8;
}
.pc-slot--drop::after { --aim: #f8d030; }
.pc-slot--swap::after { --aim: #f08030; }
.pc-slot--blocked::after { --aim: #e04038; }
.pc-slot--drop::after, .pc-slot--swap::after, .pc-slot--blocked::after {
  background: color-mix(in srgb, var(--aim) 22%, transparent);
  box-shadow: inset 0 0 0 var(--px) var(--gba-ink), inset 0 0 0 calc(var(--px) * 2) var(--aim);
  animation: pc-aim .5s steps(1) infinite;
}
@keyframes pc-aim {
  50% { box-shadow: inset 0 0 0 var(--px) var(--gba-ink), inset 0 0 0 calc(var(--px) * 2) #f8f8f8; }
}
.pc-arrow--aim {
  filter: drop-shadow(var(--px) 0 0 #f8f8f8) drop-shadow(calc(var(--px) * -1) 0 0 #f8f8f8)
    drop-shadow(0 var(--px) 0 #f8f8f8) drop-shadow(0 calc(var(--px) * -1) 0 #f8f8f8);
}
.pc-arrow--carry {
  filter: drop-shadow(var(--px) 0 0 #f8d030) drop-shadow(calc(var(--px) * -1) 0 0 #f8d030)
    drop-shadow(0 var(--px) 0 #f8d030) drop-shadow(0 calc(var(--px) * -1) 0 #f8d030);
  animation-duration: .3s;
}

/* --- a equipe, o botão e a mão --- */
.pc-team { background: url(../assets/pc/team-panel.png) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
.pc-button {
  display: grid;
  place-items: center;
  background: url(../assets/pc/button.png) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  font-size: calc(var(--px) * 8);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: calc(var(--px) * 1) calc(var(--px) * 1) 0 #70b860;
}
.pc-button--on { background-image: url(../assets/pc/button-on.png); text-shadow: calc(var(--px) * 1) calc(var(--px) * 1) 0 #6088b8; }
.pc-hand {
  position: absolute;
  z-index: 8;
  left: calc(var(--px) * var(--x));
  top: calc(var(--px) * var(--y));
  width: calc(var(--px) * 18);
  height: calc(var(--px) * 20);
  pointer-events: none;
  transition: left .06s linear, top .06s linear;
  animation: pc-bob .9s steps(1) infinite;
}
.pc-hand[hidden] { display: none; }
/* seguindo o mouse, ela é o cursor: sem balanço e sem atraso */
.pc-hand--free { left: calc(var(--px) * var(--mx)); top: calc(var(--px) * var(--my)); transition: none; animation: none; }
.pc-hand--free[hidden] { display: block; }
.pc-hand__sprite { position: absolute; inset: 0; background: url(../assets/pc/hand.png) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
/* o Pokémon pego vai na ponta do dedo, por baixo da mão */
.pc-hand__mon {
  position: absolute;
  left: calc(var(--px) * var(--tip-x) - 16 * var(--ipx));
  top: calc(var(--px) * var(--tip-y) - 16 * var(--ipx));
  width: calc(32 * var(--ipx));
  height: calc(32 * var(--ipx));
}
.pc-hand__mon .pc-icon { left: 0; bottom: 0; }
@keyframes pc-bob { 50% { transform: translateY(calc(var(--px) * 2)); } }

/* na tela de "equipe cheia", a caixinha de mandar o novo para o PC */
.card.to-pc { box-shadow: inset 0 0 0 3px var(--gba-frame); }


/* ========================= DERROTA E CENTRO POKÉMON =========================
   A derrota oferece duas saídas: o Centro Pokémon (cura e tenta de novo) ou
   a jornada do zero, que pede confirmação. */
.menu-btn .btn-sub {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  color: var(--gba-ink-soft);
}
.confirm-text {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--gba-ink);
  text-align: left;
}
.center-title { display: flex; align-items: center; justify-content: center; gap: 8px; color: #d0506a; }
.center-note {
  margin: 12px auto 14px;
  max-width: 380px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--gba-ink-soft);
}
.center-note:empty { display: none; }
#center-overlay .team-summary .sum-mon { animation: center-heal .9s var(--ease) both; }
#center-overlay .team-summary .sum-mon:nth-child(2) { animation-delay: .12s; }
#center-overlay .team-summary .sum-mon:nth-child(3) { animation-delay: .24s; }
#center-overlay .team-summary .sum-mon:nth-child(4) { animation-delay: .36s; }
#center-overlay .team-summary .sum-mon:nth-child(5) { animation-delay: .48s; }
#center-overlay .team-summary .sum-mon:nth-child(6) { animation-delay: .6s; }
/* a cura: cada Pokémon pisca em rosa e volta ao normal, como a máquina do Centro */
@keyframes center-heal {
  0% { filter: brightness(1.8) sepia(1) hue-rotate(290deg); transform: translateY(2px); }
  60% { filter: brightness(1.3) sepia(.4) hue-rotate(290deg); transform: translateY(-3px); }
  100% { filter: none; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #center-overlay .team-summary .sum-mon { animation: none; }
}


/* ======================== CAPTURA: NADA SE PERDE ========================
   0.12: os testes mostraram jogadores deixando de capturar por achar que um
   Pokémon da equipe seria descartado. O aviso diz que o PC guarda; com a
   equipe cheia, em destaque. */
.capture-note {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 760px;
  margin: 2px auto 12px;
  padding: 8px 12px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--gba-ink-soft);
  text-align: left;
  border-top: 3px dotted var(--gba-shade);
  border-bottom: 3px dotted var(--gba-shade);
}
.capture-note .ui-icon { flex: none; }
.capture-note.strong {
  color: var(--gba-ink);
  background: #e6f0fb;
  border: 2px solid var(--gba-frame);
  border-radius: 3px;
  box-shadow: var(--relief);
}
.capture-note b { color: var(--gba-frame); }
.card { position: relative; }
.card-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  font-family: var(--font-arcade);
  font-size: 8px;
  white-space: nowrap;
  color: #fff;
  background: var(--gba-frame);
  border-radius: 3px;
  box-shadow: 2px 2px 0 rgba(45, 52, 66, .35);
}
.card-badge.swap { background: #f08030; }
/* equipe cheia: 7 cards sem a descrição, para caber na tela */
/* com 7 cards, todos numa fileira: a de baixo empurrava o "Desistir" para fora da tela */
.card-row.compact { gap: 8px; flex-wrap: nowrap; }
.card-row.compact .card { width: 146px; flex: 0 1 146px; padding-top: 24px; }
.card-row.compact .card p { display: none; }
.card-row.compact .card img.card-sprite { width: 64px; height: 64px; }
.card-row.compact .card .stack-info { font-size: 13px; }


/* =============================== LOBBY ===============================
   O mapa da jornada como o Town Map do FireRed (0.13, ui/lobby.js): a barra
   no topo com tudo, o mapa de Kanto em pixels inteiros (`--mpx`), a fase
   escolhida ao lado e a equipe embaixo. A lateral de ícones e a engrenagem do
   canto saem desta tela: os botões estão na barra. */
#app[data-screen="screen-campaign"] #side-rail,
#app[data-screen="screen-campaign"] .gear-float { display: none; }

.screen.lobby {
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
  padding: 14px 18px 16px;
  overflow: hidden;
}

/* --- a barra do topo --- */
.lobby-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 6px 10px;
  color: var(--gba-ink);
  border: 16px solid transparent;
  border-image: url(../assets/ui/window-frame-button.png) 16 fill stretch;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
}
.lobby-who { display: flex; align-items: center; gap: 10px; flex: none; }
.lobby-avatar {
  width: 44px;
  height: 44px;
  object-fit: contain;
  image-rendering: pixelated;
  background: var(--gba-hover);
  border: 2px solid var(--gba-frame);
  border-radius: 50%;
}
.lobby-who-text { display: flex; flex-direction: column; gap: 4px; }
.lobby-who-text b { font-family: var(--font-arcade); font-size: 12px; font-weight: 400; color: var(--gba-frame); }
.lobby-case {
  display: flex;
  gap: 2px;
  padding: 3px 5px;
  background: #3a5f99;
  border: 2px solid #2b4470;
  border-radius: 3px;
  cursor: pointer;
}
.lobby-case img { width: 16px; height: 16px; image-rendering: pixelated; filter: grayscale(1) brightness(.45); opacity: .7; }
.lobby-case img.got { filter: none; opacity: 1; }
.lobby-case:hover { background: #4a73a4; }
.lobby-stats { display: flex; gap: 10px; flex: none; }
.lobby-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 6px;
  font-size: 15px;
  color: var(--gba-ink-soft);
  background: var(--gba-button);
  border: 2px solid var(--gba-shade);
  border-radius: 3px;
}
.lobby-chip b { font-family: var(--font-arcade); font-size: 11px; font-weight: 400; color: var(--gba-ink); }
.lobby-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.bar-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  font-family: var(--font-pixel);
  font-size: 16px;
  font-weight: 600;
  color: var(--gba-ink);
  background: var(--gba-button);
  border: 2px solid var(--gba-shade);
  border-radius: 3px;
  box-shadow: var(--relief);
  cursor: pointer;
}
.bar-btn:hover, .bar-btn:focus-visible { background: var(--gba-hover); border-color: var(--gba-frame); outline: none; }
.bar-btn:active { transform: translate(1px, 1px); }
.bar-btn .bar-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--gba-frame); }
.bar-btn .bar-icon .ui-icon { width: 24px; height: 24px; }
/* os ícones dizem o nome ao passar o mouse; PC, Salvar e Menu vêm escritos */
.bar-btn .bar-label {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  font-size: 14px;
  white-space: nowrap;
  color: #fff;
  background: var(--gba-night);
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
  z-index: 5;
}
.bar-btn:hover .bar-label, .bar-btn:focus-visible .bar-label { opacity: 1; }
.bar-btn.strong { color: var(--gba-frame); }
.bar-btn.alert::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--poke-red);
  box-shadow: 0 0 0 2px #fff;
  animation: pulse-up 1s steps(2) infinite;
}
.bar-sep { width: 2px; height: 28px; margin: 0 6px; background: var(--gba-shade); }

/* --- o mapa e o painel --- */
.lobby-main { display: flex; gap: 16px; flex: 1; min-height: 0; width: 100%; }
.lobby-map-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex: 1;
  min-width: 0;
  border: 24px solid transparent;
  border-image: url(../assets/ui/window-frame.png) 24 fill stretch;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5));
}
.lobby-map {
  --mpx: 3px;
  position: relative;
  width: calc(var(--mpx) * 192);
  height: calc(var(--mpx) * 144);
  background: 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  box-shadow: 0 0 0 3px var(--gba-frame), 0 0 0 5px #fff;
}
/* cada marca fica no centro da cidade, em pixels do mapa */
.map-node {
  position: absolute;
  left: calc(var(--mpx) * (var(--x) - 8));
  top: calc(var(--mpx) * (var(--y) - 8));
  width: calc(var(--mpx) * 16);
  height: calc(var(--mpx) * 16);
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.map-node.locked { filter: grayscale(.8) brightness(.7); }
.map-node.locked::before {
  content: '';
  position: absolute;
  inset: calc(var(--mpx) * 3);
  border-radius: 50%;
  background: rgba(19, 32, 58, .55);
}
.map-badge {
  position: absolute;
  inset: calc(var(--mpx) * 1);
  width: calc(var(--mpx) * 14);
  height: calc(var(--mpx) * 14);
  image-rendering: pixelated;
  filter: drop-shadow(var(--mpx) var(--mpx) 0 rgba(0, 0, 0, .45));
}
/* a próxima: o cursor do Town Map, piscando (dois quadros de 16x16) */
.map-cursor {
  position: absolute;
  inset: 0;
  background: url(../assets/ui/region-map/cursor.png) 0 0 / 100% 200% no-repeat;
  image-rendering: pixelated;
  animation: map-cursor .5s steps(1) infinite;
}
@keyframes map-cursor { 50% { background-position: 0 100%; } }
.map-node.selected::after {
  content: '';
  position: absolute;
  inset: calc(var(--mpx) * -2);
  border: var(--mpx) solid #fff;
  border-radius: calc(var(--mpx) * 3);
  box-shadow: 0 0 0 var(--mpx) var(--gba-ink);
}
.map-number {
  position: absolute;
  left: 50%;
  top: calc(100% + var(--mpx) * 3);
  transform: translateX(-50%);
  padding: 3px 4px 2px;
  /* a fonte de arcade só sai nítida em múltiplos de 8 */
  font-family: var(--font-arcade);
  font-size: 8px;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  background: var(--gba-frame);
  border-radius: calc(var(--mpx) * 1);
  box-shadow: 0 0 0 calc(var(--mpx) * .5) var(--gba-ink);
}
.map-node.done .map-number { background: #2f9a45; }
/* os lugares da história no mapa (0.39): a marca azul das missões de lendário, com o "!" */
.map-place-mark {
  position: absolute;
  inset: calc(var(--mpx) * 3);
  display: grid;
  place-items: center;
  font-family: var(--font-arcade);
  font-size: 8px;
  line-height: 1;
  color: #fff;
  background: #3a7bd5;
  border-radius: calc(var(--mpx) * 2);
  box-shadow: 0 0 0 calc(var(--mpx) * .5) var(--gba-ink);
  animation: map-place 1s steps(1) infinite;
}
@keyframes map-place { 50% { transform: translateY(calc(var(--mpx) * -1)); } }
@media (prefers-reduced-motion: reduce) { .map-place-mark { animation: none; } }
.map-node.place .map-number { background: #3a7bd5; }
.panel-place-text { margin: 0; font-size: 15px; line-height: 1.45; color: var(--gba-ink); }
.map-node.locked .map-number { background: #6b7384; }
.map-node:hover .map-number, .map-node:focus-visible .map-number { background: var(--poke-red); }
/* o treinador: a cabeça do Red/Leaf sobre a cidade, como no jogo */
.map-player {
  position: absolute;
  left: calc(var(--mpx) * (var(--x) - 8));
  top: calc(var(--mpx) * (var(--y) - 18));
  width: calc(var(--mpx) * 16);
  height: calc(var(--mpx) * 16);
  background: 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 2;
  animation: map-bob .9s steps(1) infinite;
}
@keyframes map-bob { 50% { transform: translateY(calc(var(--mpx) * -1)); } }
.map-player.walking { transition: left 1.2s steps(12), top 1.2s steps(12); }

.lobby-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 384px;
  flex: none;
  min-height: 0;
  overflow-y: auto;
  color: var(--gba-ink);
  border: 24px solid transparent;
  border-image: url(../assets/ui/window-frame.png) 24 fill stretch;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5));
}
.panel-league, .league-row { display: flex; gap: 6px; align-items: center; }
.league-chip {
  width: 40px;
  height: 40px;
  padding: 2px;
  background: var(--gba-button);
  border: 2px solid var(--gba-shade);
  border-radius: 3px;
  cursor: pointer;
}
.league-chip img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.league-chip.done { border-color: #2f9a45; }
.league-chip.on { border-color: var(--poke-red); box-shadow: inset 0 0 0 2px var(--poke-red); }
.panel-head { display: flex; flex-direction: column; gap: 2px; }
.panel-chapter { font-family: var(--font-arcade); font-size: 10px; color: var(--gba-ink-soft); }
.panel-head h3 { margin: 0; font-family: var(--font-arcade); font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--gba-frame); }
.panel-leader { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 3px dotted var(--gba-shade); border-bottom: 3px dotted var(--gba-shade); }
.panel-leader .leader-portrait { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.panel-leader > div { display: flex; flex-direction: column; gap: 2px; flex: 1; font-size: 15px; color: var(--gba-ink-soft); }
.panel-leader b { font-family: var(--font-arcade); font-size: 12px; font-weight: 400; color: var(--gba-ink); }
.panel-badge-name { color: var(--gba-frame); }
.panel-badge { width: 32px; height: 32px; image-rendering: pixelated; }
.panel-badge.missing { filter: grayscale(1) brightness(.5); opacity: .5; }
.panel-trail { margin: 0; font-size: 15px; line-height: 1.35; }
/* a trava da história no painel da fase (H-4): o que fecha o caminho e o botão para o lugar */
.panel-lock { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 2px dashed #8a2016; background: #fbe3e1; border-radius: 3px; }
.panel-lock p { margin: 0; font-size: 14px; line-height: 1.35; color: #5a1a12; }
.panel-lock-go { align-self: flex-start; font-family: var(--font-pixel, inherit); font-size: 13px; padding: 4px 10px; border: 0; border-radius: 3px; background: #4a6fa5; color: #fff; cursor: pointer; }
.panel-lock-go:disabled { opacity: .5; cursor: default; }
.panel-time { margin: 0; font-size: 14px; color: var(--gba-ink-soft); }
/* o nível recomendado (0.17): verde quando a equipe está pronta, laranja perto, vermelho longe */
.panel-level { margin: 0; padding: 4px 8px; font-size: 14px; border-radius: 3px; border: 2px solid currentColor; }
.panel-level b { font-family: var(--font-arcade); font-size: 11px; font-weight: 400; }
.panel-level.ok { color: #2f8a4c; background: rgba(87, 209, 138, .12); }
.panel-level.close { color: #b8740a; background: rgba(248, 176, 48, .14); }
.panel-level.far { color: #c0392b; background: rgba(240, 90, 70, .12); }
.panel-stats, .stats-list {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  margin: 0;
  font-size: 15px;
}
.panel-stats dt, .stats-list dt { color: var(--gba-ink-soft); }
.panel-stats dd, .stats-list dd { margin: 0; font-family: var(--font-arcade); font-size: 11px; text-align: right; align-self: center; }
.panel-actions { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.panel-actions .menu-btn { width: 100%; }
.panel-actions .menu-btn .btn-text, .panel-actions .menu-btn.slim { text-align: center; justify-content: center; }

/* --- a equipe, embaixo --- */
.lobby-team {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 10px;
  border: 16px solid transparent;
  border-image: url(../assets/ui/window-frame-button.png) 16 fill stretch;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
}
.team-label { font-family: var(--font-arcade); font-size: 11px; color: var(--gba-frame); margin-right: 6px; }
.team-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 64px;
  padding: 2px 0;
  background: var(--gba-button);
  border: 2px solid var(--gba-shade);
  border-radius: 3px;
  cursor: pointer;
}
.team-slot:hover { border-color: var(--gba-frame); }
.team-slot.empty { opacity: .5; min-height: 52px; }
.team-icon { width: 32px; height: 32px; background: 0 0 / 100% 200% no-repeat; image-rendering: pixelated; }
.team-slot:hover .team-icon, .stats-mon:hover .team-icon { animation: pc-icon .5s steps(1) infinite; }
.team-lv { font-family: var(--font-arcade); font-size: 8px; color: var(--gba-ink-soft); }
.team-slot.field::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--poke-red) 45%, #2d3442 45% 55%, #f8f8f8 55%);
  box-shadow: 0 0 0 1px #2d3442;
}
.team-hint { font-size: 14px; color: var(--gba-ink-soft); margin-left: 8px; }

@media (max-width: 1100px) {
  .lobby-bar { flex-wrap: wrap; }
  .lobby-actions { margin-left: 0; width: 100%; justify-content: flex-start; }
  .lobby-main { flex-direction: column; overflow-y: auto; }
  .lobby-panel { width: 100%; }
}

/* ========================= ESTOJO DE INSÍGNIAS =========================
   O Cartão de Treinador azul do FireRed (1x: 240x160), ampliado por `--cpx`,
   com as insígnias nas casas dele (ui/badgeCase.js). */
.badge-case { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.badge-left { display: flex; flex-direction: column; gap: 12px; }
.badge-card {
  --cpx: 2px;
  position: relative;
  width: calc(var(--cpx) * 240);
  height: calc(var(--cpx) * 160);
  background: url(../assets/ui/trainer-card.png) 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
}
@media (min-width: 1500px) { .badge-card { --cpx: 3px; } }
.badge-card > * {
  position: absolute;
  left: calc(var(--cpx) * var(--x));
  top: calc(var(--cpx) * var(--y));
  width: calc(var(--cpx) * var(--w));
  height: calc(var(--cpx) * var(--h));
}
.card-title {
  display: grid;
  place-items: center;
  font-family: var(--font-arcade);
  font-size: calc(var(--cpx) * 4);
  color: var(--gba-frame);
}
.card-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--cpx) * 4);
  font-size: calc(var(--cpx) * 8);
  color: var(--gba-ink);
}
.card-line b { font-family: var(--font-arcade); font-size: calc(var(--cpx) * 5); font-weight: 400; }
.card-line.name { font-family: var(--font-arcade); font-size: calc(var(--cpx) * 6); color: var(--gba-frame); }
.card-trainer { object-fit: contain; image-rendering: pixelated; }
.card-slot {
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.card-slot img { width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(var(--cpx) var(--cpx) 0 rgba(0, 0, 0, .35)); }
.card-slot.on { box-shadow: 0 0 0 var(--cpx) #fff, 0 0 0 calc(var(--cpx) * 2) var(--poke-red); border-radius: calc(var(--cpx) * 2); }
.card-slot:hover { box-shadow: 0 0 0 var(--cpx) #fff; border-radius: calc(var(--cpx) * 2); }
.league-label { font-family: var(--font-arcade); font-size: 11px; color: var(--gba-frame); margin-right: 6px; }
.badge-stats { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 300px; }
.stats-head { display: flex; align-items: center; gap: 12px; }
.stats-head .leader-portrait { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.stats-head h4 { margin: 0; font-family: var(--font-arcade); font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--gba-frame); }
.stats-state { margin: 2px 0 0; font-size: 15px; color: var(--gba-ink-soft); }
.stats-list { padding-top: 10px; border-top: 3px dotted var(--gba-shade); }
.stats-team-label { margin: 0; font-size: 14px; color: var(--gba-ink-soft); }
.stats-team { display: flex; gap: 6px; flex-wrap: wrap; }
.stats-mon { display: flex; flex-direction: column; align-items: center; font-family: var(--font-arcade); font-size: 8px; color: var(--gba-ink-soft); }
.stats-empty { margin: 0; font-size: 14px; color: var(--gba-ink-soft); }

/* ================================ SHINY ================================
   0.13.1: as cores raras, só de captura e só do jogador. O card da Poké Ball
   brilha em dourado; no PC, no lobby e na Pokédex, a estrelinha ✦ marca. */
.card.shiny { box-shadow: inset 0 0 0 3px #e8b830, 0 0 14px rgba(248, 208, 48, .55); }
.card-badge.shiny { left: auto; right: 6px; color: #3a2a0c; background: #f8d030; }
.card.shiny .card-sprite { animation: shiny-glint 2.6s steps(1) infinite; }
@keyframes shiny-glint { 0%, 12% { filter: brightness(1.35) drop-shadow(0 0 6px #fff6b0); } 13% { filter: none; } }
.pc-shiny {
  position: absolute;
  right: calc(var(--px) * 1);
  top: calc(var(--px) * 0);
  font-size: calc(var(--px) * 7);
  line-height: 1;
  color: #f8d030;
  text-shadow: calc(var(--px) * .5) calc(var(--px) * .5) 0 #6b4a00;
  pointer-events: none;
  z-index: 2;
}
.pc-data__name.shiny { color: #f8d888; }
.team-shiny { position: absolute; right: 4px; top: 1px; font-size: 13px; color: #e8b830; text-shadow: 1px 1px 0 #6b4a00; }
.dex-cell.shiny { position: relative; }
.dex-cell.shiny::after { content: '✦'; position: absolute; top: 4px; right: 6px; color: #e8b830; text-shadow: 1px 1px 0 #6b4a00; }

/* o 2º golpe (0.14): no PC e na janela da equipe */
.pc-data__bonus { color: #f8d888; }
.node-meta.bonus-move { color: #b07a00; font-weight: 600; }

/* ========================== GOLPE DESPERTO ==========================
   0.16: o anúncio do 2º golpe (o nome fica em BONUS_MOVE_LABEL). É a tela de
   nível com uma opção só, dourada e pulsando: o momento raro tem de parecer raro. */
.card.unlock {
  width: 300px;
  box-shadow: inset 0 0 0 3px var(--gba-gold), 0 0 22px rgba(248, 208, 48, .55);
  animation: unlock-glow 1.6s ease-in-out infinite;
}
.card.unlock .card-icon { animation: pulse-up 1.4s steps(2) infinite; }
.card.unlock h3 { font-size: 20px; }
.card.unlock .stack-info { opacity: .75; }
#levelup-overlay.unlock h2 { color: #e09a00; text-shadow: 2px 2px 0 #7a4a00; }
@keyframes unlock-glow {
  0%, 100% { box-shadow: inset 0 0 0 3px var(--gba-gold), 0 0 14px rgba(248, 208, 48, .35); }
  50% { box-shadow: inset 0 0 0 3px #fff2a8, 0 0 30px rgba(248, 208, 48, .8); }
}

/* 0.28: a melhoria que faz parte da chave do Golpe Desperto (data/awakening.js):
   moldura dourada parada (o brilho pulsando é só do anúncio) e o aviso embaixo
   (0.28.1: sem o selo no canto, pedido do Fellipe) */
.card.awaken { box-shadow: inset 0 0 0 3px var(--gba-gold), 0 0 10px rgba(248, 208, 48, .35); }
.card .chip.awaken { color: #7a4a00; background: #fff2b8; border-color: #e0b030; }
/* o progresso da chave na janela da equipe */
.node-meta.awaken-key { color: #8a6a20; }

/* o card de captura de um lendário (0.16) */
.card.legendary { box-shadow: inset 0 0 0 3px #b98cff, 0 0 16px rgba(185, 140, 255, .55); }
.card-badge.legendary { background: #7d4bd6; }

/* ============================== JORNADAS ==============================
   0.19: os espaços de jornada. Cada card na moldura do FireRed: o treinador,
   as insígnias, a equipe, onde ela está e Jogar/Apagar; o livre, Nova jornada. */
.journey-grid { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; align-items: stretch; max-width: 1040px; }
.journey-card {
  width: 300px;
  display: flex; flex-direction: column; gap: 8px;
  padding: 6px 8px 8px;
  color: var(--gba-ink);
  border: 16px solid transparent;
  border-image: url(../assets/ui/window-frame-button.png) 16 fill stretch;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45));
}
.journey-card.active { box-shadow: inset 0 0 0 3px var(--gba-gold); }
.journey-card.empty { justify-content: center; align-items: center; text-align: center; min-height: 260px; opacity: .92; }
.journey-head { display: flex; align-items: center; gap: 10px; }
.journey-portrait { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; }
.journey-who { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.journey-who b, .journey-free { font-family: var(--font-arcade); font-size: 12px; font-weight: 400; color: var(--gba-frame); }
.journey-who span { font-size: 14px; color: var(--gba-ink-soft); }
.journey-tag { font-family: var(--font-arcade); font-size: 8px; padding: 3px 6px; color: #3a2a0c; background: #f8d030; border-radius: 3px; }
.journey-badges { display: flex; gap: 3px; padding: 4px 0; border-top: 3px dotted var(--gba-shade); }
.journey-badges img { width: 18px; height: 18px; image-rendering: pixelated; filter: grayscale(1) brightness(.45); opacity: .6; }
.journey-badges img.got { filter: none; opacity: 1; }
/* 3 por linha: o nível de três dígitos ("Nv.127") não cabia em 40 px e encavalava */
.journey-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 4px; min-height: 44px; }
.journey-mon { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.journey-next { margin: 0; font-size: 15px; line-height: 1.3; }
.journey-run { margin: 0; font-size: 14px; color: #b8740a; }
.journey-date { margin: 0; font-size: 13px; color: var(--gba-ink-soft); }
.journey-actions { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.journey-actions .menu-btn { width: 100%; justify-content: center; text-align: center; }
.journey-confirm { margin: 0; font-size: 14px; line-height: 1.3; color: #c0392b; }

/* ============================== MODO LIVRE ==============================
   0.20: o botão do canto, ao lado dos inimigos e das opções, que sai do modo. */
.hud-center-btn {
  pointer-events: auto;
  padding: 6px 10px;
  font-family: var(--font-arcade);
  font-size: 9px;
  line-height: 1.3;
  color: #fff;
  background: #c0392b;
  border: 2px solid #7a1f16;
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18), 2px 2px 0 rgba(0, 0, 0, .45);
  cursor: pointer;
  white-space: nowrap;
}
.hud-center-btn:hover { background: #d84a3a; }

/* ============================== POKÉ MART ==============================
   0.23: a loja dos Shards; a TM e os itens de evolução abrem a lista de quem
   pode receber, dentro do card. */
.mart-card { flex-wrap: wrap; }
.mart-picker { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 3px dotted var(--gba-shade); }
.mart-target {
  display: flex; align-items: center; gap: 8px; padding: 4px 8px;
  font: inherit; text-align: left; color: var(--gba-ink);
  background: rgba(255, 255, 255, .6); border: 2px solid var(--gba-shade); border-radius: 3px; cursor: pointer;
}
.mart-target:hover { border-color: var(--gba-frame); background: #fff; }
.mart-target b { font-family: var(--font-arcade); font-size: 10px; font-weight: 400; }
.mart-target span:last-child { font-size: 14px; color: var(--gba-ink-soft); }
.capture-actions { display: flex; gap: 10px; justify-content: center; }
/* o Reviver no card de quem desmaiou */
.bench-mon.fainted.revivable { cursor: pointer; filter: none; opacity: 1; box-shadow: 0 0 0 3px #57d18a; animation: revive-pulse 1.2s ease-in-out infinite; }
@keyframes revive-pulse { 50% { box-shadow: 0 0 0 3px #b8f5cf, 0 0 12px rgba(87, 209, 138, .8); } }
.bench-mon.revivable img, .bench-mon.revivable .bench-lv, .bench-mon.revivable .bar { filter: grayscale(1); opacity: .5; }
.revive-tag {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  padding: 2px 4px; font-family: var(--font-arcade); font-size: 7px; line-height: 1.3; white-space: nowrap;
  color: #fff; background: #1f8a4c; border: 2px solid #0c2a17; border-radius: 3px;
}

/* a contagem da apresentação do líder (0.25): pequena, embaixo do Lutar! */
.leader-countdown { margin: 6px 0 0; font-size: 13px; text-align: center; color: rgba(255, 255, 255, .75); }

/* ================================ A VILA ================================
   O lobby jogável (0.29, PLANEJAMENTO-LOBBY.md): o mapa em grade do FireRed
   num canvas do tamanho da tela, em escala inteira e sem suavizar
   (render/HubRenderer.js), com a barra do topo e a caixa de texto do jogo por
   cima (ui/hubHud.js). O cenário dos menus e a lateral saem: a vila é o fundo. */
#app[data-screen="screen-hub"] #side-rail,
#app[data-screen="screen-hub"] .gear-float,
#app[data-screen="screen-hub"] #menu-bg,
#app[data-screen="screen-hub"] #menu-scrim { display: none; }

.screen.hub { justify-content: flex-start; gap: 0; padding: 0; background: #000; }
.hub-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  cursor: pointer;
  touch-action: none;
}
.hub-bar { position: relative; z-index: 2; width: calc(100% - 28px); max-width: 1440px; margin: 12px auto 0; }
/* o Mapa da jornada é o botão principal da vila */
.hub-map-btn { color: var(--gba-gold-ink); background: var(--gba-gold); border-color: #b8902e; }
.hub-map-btn .bar-icon { color: var(--gba-gold-ink); }
.hub-map-btn:hover, .hub-map-btn:focus-visible { background: #ffe79c; border-color: #8a6a1c; }
.hub-map-btn.locked { color: var(--gba-ink-soft); background: var(--gba-button); border-color: var(--gba-shade); filter: grayscale(.7); }

/* a placa com o nome do lugar, ao chegar (como a do FireRed, no canto) */
.hub-place {
  position: absolute;
  z-index: 2;
  top: 104px;
  left: 22px;
  padding: 2px 12px;
  font-family: var(--font-pixel);
  font-size: 19px;
  font-weight: 600;
  color: var(--gba-ink);
  border: 16px solid transparent;
  border-image: url(../assets/ui/window-frame-button.png) 16 fill stretch;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
  animation: hub-place-in .25s steps(4);
  pointer-events: none;
}
@keyframes hub-place-in { from { transform: translateY(-14px); opacity: 0; } }

/* os palcos das cenas (0.39): a cena em tela cheia, sem a barra da vila e o rodapé; num
   lugar para explorar (a Usina), o rodapé dos controles fica */
.screen.hub.cinema .hub-bar,
.screen.hub.cinema:not(.explore) .hub-hint { display: none; }
.screen.hub.cinema .hub-place,
.screen.hub.cinema .hub-quest { top: 22px; }

/* ===================== O RASTREADOR DE QUESTS (0.38) =====================
   A janela do FireRed no canto de cima, à direita (o nome do lugar fica à
   esquerda): o capítulo com o losango da cor do tipo de quest e o objetivo com
   o placar. Ao fechar, o ✓ verde e o "Missão concluída!"; a próxima desliza.
   Um clique recolhe (ui/questTracker.js). */
.quest-tracker {
  position: absolute;
  z-index: 2;
  width: 310px;
  max-width: calc(100% - 44px);
  padding: 2px 10px 4px;
  font-family: var(--font-pixel);
  color: var(--gba-ink);
  border: 16px solid transparent;
  border-image: url(../assets/ui/window-frame-button.png) 16 fill stretch;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
  cursor: pointer;
  user-select: none;
}
.hub-quest { top: 104px; right: 22px; }
/* no mapa da jornada, estreito: cabe no espaço livre ao lado do Town Map */
.lobby-quest { top: 0; right: 0; width: 200px; padding: 0 6px 2px; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .25)); }
.lobby-quest .quest-title { font-size: 11px; }
.lobby-quest .quest-obj { font-size: 15px; }
.lobby-quest .quest-done-tag, .lobby-quest .quest-reward { font-size: 13px; }
.quest-item + .quest-item { margin-top: 6px; padding-top: 6px; border-top: 2px dashed var(--gba-shade); }
.quest-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gba-frame);
}
.quest-title i { font-style: normal; color: #d29b17; }   /* história: dourado */
.quest-legendary .quest-title i { color: #3a7bd5; }       /* lendário: azul */
.quest-side .quest-title i { color: var(--gba-ink-soft); }
.quest-obj {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}
.quest-obj b { flex: none; font-weight: 700; color: var(--gba-ink-soft); }
.quest-obj.met, .quest-obj.met b { color: #2f9e4f; }
.quest-done-tag { margin: 4px 0 0; font-size: 14px; font-weight: 700; color: #2f9e4f; animation: quest-pop .3s steps(3); }
/* (H-12) o que a quest deu, embaixo do "Missão concluída!" */
.quest-reward { margin: 1px 0 0; font-size: 14px; font-weight: 700; color: #a8760c; animation: quest-pop .3s steps(3); }
.quest-item.enter { animation: quest-in .35s steps(5); }
@keyframes quest-in { from { transform: translateX(26px); opacity: 0; } }
@keyframes quest-pop { from { transform: scale(.6); opacity: 0; } }
/* recolhido: só a linha do capítulo da quest de história */
.quest-tracker.collapsed .quest-obj,
.quest-tracker.collapsed .quest-done-tag,
.quest-tracker.collapsed .quest-reward,
.quest-tracker.collapsed .quest-item.more { display: none; }
.quest-tracker.collapsed .quest-title::after { content: '+'; margin-left: auto; font-size: 16px; }
/* ===================== A TELA DE MISSÕES (H-3) ===================== */
/* o diário da jornada: o que fazer agora, o que já aconteceu e os itens da história */
.quest-log { display: flex; flex-direction: column; gap: 16px; font-family: var(--font-pixel); color: var(--gba-ink); }
.ql-section { display: flex; flex-direction: column; gap: 8px; }
.ql-head {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gba-frame);
}
.ql-empty { margin: 0; font-size: 17px; color: var(--gba-ink-soft); }
/* a quest ativa: a faixa da cor do tipo na borda esquerda */
.ql-card {
  padding: 8px 12px 9px 14px;
  background: var(--gba-button);
  border: 2px solid var(--gba-shade);
  border-left: 6px solid #d29b17;
  border-radius: 4px;
}
.ql-card.ql-legendary { border-left-color: #3a7bd5; }
.ql-card.ql-side { border-left-color: var(--gba-ink-soft); }
.ql-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ql-chapter { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gba-frame); }
.ql-kind {
  flex: none;
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #d29b17;
  border-radius: 3px;
}
.ql-kind-legendary { background: #3a7bd5; }
.ql-kind-side { background: var(--gba-ink-soft); }
.ql-desc { margin: 4px 0 0; font-size: 16px; line-height: 1.35; color: var(--gba-ink); }
.ql-objs { margin: 6px 0 0; padding: 0; list-style: none; }
.ql-objs li { display: flex; justify-content: space-between; gap: 12px; font-size: 17px; font-weight: 600; line-height: 1.35; }
.ql-objs li b { flex: none; color: var(--gba-ink-soft); }
.ql-objs li.met, .ql-objs li.met b { color: #2f9e4f; }
/* (H-12) a recompensa: a prometida no card de agora; a recebida, verde, no que já aconteceu */
.ql-reward { margin: 6px 0 0; font-size: 15px; font-weight: 700; color: #a8760c; }
.ql-reward.got { margin-top: 2px; font-size: 14px; color: #2f9e4f; }
/* o que já aconteceu: um grupo por capítulo, que abre e fecha */
.ql-group { border-top: 3px dotted var(--gba-shade); }
.ql-group-title {
  padding: 7px 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gba-ink);
  cursor: pointer;
  list-style-position: inside;
}
.ql-entry { margin: 0 0 8px 6px; padding: 2px 0 2px 10px; border-left: 3px solid #d29b17; }
.ql-entry.ql-legendary { border-left-color: #3a7bd5; }
.ql-entry.ql-side { border-left-color: var(--gba-shade); }
.ql-entry-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 16px; }
.ql-entry-head b::before { content: '✓ '; color: #2f9e4f; }
.ql-date { flex: none; font-size: 13px; color: var(--gba-ink-soft); }
.ql-entry .ql-desc { margin-top: 1px; font-size: 15px; color: var(--gba-ink-soft); }
.ql-entry .ql-objs { margin-top: 3px; }
.ql-entry .ql-objs li { font-size: 15px; }
/* os itens importantes: o ícone e o texto */
.ql-item { display: flex; align-items: center; gap: 12px; padding: 6px 4px; border-top: 3px dotted var(--gba-shade); }
.ql-item-icon { width: 40px; height: 40px; flex: none; image-rendering: pixelated; object-fit: contain; }
.ql-item-text { display: flex; flex-direction: column; gap: 1px; }
.ql-item-text b { font-size: 16px; }
.ql-item-text span { font-size: 15px; color: var(--gba-ink-soft); line-height: 1.3; }

/* na partida: uma linha na plaquinha da fase, só se a quest for desta fase */
.hud-quest { font-size: 12px; font-weight: 600; color: #ffe9a8; }

/* a caixa de texto do FireRed, embaixo, com a plaquinha de quem fala */
.hub-dialog {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(980px, calc(100% - 32px));
  transform: translateX(-50%);
}
.hub-dialog-name {
  position: relative;
  z-index: 1;
  margin: 0 0 -10px 22px;
  padding: 2px 12px;
  font-family: var(--font-pixel);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--gba-night);
  border: 2px solid var(--gba-frame);
  border-radius: 3px;
}
.hub-dialog-box { position: relative; width: 100%; min-height: 112px; cursor: pointer; }
.hub-dialog-box p { margin: 0; padding-right: 22px; }
/* a setinha que pisca quando a página acabou */
.hub-dialog-next {
  position: absolute;
  right: 4px;
  bottom: 2px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid var(--poke-red);
  opacity: 0;
}
.hub-dialog-next.on { opacity: 1; animation: hub-next .7s steps(2) infinite; }
@keyframes hub-next { 50% { transform: translateY(4px); } }
/* o SIM/NÃO, no canto de cima da caixa, como no jogo */
.hub-choices {
  position: absolute;
  right: 0;
  bottom: calc(100% - 8px);
  display: flex;
  flex-direction: column;
  min-width: 120px;
  padding: 0 4px;
}
.hub-choice {
  position: relative;
  padding: 0 0 0 26px;
  font: inherit;
  text-align: left;
  color: var(--gba-ink);
  background: none;
  border: 0;
  text-shadow: inherit;
  cursor: pointer;
}
.hub-choice.pick::before { content: '▶'; position: absolute; left: 4px; font-size: .8em; line-height: 1.9; }

.hub-hint {
  position: absolute;
  z-index: 2;
  left: 18px;
  bottom: 12px;
  margin: 0;
  font-family: var(--font-pixel);
  font-size: 14px;
  color: #dfe6f2;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .85);
  pointer-events: none;
}
/* a tecla é clara: sem a sombra preta do texto do rodapé (herdada, ela borrava as
   letras), com o relevo das teclas da tela de título */
.hub-hint kbd {
  display: inline-block;
  min-width: 20px;
  margin: 0 1px;
  padding: 0 4px;
  font-family: var(--font-pixel);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: var(--gba-ink);
  background: var(--gba-button);
  border: 2px solid var(--gba-frame);
  border-radius: 3px;
  box-shadow: inset -1px -2px 0 var(--gba-button-shade);
  text-shadow: none;
}
.hub-hint .dot { margin: 0 4px; }
.hub-dialog:not(.hidden) ~ .hub-hint { display: none; }
@media (max-width: 900px) {
  .hub-hint { display: none; }
  .hub-place { top: 150px; }
  .hub-quest { top: 150px; width: 250px; }
}

/* a loja de Pokédolls: o móvel montado com os tiles e o boneco, em pixels inteiros */
.decor-card .shop-icon { display: grid; place-items: center; min-width: 84px; min-height: 68px; }
.decor-stack { position: relative; display: block; }
.decor-stack img { position: absolute; inset: 0; image-rendering: pixelated; }
.decor-doll { display: block; background-repeat: no-repeat; background-position: 0 0; image-rendering: pixelated; }

/* o Voltar para a Vila, embaixo do mapa da jornada (0.30) */
.lobby-map-foot { flex: none; display: flex; justify-content: center; }
.village-btn { min-width: 260px; }

/* ===================== O NOME DO JOGADOR (0.30) =====================
   Depois de menino ou menina, o Prof. Carvalho pergunta o nome: o campo é a
   própria caixa de texto do FireRed. */
#screen-name { overflow-y: auto; }
.name-form { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; justify-content: center; }
.name-portrait { width: 128px; height: 128px; image-rendering: pixelated; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.name-field { display: flex; flex-direction: column; gap: 6px; }
.name-label { font-family: var(--font-pixel); font-size: 16px; color: #dfe6f2; text-shadow: 2px 2px 0 rgba(0, 0, 0, .8); }
.name-input {
  width: min(360px, 80vw);
  margin: 0;
  background: none;
  outline: none;
  text-transform: none;
  caret-color: var(--poke-red);
}
.name-input::placeholder { color: var(--gba-ink-soft); opacity: .7; }
.name-input:focus-visible { outline: none; }
.name-hint { margin: 0; font-family: var(--font-pixel); font-size: 15px; color: #dfe6f2; text-shadow: 2px 2px 0 rgba(0, 0, 0, .8); }

/* ===================== ESCOLHA DO INICIAL (0.31) =====================
   O cenário de sempre com um véu forte, o título na placa do FireRed, o Voltar
   pequeno no canto (com o ESC) e três cards de 320 px da mesma altura. A barra
   lateral sai desta tela. */
#app[data-screen="screen-starter"] #side-rail,
#app[data-screen="screen-starter"] .gear-float { display: none; }
#app[data-screen="screen-starter"] #menu-scrim { background: rgba(8, 14, 26, .78); }

.starter-screen { padding: 28px; }
.starter-title {
  margin: 0;
  padding: 2px 14px;
  font-family: var(--font-arcade);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--gba-frame);
}
.corner-back {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: var(--font-pixel);
  font-size: 15px;
  font-weight: 600;
  color: var(--gba-ink);
  background: var(--gba-button);
  border: 2px solid var(--gba-frame);
  border-radius: 3px;
  box-shadow: var(--relief), 2px 2px 0 rgba(0, 0, 0, .45);
  cursor: pointer;
}
.corner-back:hover, .corner-back:focus-visible, .corner-back.pad-focus { background: var(--gba-hover); outline: none; }
.corner-back kbd {
  padding: 3px 5px 2px;
  font-family: var(--font-arcade);
  font-size: 8px;
  color: #fff;
  background: var(--gba-frame);
  border-radius: 2px;
}
.starter-grid {
  display: grid;
  grid-template-columns: repeat(3, 320px);
  gap: 24px;
  align-items: stretch;
  justify-content: center;
  padding-top: 12px;
}
@media (max-width: 1100px) { .starter-grid { grid-template-columns: repeat(auto-fit, 320px); } }

/* ===================== O CARD DE ESCOLHA (0.31) =====================
   ui/pokemonCard.js: o Pokémon em pixel na base de batalha, o nome e o papel,
   os tipos, as barras de vida, dano e alcance, e o golpe no pé do card. Serve ao
   inicial (320 px) e à Poké Ball da fase (com os selos de lendário e de shiny). */
.choice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 6px 8px 8px;
  font: inherit;
  text-align: left;
  color: var(--gba-ink);
  background: none;
  border: 16px solid transparent;
  border-image: url(../assets/ui/window-frame-button.png) 16 fill stretch;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45));
  cursor: pointer;
  transition: transform .14s var(--ease), filter .14s var(--ease);
}
.starter-card.choice-card { width: 320px; }
/* o card apontado (mouse, teclado ou controle): sobe, ganha o contorno vermelho e a Poké Ball */
.choice-card:hover, .choice-card:focus-visible, .choice-card.pad-focus {
  transform: translateY(-10px);
  outline: 4px solid #d8412f;
  outline-offset: 2px;
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .55));
}
.choice-card:hover::after, .choice-card:focus-visible::after, .choice-card.pad-focus::after {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 32px;
  height: 32px;
  background: url(../assets/items/poke-ball.png) center / contain no-repeat;
  image-rendering: pixelated;
  transform: rotate(-24deg);
}
.choice-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 140px;
}
.battle-base {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 210px;
  height: 44px;
  transform: translateX(-50%);
  background: #a8d878;
  border: 3px solid #5f9a3c;
  border-radius: 50%;
  box-shadow: inset 0 -7px 0 #84bc58;
}
.choice-sprite { position: relative; width: 128px; height: 128px; margin-bottom: 12px; image-rendering: pixelated; }
/* o nome e o papel na mesma linha: o papel quebra dentro do canto dele, à direita */
.choice-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.choice-head h3 { flex: none; }
.choice-head h3 {
  margin: 0;
  font-family: var(--font-arcade);
  font-size: 16px;
  font-weight: 400;
  color: #4a73a4;
  text-shadow: 2px 2px 0 var(--gba-shade);
}
.choice-head h3 .caught-ball { width: 16px; height: 16px; margin-right: 6px; vertical-align: -1px; image-rendering: pixelated; }
.choice-role { padding-top: 2px; font-size: 13px; font-weight: 700; line-height: 1.25; text-align: right; color: var(--poke-red); }
/* no inicial, o cabeçalho guarda duas linhas: o papel que quebra (Squirtle) não desalinha os tipos e as barras dos outros cards */
.starter-card .choice-head { min-height: 36px; }
.choice-card .type-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-start; margin: 0; }
.choice-card .type-tag { padding: 4px 6px 3px; font-family: var(--font-arcade); font-size: 8px; font-weight: 400; letter-spacing: 0; }
.choice-card .stack-info { font-size: 13px; color: var(--gba-ink-soft); }
.choice-stats {
  display: grid;
  gap: 5px;
  padding: 8px;
  background: var(--gba-button);
  border: 2px solid var(--gba-shade);
  border-radius: 3px;
}
.stat-row { display: grid; grid-template-columns: 62px 1fr 36px; align-items: center; gap: 8px; }
.stat-label { font-size: 13px; font-weight: 700; color: var(--gba-ink-soft); }
.stat-blocks { display: flex; gap: 2px; padding: 2px; background: #283141; border-radius: 2px; }
.stat-blocks i { flex: 1; height: 9px; background: #454f66; }
.stat-blocks i.on { background: #48c868; box-shadow: inset 0 -2px 0 #2f9a4f; }
.stat-value { font-family: var(--font-arcade); font-size: 9px; font-weight: 400; text-align: right; color: var(--gba-ink); }
.stat-extras { margin: 2px 0 0; font-size: 12px; font-weight: 700; color: #d9662a; }
.choice-card .move-box {
  margin-top: auto;
  padding: 8px 10px;
  background: var(--gba-button);
  border-top: 3px dotted var(--gba-shade);
}
.choice-card .move-box b { font-size: 15px; color: var(--gba-ink); }
.choice-card .move-box span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.35; color: var(--gba-ink-soft); }

/* na Poké Ball da fase: quatro cards por fileira, mais baixos (o golpe só pelo nome,
   para a janela caber na tela com o Ignorar); com a equipe cheia, sete compactos */
#capture-choices .choice-card { width: 252px; gap: 6px; padding: 2px 6px 6px; }
#capture-choices .choice-card .choice-stage { height: 110px; }
#capture-choices .choice-card .choice-sprite { margin-bottom: 2px; }
/* na Poké Ball o card é mais estreito: o papel desce para baixo do nome (ao lado de
   um nome longo, como Kangaskhan, sobravam 40 px para ele) */
#capture-choices .choice-head { flex-direction: column; gap: 3px; }
#capture-choices .choice-card .choice-role { padding-top: 0; font-size: 12px; text-align: left; }
#capture-choices .choice-card .choice-stats { gap: 3px; padding: 6px; }
#capture-choices .choice-card .stat-extras { font-size: 11px; }
#capture-choices .choice-card .move-box { padding: 4px 8px; }
#capture-choices .choice-card .move-box b { font-size: 14px; }
#capture-choices .choice-card .move-box span { display: none; }
#capture-choices.compact .choice-card { width: 146px; flex: 0 1 146px; padding-top: 24px; }
#capture-choices.compact .choice-card .choice-stats,
#capture-choices.compact .choice-card .move-box,
#capture-choices.compact .choice-card .choice-role { display: none; }
#capture-choices.compact .choice-card .choice-stage { height: 80px; }
#capture-choices.compact .choice-card .choice-sprite { width: 64px; height: 64px; margin-bottom: 8px; }
#capture-choices.compact .choice-card .battle-base { width: 110px; height: 24px; box-shadow: inset 0 -4px 0 #84bc58; }
#capture-choices.compact .choice-head h3 { font-size: 10px; }

/* ===================== O PAINEL DA FASE (0.31) =====================
   No mapa da jornada: o salão do líder em 2x (112 px; o retrato de 128 sobressai
   por cima) com ele por cima (os banners de
   tools/assets/gym_banners.py), o tipo do ginásio, o nome da fase, a faixa do
   líder entre pontilhados, o caminho, o nível e o JOGAR vermelho. */
.panel-banner {
  position: relative;
  flex: none;
  height: 112px;
  margin-top: 16px;
  background: #1c2433 center bottom / auto 128px repeat-x;
  image-rendering: pixelated;
  border: 3px solid var(--gba-frame);
  border-radius: 3px;
}
.panel-banner-leader {
  position: absolute;
  left: 4px;
  bottom: 0;
  width: 128px;
  height: 128px;
  image-rendering: pixelated;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .35));
}
.panel-banner-leader.silhouette { filter: brightness(0) opacity(.55); }
.panel-type {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 6px 3px;
  font-family: var(--font-arcade);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0;
  color: #fff;
}
.panel-head .panel-chapter { font-family: var(--font-arcade); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: var(--gba-ink-soft); }
.panel-head h3 { font-size: 16px; color: #4a73a4; }
.panel-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 3px dotted var(--gba-shade);
  border-bottom: 3px dotted var(--gba-shade);
}
.panel-strip-who { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; font-size: 14px; }
.panel-strip-who b { font-family: var(--font-arcade); font-size: 11px; font-weight: 400; color: var(--gba-ink); }
.panel-balls { display: flex; gap: 2px; }
.panel-balls img { width: 16px; height: 16px; image-rendering: pixelated; }
.panel-strip .panel-badge { flex: none; }
.panel-trail { font-size: 14px; color: var(--gba-ink); }
.panel-play {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 56px;
  font-family: var(--font-arcade);
  font-size: 16px;
  color: #fff;
  text-shadow: 2px 2px 0 #7a1c12;
  background: #d8412f;
  border: 3px solid #7a1c12;
  border-radius: 4px;
  box-shadow: 0 5px 0 #7a1c12;
  cursor: pointer;
}
.panel-play img { width: 24px; height: 24px; image-rendering: pixelated; }
.panel-play span { text-transform: uppercase; }
.panel-play:hover, .panel-play:focus-visible, .panel-play.pad-focus { background: #e9563f; outline: none; }
.panel-play:active { transform: translateY(3px); box-shadow: 0 2px 0 #7a1c12; }
.panel-play:disabled { color: #e8ecf3; text-shadow: none; background: #9aa3b5; border-color: #5b6273; box-shadow: 0 5px 0 #5b6273; cursor: not-allowed; }
.panel-link {
  align-self: center;
  margin-top: 6px;
  padding: 2px 6px;
  font-family: var(--font-pixel);
  font-size: 14px;
  color: var(--gba-frame);
  text-decoration: underline;
  background: none;
  border: 0;
  cursor: pointer;
}
.panel-link:hover, .panel-link:focus-visible, .panel-link.pad-focus { color: var(--logo-blue-deep); outline: none; }
.panel-metrics { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-size: 13px; color: var(--gba-ink-soft); }
.panel-metrics b { margin-left: 4px; font-family: var(--font-arcade); font-size: 9px; font-weight: 400; color: var(--gba-ink); }

/* ===================== VANTAGEM DE TIPO (0.32) =====================
   No banner do painel da fase, embaixo da pílula do tipo do ginásio, os 3 tipos
   que mais batem no time do líder (systems/matchup.js). A lista inteira e as
   resistências ficam na dica. */
/* as fraquezas do líder: embaixo da pílula do tipo, numa placa escura em cima do salão */
.panel-weak {
  position: absolute;
  top: 30px;
  right: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 4px;
  background: rgba(13, 20, 34, .74);
  border-radius: 3px;
  cursor: help;
}
.panel-weak-label {
  font-family: var(--font-arcade);
  font-size: 7px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}
.panel-weak .type-tag {
  padding: 2px 5px 1px;
  font-family: var(--font-arcade);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0;
  color: #fff;
}

/* ======================= A DESCIDA DO DIVE (o modo aquático) ======================= */
#app[data-screen="screen-dive"] #side-rail,
#app[data-screen="screen-dive"] .gear-float,
#app[data-screen="screen-dive"] #menu-bg,
#app[data-screen="screen-dive"] #menu-scrim { display: none; }

.screen.dive { justify-content: center; align-items: center; gap: 0; padding: 0; background: #0a0b24; }
/* o "console": a barra das bolhas em cima do tabuleiro, como na maquete */
.dive-console { display: flex; flex-direction: column; border: 4px solid #3a3580; background: #000; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.dive-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 14px;
  padding: 6px 12px; background: #17163f; color: #eceaff;
  font-family: var(--font-pixel); font-size: 20px; font-weight: 700; letter-spacing: .04em;
}
.dive-lives { display: flex; gap: 6px; align-items: center; }
.dive-lives i {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid #8fe3ff;
  background: radial-gradient(circle at 35% 35%, #fff 0 18%, #8fe3ff 19% 60%, #3c8fc0 61%);
  transition: transform .2s, opacity .2s;
}
.dive-lives i.gone { opacity: .18; transform: scale(.6); background: none; }
.dive-lives i.pop { animation: dive-pop .35s ease-out; }
@keyframes dive-pop { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
.dive-depth { color: #8fe3ff; }
.dive-prog { flex: 1 1 120px; max-width: 260px; height: 12px; border: 2px solid #a9a5d6; }
.dive-prog i { display: block; height: 100%; width: 0; background: #8fe3ff; }
.dive-screen { position: relative; }
.dive-canvas { display: block; image-rendering: pixelated; }
.dive-banner {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  font-family: var(--font-pixel); font-weight: 700; font-size: clamp(20px, 3.4vw, 40px); color: #eceaff;
  text-shadow: 3px 3px 0 #000; white-space: nowrap; pointer-events: none;
}
.dive-pause {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 16px;
  align-items: center; justify-content: center; background: rgba(6, 6, 24, .72);
  font-family: var(--font-pixel); font-weight: 700; font-size: 28px; color: #eceaff;
}
.dive-dialog { bottom: 44px; }

/* o salão do Kyogre (0.37): a tela do GBA e o card da fase por cima, como o painel do mapa */
.hall-stage { position: relative; border: 4px solid #3a3580; background: #000; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.hall-card { position: fixed; z-index: 4; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: calc(100vh - 24px); animation: hall-card-in .3s steps(6); }
@keyframes hall-card-in { from { transform: translate(-50%, calc(-50% + 24px)); opacity: 0; } }
.hall-card .panel-banner { background-position: center bottom; background-size: auto 128px; }
.hall-card .panel-banner-leader { bottom: -8px; }
.hall-card .panel-balls { align-items: center; gap: 4px; }
.panel-balls-text { margin-left: 4px; font-size: 13px; color: var(--gba-ink-soft); }
.hall-back { width: 100%; justify-content: center; }
.hall-back .btn-text { text-align: center; }
.hall-note { margin: 0; font-size: 13px; color: var(--gba-ink-soft); text-align: center; }

/* 0.37.1: a descida e o salão em tela cheia, como a vila (pedido do Fellipe); a barra das bolhas por cima */
.screen.dive { display: block; padding: 0; }
.dive-console { position: absolute; inset: 0; border: 0; box-shadow: none; background: #0a0620; }
.dive-console .dive-screen { position: absolute; inset: 0; }
.dive-console .dive-canvas, .hall-stage .dive-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dive-bar {
  position: absolute; z-index: 2; top: 12px; left: 50%; transform: translateX(-50%);
  width: min(760px, calc(100% - 28px)); border: 3px solid #3a3580; border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
.hall-stage { position: absolute; inset: 0; border: 0; box-shadow: none; }
.screen.dive .hub-hint { z-index: 2; }

/* a derrota depois do bolsão de ar (0.37.4): o checkpoint */
.dive-defeat { z-index: 3; text-align: center; padding: 16px; }
.dive-defeat p { margin: 0; max-width: 520px; font-size: 20px; font-weight: 500; color: #c9c6ee; }
.dive-defeat .menu-btn { width: min(420px, 90vw); justify-content: center; }
.dive-defeat .menu-btn .btn-text { text-align: center; }