/* ============================================================
   ESTILO COMPARTILHADO — Coleção Pokémon
   Design tokens e componentes usados nas três páginas
   (index.html, estatisticas.html, wishlist.html) para que
   tenham a mesma identidade visual.
   ============================================================ */
:root{
  --tinta:#0B1020;         /* fundo: interior de fichário */
  --fenda:#141B33;         /* superfície elevada */
  --bolso:#1B2342;         /* bolso plástico vazio */
  --linha:#2A3358;         /* divisórias */
  --nuvem:#E9EDFA;         /* texto principal */
  --bruma:#8D97BD;         /* texto secundário */
  --indigo:#3B4CCA;        /* azul Pokémon (herdado do site atual) */
  --eletrico:#FFCB05;      /* amarelo Pokémon */
  --brasa:#E3350D;         /* vermelho Pokémon */
  --menta:#3DD9A4;

  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --sombra:0 18px 40px -20px rgba(0,0,0,.85);

  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --corpo:'Instrument Sans',system-ui,sans-serif;
  --dado:'Azeret Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--corpo); color:var(--nuvem);
  background:var(--tinta);
  background-image:
    radial-gradient(1100px 620px at 12% -8%, rgba(59,76,202,.30), transparent 62%),
    radial-gradient(900px 520px at 92% 6%, rgba(255,203,5,.10), transparent 58%);
  background-repeat:no-repeat;
  min-height:100vh;
  padding-bottom:96px;
  position:relative;
}
/* Imagem de fundo num plano fixo próprio: cobre sempre a janela inteira
   (não o documento, que pode ser bem mais alto que a tela) e não sofre
   do bug do iOS que trava a rolagem quando se usa background-attachment:fixed. */
body::before{
  content:'';
  position:fixed; inset:0; z-index:-1;
  background-image:
    linear-gradient(180deg, rgba(11,16,32,.55), rgba(11,16,32,.80)),
    url('fundo.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:2px solid var(--eletrico); outline-offset:3px; border-radius:4px}

/* ============================================================
   TOPO (cabeçalho fixo, igual nas três páginas)
   ============================================================ */
.topo{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:12px clamp(14px,4vw,32px);
  background:rgba(11,16,32,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linha);
}
.marca{display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0}
.selo{
  width:34px; height:34px; flex-shrink:0; display:block; object-fit:contain;
}
.marca b{font-family:var(--display); font-weight:800; font-size:16px; letter-spacing:-.02em; white-space:nowrap}
.menu{display:flex; gap:4px; margin-left:auto}
.menu a{
  text-decoration:none; color:var(--bruma); font-size:14px; font-weight:500;
  padding:8px 12px; border-radius:999px; transition:.18s; white-space:nowrap;
}
.menu a:hover{color:var(--nuvem); background:rgba(255,255,255,.06)}
.menu a[aria-current="page"]{color:var(--tinta); background:var(--eletrico); font-weight:600}
.btn-chave{
  background:transparent; color:var(--bruma); border:1px solid var(--linha);
  padding:8px 14px; border-radius:999px; font-size:13px; font-weight:600;
  cursor:pointer; transition:.18s; white-space:nowrap; flex-shrink:0;
}
.btn-chave:hover{border-color:var(--eletrico); color:var(--eletrico)}

/* Celular: tudo numa linha só — a marca some o texto e fica só a logo,
   o menu encolhe e, se ainda não couber, rola na horizontal em vez de quebrar. */
@media (max-width:640px){
  .topo{ flex-wrap:nowrap; gap:10px; padding:10px clamp(12px,4vw,32px) }
  .marca b{ display:none }
  .menu{ gap:2px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch }
  .menu::-webkit-scrollbar{ display:none }
  .menu a{ padding:7px 9px; font-size:13px }
  .btn-chave{ padding:7px 11px; font-size:12.5px }
}

/* ============================================================
   CAPA / RESUMO (cabeçalho de página com título e placar)
   ============================================================ */
.capa{padding:clamp(26px,5vw,48px) clamp(14px,4vw,32px) 0; max-width:1180px; margin:0 auto}
.sobrescrito{
  font-family:var(--dado); font-size:11px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--eletrico); margin:0 0 10px;
}
.capa h1{
  font-family:var(--display); font-weight:800; letter-spacing:-.035em; line-height:.94;
  font-size:clamp(38px,8vw,68px); margin:0 0 22px;
}
.capa h1 em{font-style:normal; color:var(--bruma)}

.placar{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px}
.placa{
  background:var(--fenda); border:1px solid var(--linha); border-radius:var(--r-md);
  padding:12px 18px; min-width:118px;
}
.placa span{display:block; font-size:11px; color:var(--bruma); text-transform:uppercase; letter-spacing:.1em; margin-bottom:4px}
.placa strong{font-family:var(--dado); font-size:22px; font-weight:700; letter-spacing:-.03em}
.placa.destaque{border-color:rgba(61,217,164,.4); background:linear-gradient(160deg,rgba(61,217,164,.12),var(--fenda))}
.placa.destaque strong{color:var(--menta)}

/* ============================================================
   PALCO — corpo de página (max-width comum às três páginas)
   ============================================================ */
.palco{max-width:1180px; margin:0 auto; padding:26px clamp(14px,4vw,32px)}

/* ============================================================
   CARTÕES E PÍLULAS genéricos
   ============================================================ */
.cartao{
  background:var(--fenda); border:1px solid var(--linha); border-radius:var(--r-lg);
  padding:clamp(16px,2.4vw,26px); margin-bottom:22px;
}
.cartao h2{
  font-family:var(--display); font-size:18px; font-weight:800; letter-spacing:-.02em;
  margin:0 0 16px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.trilha-pilulas{display:flex; flex-wrap:wrap; gap:8px}
.pilula{
  background:var(--bolso); border:1px solid var(--linha); color:var(--bruma);
  border-radius:999px; padding:7px 13px; font-size:12.5px; display:flex; gap:6px; align-items:center;
}
.pilula strong{font-family:var(--dado); color:var(--nuvem); font-weight:700}

.etiqueta{
  background:transparent; border:1px solid var(--linha); color:var(--bruma);
  border-radius:999px; padding:6px 12px; font-size:12px; font-weight:500; cursor:pointer; transition:.18s;
}
.etiqueta:hover{border-color:var(--bruma); color:var(--nuvem)}
.etiqueta[aria-pressed="true"]{background:var(--nuvem); border-color:var(--nuvem); color:var(--tinta); font-weight:600}

/* área com scroll — grade de números faltando, etc. */
.trilha-scroll{
  display:flex; flex-wrap:wrap; gap:6px; max-height:200px; overflow-y:auto;
  padding:10px; background:rgba(6,9,20,.35); border-radius:var(--r-sm); border:1px solid var(--linha);
  scrollbar-width:thin;
}
.trilha-scroll::-webkit-scrollbar{width:6px}
.trilha-scroll::-webkit-scrollbar-thumb{background:var(--linha); border-radius:9px}
.badge-numero{
  background:var(--bolso); color:var(--bruma); border:1px solid var(--linha);
  border-radius:6px; padding:4px 8px; font-family:var(--dado); font-size:11.5px; font-weight:700;
}

/* ============================================================
   FORMULÁRIOS (painel de cadastro)
   ============================================================ */
.campo{margin-bottom:14px}
.campo label{
  display:block; font-size:11px; font-weight:600; color:var(--bruma);
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px;
}
.campo input,.campo select,.campo textarea{
  width:100%; background:var(--tinta); border:1px solid var(--linha); color:var(--nuvem);
  border-radius:var(--r-sm); padding:11px 12px; font-size:14px; font-family:var(--corpo);
}
.campo textarea{resize:vertical; min-height:64px}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--indigo); outline:none}
.campo input::placeholder,.campo textarea::placeholder{color:var(--bruma)}
.dupla{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.btn-primario{
  background:var(--indigo); color:#fff; border:none; border-radius:var(--r-sm);
  padding:13px; font-weight:700; font-size:15px; cursor:pointer;
}
.btn-primario:hover{background:#3241AE}
.btn-secundario{
  background:transparent; color:var(--bruma); border:1px solid var(--linha);
  border-radius:var(--r-sm); padding:11px; font-weight:600; font-size:14px; cursor:pointer;
}
.btn-secundario:hover{border-color:var(--bruma); color:var(--nuvem)}
.btn-perigo{
  background:transparent; color:var(--brasa); border:1px solid rgba(227,53,13,.4);
  border-radius:var(--r-sm); padding:11px; font-weight:600; font-size:14px; cursor:pointer;
}
.btn-perigo:hover{background:rgba(227,53,13,.1)}

.painel{
  position:fixed; top:0; right:0; bottom:0; z-index:90; width:min(430px,100%);
  background:var(--fenda); border-left:1px solid var(--linha);
  padding:24px; overflow-y:auto; transform:translateX(100%);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.painel.aberto{transform:none}
.painel h2{font-family:var(--display); font-size:22px; margin:0 0 20px; letter-spacing:-.03em}
.cortina{
  position:fixed; inset:0; z-index:80; background:rgba(4,7,16,.72);
  backdrop-filter:blur(4px); display:none;
}
.cortina.aberta{display:block}
.fab{
  position:fixed; right:20px; bottom:20px; z-index:70; display:none;
  background:var(--eletrico); color:#1A1200; border:none; border-radius:999px;
  padding:15px 24px; font-weight:700; font-size:15px; cursor:pointer;
  box-shadow:0 14px 30px -10px rgba(255,203,5,.65);
}
.fab.mostrar{display:block}

/* ============================================================
   LIGHTBOX (ampliar imagem)
   ============================================================ */
.lupa{
  position:fixed; inset:0; z-index:100; background:rgba(4,7,16,.93);
  backdrop-filter:blur(8px); display:none; place-items:center; padding:24px;
}
.lupa.aberta{display:grid}
.lupa img{max-width:min(420px,90vw); max-height:86vh; border-radius:16px; box-shadow:var(--sombra)}
.lupa .fechar-lupa{
  position:absolute; top:20px; right:24px; color:var(--nuvem); font-size:32px;
  font-weight:700; cursor:pointer; line-height:1; transition:.18s;
}
.lupa .fechar-lupa:hover{color:var(--brasa)}

/* ============================================================
   AVISO (toast)
   ============================================================ */
.aviso{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,90px);
  z-index:110; background:var(--nuvem); color:var(--tinta);
  padding:12px 22px; border-radius:999px; font-weight:600; font-size:14px;
  transition:transform .28s cubic-bezier(.2,.7,.3,1); box-shadow:var(--sombra);
}
.aviso.mostrar{transform:translate(-50%,0)}

/* ============================================================
   CARREGANDO
   ============================================================ */
.carregando{
  text-align:center; padding:60px 20px; color:var(--bruma);
  font-family:var(--dado); font-size:13px; letter-spacing:.04em;
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}