/* Site do BombStats — o mesmo visual de jogo da Vila (village.css, prévias
   aprovadas da loja de cristais e do personagem): placas escuras com borda
   grossa preta, botões laranja em relevo "apertáveis", Inter 800/900 com
   sombra dura embaixo, arte real do BombCrypto em pixel.
   Layout: faixas de largura total (céu da Vila → cavernas → praça → farm),
   cada uma com uma "janela" de jogo no centro. Um tema só, escuro (é um jogo).

   Animações: só transform/opacity; tudo para com "menos animação". */
:root {
  --ink: #1a1429;      /* placa */
  --ink2: #241c3a;     /* placa de dentro */
  --ink3: #33284f;     /* botão secundário / hover */
  --ink4: #43376a;
  --line: #07050d;     /* borda grossa */
  --paper: #fff2d4;    /* texto principal (papel quente) */
  --muted: #b9aad6;
  --dim: #8d80b0;
  --bomb: #ff7a1a;     /* laranja da bomba */
  --bomb-hi: #ffa04d;
  --bomb-deep: #c24c00;
  --gold: #ffd34a;
  --crystal: #d58bff;
  --ok: #86e05f;
  --crit: #ff5c4f;
  --info: #7fc8ff;
  --warn: #ffc53d;
  --night: #0f0b1c;    /* fundo da página */
  --night2: #150f26;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1180px;
  --ease: cubic-bezier(.2, .9, .3, 1.1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--night); color: var(--paper);
  font: 500 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--ink); }
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; letter-spacing: -.02em; line-height: 1.08; }
.pix { image-rendering: pixelated; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--info); outline-offset: 3px; border-radius: 8px; }
.wrap {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- títulos com "cara de placa" ---------- */
.titulo {
  font-weight: 900; color: var(--paper);
  text-shadow: 0 3px 0 var(--line), 0 0 1px var(--line);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--bomb-hi);
}
.eyebrow img { width: 20px; height: 20px; }
.lead { color: var(--muted); font-size: 18px; line-height: 1.55; max-width: 60ch; }

/* ---------- botões (iguais ao .vl-btn da Vila, maiores) ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 900 17px/1.1 var(--font); letter-spacing: -.01em; text-decoration: none; cursor: pointer;
  background: var(--bomb); color: #2b1100;
  border: 3px solid var(--line); border-radius: 12px; padding: 14px 22px;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.22), inset 0 3px 0 rgba(255,255,255,.28), 0 5px 0 var(--line);
  transition: transform .08s, box-shadow .08s, filter .15s;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(4px); box-shadow: inset 0 -3px 0 rgba(0,0,0,.22), inset 0 2px 0 rgba(255,255,255,.2), 0 1px 0 var(--line); }
.btn small { display: block; font-size: 12px; font-weight: 700; opacity: .72; margin-top: 3px; letter-spacing: 0; }
.btn .ic { width: 26px; height: 26px; flex: none; }
.btn.alt { background: var(--ink3); color: var(--paper); }
.btn.gold { background: var(--gold); color: #3a2400; }
.btn.sm { font-size: 14px; padding: 8px 14px; border-radius: 9px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.22), 0 3px 0 var(--line); }
.btn.sm:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.btn.brilho { overflow: hidden; }
.btn.brilho::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%);
  transform: translateX(-130%); animation: brilho 5s 1.8s infinite;
}
@keyframes brilho { 0%, 72% { transform: translateX(-130%); } 88%, 100% { transform: translateX(130%); } }

/* ---------- placa (janela de jogo) ---------- */
.placa {
  background: var(--ink); border: 3px solid var(--line); border-radius: 14px;
  box-shadow: 0 6px 0 var(--line), inset 0 2px 0 rgba(255,255,255,.06), inset 0 -4px 0 rgba(0,0,0,.3);
}
.placa-dentro { background: var(--ink2); border: 2px solid var(--line); border-radius: 10px; }
.selo {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
  padding: 4px 7px; border-radius: 6px; border: 2px solid var(--line); background: var(--ink3); color: var(--paper);
}
.selo.premium { background: linear-gradient(#ffe27a, #f5a623); color: #3a2400; }
.selo.vagas { background: #6a55a8; color: #fff; }
.selo.chefe { background: var(--crit); color: #2b0500; }
.selo.ok { background: var(--ok); color: #102200; }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 3px solid var(--line);
}
.topo .wrap { display: flex; align-items: center; gap: 14px; height: 66px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; font-size: 20px; letter-spacing: -.02em; text-shadow: 0 2px 0 var(--line); }
.marca img { width: 38px; height: 38px; border-radius: 10px; border: 2px solid var(--line); transition: transform .35s var(--ease); }
.marca:hover img { transform: rotate(-8deg) scale(1.08); }
.menu { display: flex; gap: 2px; margin-left: 10px; }
.menu a {
  text-decoration: none; color: var(--muted); font-weight: 800; font-size: 15px;
  padding: 8px 12px; border-radius: 9px; border: 2px solid transparent; transition: color .15s, background .15s;
}
.menu a:hover { color: var(--paper); background: var(--ink2); }
.menu a[aria-current="page"] { color: var(--paper); background: var(--ink2); border-color: var(--line); }
.topo-fim { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.idioma { display: flex; border: 2px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--ink2); }
.idioma a, .idioma button { border: 0; background: none; color: var(--dim); font: 900 12px/1 var(--font); padding: 9px 10px; cursor: pointer; text-decoration: none; letter-spacing: .06em; }
.idioma [aria-current="true"] { background: var(--ink4); color: var(--paper); }
.abre-menu { display: none; width: 42px; height: 42px; border-radius: 10px; border: 2px solid var(--line); background: var(--ink2); color: var(--paper); cursor: pointer; place-items: center; }
@media (max-width: 900px) {
  .menu {
    position: fixed; left: 0; right: 0; top: calc(66px + env(safe-area-inset-top, 0px)); margin: 0;
    flex-direction: column; gap: 4px; background: var(--ink); border-bottom: 3px solid var(--line);
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px));
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform .2s, opacity .2s;
  }
  .menu a { font-size: 17px; padding: 12px; }
  .topo.aberto .menu { transform: none; opacity: 1; pointer-events: auto; }
  .abre-menu { display: grid; }
  .topo .entrar { display: none; }
}

/* ---------- herói: a Vila Central de fundo ---------- */
.heroi { position: relative; isolation: isolate; overflow: hidden; border-bottom: 3px solid var(--line); }
.heroi-fundo {
  position: absolute; inset: -6% -6% -6% -6%; z-index: -2;
  background: url("../img/vila/cavernas.webp") center 30% / cover no-repeat;
  image-rendering: pixelated;
  animation: passeio 38s ease-in-out infinite alternate;
}
@keyframes passeio { from { transform: scale(1.06) translate3d(-2%, 0, 0); } to { transform: scale(1.12) translate3d(2.5%, -2%, 0); } }
.heroi::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 70% 90% at 22% 60%, rgba(15,11,28,.94) 0%, rgba(15,11,28,.78) 45%, rgba(15,11,28,.25) 80%),
    linear-gradient(180deg, rgba(15,11,28,.2) 0%, rgba(15,11,28,0) 40%, rgba(15,11,28,.85) 100%);
}
.heroi .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-block: 64px 72px; }
.heroi h1 { font-size: clamp(36px, 4.8vw, 56px); }
.heroi h1 .laranja { color: var(--bomb); }
.heroi .lead { margin-top: 18px; color: #e3d8f5; }
.heroi-acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.heroi-nota { margin-top: 16px; font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 16px; }
.heroi-nota span { display: inline-flex; align-items: center; gap: 6px; }
.heroi-nota svg { color: var(--ok); }
.ao-vivo-faixa { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.contador {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px;
  background: rgba(26,20,41,.88); border: 2px solid var(--line); border-radius: 11px; box-shadow: 0 3px 0 var(--line);
}
.contador b { display: block; font-size: 20px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 var(--line); }
.contador small { display: block; font-size: 12px; color: var(--muted); font-weight: 700; line-height: 1.2; margin-top: 3px; }
.contador img { width: 26px; height: 26px; }
.pisca { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(134,224,95,.25); animation: pisca 1.6s infinite; flex: none; }
@keyframes pisca { 50% { box-shadow: 0 0 0 7px rgba(134,224,95,0); } }

/* janela da caçada no herói */
.janela { position: relative; }
.janela-barra {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-bottom: 3px solid var(--line); background: var(--ink2); border-radius: 11px 11px 0 0;
}
.janela-barra b { font-size: 14px; font-weight: 900; }
.janela-barra .selo { margin-left: auto; }
.caca-tela { position: relative; background: #000; }
.caca-tela canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; cursor: crosshair; touch-action: manipulation; }
.caca-hud {
  position: absolute; left: 10px; top: 10px; display: grid; gap: 4px; pointer-events: none;
  background: rgba(15,11,28,.82); border: 2px solid var(--line); border-radius: 9px; padding: 7px 10px;
  font-size: 12px; font-weight: 800;
}
.caca-hud span { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.caca-hud img { width: 16px; height: 16px; }
.caca-hud .xp { color: var(--info); }
.caca-hud .ouro { color: var(--gold); }
.caca-hud .pulo { animation: pulo .35s var(--ease); }
@keyframes pulo { 40% { transform: scale(1.25); } }
.caca-dica {
  position: absolute; right: 10px; bottom: 10px; pointer-events: none;
  font-size: 12px; font-weight: 800; color: var(--paper);
  background: rgba(15,11,28,.82); border: 2px solid var(--line); border-radius: 8px; padding: 5px 9px;
  animation: dica 2.4s ease-in-out infinite;
}
@keyframes dica { 50% { transform: translateY(-3px); } }
.janela-pe { display: flex; gap: 8px; padding: 10px 12px; border-top: 3px solid var(--line); background: var(--ink2); border-radius: 0 0 11px 11px; font-size: 13px; color: var(--muted); align-items: center; }
.janela-pe b { color: var(--paper); }

/* ---------- seções ---------- */
.faixa { position: relative; padding-block: 88px; border-bottom: 3px solid var(--line); }
.faixa.escura { background: var(--night2); }
.faixa-cab { display: grid; gap: 12px; margin-bottom: 36px; max-width: 760px; }
.faixa-cab h2 { font-size: clamp(30px, 4.4vw, 46px); }

/* dois jeitos: jogo × farm */
.dois { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.lado { padding: 26px; display: grid; gap: 16px; align-content: start; position: relative; overflow: hidden; }
.lado-cab { display: flex; align-items: center; gap: 14px; }
.lado-cab .icone { width: 64px; height: 64px; border-radius: 12px; border: 3px solid var(--line); background: var(--ink2); display: grid; place-items: center; flex: none; }
.lado-cab .icone img { width: 48px; height: 48px; }
.lado h3 { font-size: 26px; font-weight: 900; text-shadow: 0 2px 0 var(--line); }
.lado-cab small { display: block; font-size: 13px; font-weight: 800; color: var(--bomb-hi); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.lado p { color: var(--muted); }
.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lista li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15px; }
.lista li img { width: 28px; height: 28px; }
.lista b { color: var(--paper); }
.lista span { color: var(--muted); }
.lado .btn { justify-self: start; margin-top: 4px; }
.lado.jogo { background: linear-gradient(180deg, #2a1d45 0%, var(--ink) 55%); }
.lado.farm { background: linear-gradient(180deg, #2b2016 0%, var(--ink) 55%); }

/* cavernas: trilha de níveis */
.cavernas-grade { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 22px; align-items: start; }
.trilha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.cav {
  position: relative; text-align: left; cursor: pointer; font: inherit; color: var(--paper);
  background: var(--ink2); border: 2px solid var(--line); border-radius: 10px; padding: 8px 9px 9px;
  box-shadow: 0 3px 0 var(--line); transition: transform .08s, background .15s;
  display: grid; gap: 4px; min-width: 0;
}
.cav:hover { background: var(--ink3); }
.cav:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.cav[aria-pressed="true"] { background: var(--ink4); outline: 3px solid var(--bomb); outline-offset: -1px; }
.cav .piso { height: 26px; border-radius: 6px; border: 2px solid var(--line); background-size: 24px 24px; image-rendering: pixelated; }
.cav b { font-size: 12.5px; font-weight: 900; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cav small { font-size: 11px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.cav .marcas { position: absolute; top: 4px; right: 4px; display: flex; gap: 3px; }
.cav .marcas i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--line); }
.cav .marcas .p { background: var(--gold); }
.cav .marcas .c { background: var(--crit); }
.cav .marcas .v { background: #9b86e0; }
.ficha { padding: 20px; display: grid; gap: 14px; }
.ficha h3 { font-size: 24px; font-weight: 900; text-shadow: 0 2px 0 var(--line); }
.ficha .selos { display: flex; flex-wrap: wrap; gap: 6px; }
.bichos { display: flex; flex-wrap: wrap; gap: 8px; }
.bicho { display: grid; justify-items: center; gap: 4px; width: 78px; padding: 8px 4px 6px; text-align: center; }
.bicho canvas, .bicho img { width: 48px; height: 48px; image-rendering: pixelated; object-fit: contain; }
.bicho small { font-size: 11px; font-weight: 800; line-height: 1.2; color: var(--muted); }
.bicho.chefe { border-color: var(--crit); background: #3a1a2a; }
.bicho.chefe small { color: #ffb3ab; }
.regras { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--muted); }
.regras li { display: flex; gap: 8px; }
.regras li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 7px; background: var(--bomb); border: 2px solid var(--line); transform: rotate(45deg); }

/* praça: mapa com alfinetes */
.praca { position: relative; overflow: hidden; }
.praca img.mapa { width: 100%; height: auto; image-rendering: pixelated; }
.alfinete {
  position: absolute; transform: translate(-50%, -100%); border: 0; padding: 0; background: none; cursor: pointer;
  display: grid; justify-items: center;
}
.alfinete i {
  width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--bomb); border: 3px solid var(--line); box-shadow: 0 3px 0 var(--line);
  display: grid; place-items: center; transition: transform .15s var(--ease);
  animation: alfinete 2.6s ease-in-out infinite; animation-delay: var(--a, 0s);
}
.alfinete i b { transform: rotate(45deg); font-style: normal; font-weight: 900; font-size: 13px; color: #2b1100; }
.alfinete:hover i, .alfinete[aria-expanded="true"] i { transform: rotate(-45deg) scale(1.18); background: var(--gold); }
@keyframes alfinete { 50% { translate: 0 -4px; } }
.npcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.npc {
  padding: 14px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 2px 12px; align-content: start;
  transition: transform .2s var(--ease), background .15s;
}
.npc img { grid-row: span 2; width: 64px; height: 64px; image-rendering: pixelated; transition: transform .25s var(--ease); }
.npc:hover { background: var(--ink2); transform: translateY(-3px); }
.npc:hover img { transform: scale(1.12) rotate(-3deg); }
.npc b { font-size: 16px; font-weight: 900; text-shadow: 0 2px 0 var(--line); align-self: end; }
.npc span { font-size: 13px; color: var(--muted); line-height: 1.4; }

/* ouro × cristais */
.moedas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.moeda { padding: 22px; display: grid; gap: 10px; align-content: start; }
.moeda img.grande { width: 72px; height: 72px; image-rendering: pixelated; animation: flutua 3.2s ease-in-out infinite; }
.moeda:nth-child(2) img.grande { animation-delay: -1.1s; }
.moeda:nth-child(3) img.grande { animation-delay: -2.2s; }
@keyframes flutua { 50% { transform: translateY(-6px) rotate(-3deg); } }
.moeda h3 { font-size: 22px; font-weight: 900; text-shadow: 0 2px 0 var(--line); }
.moeda p { color: var(--muted); font-size: 15px; }
.aviso-dinheiro { margin-top: 18px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.aviso-dinheiro b { color: var(--paper); }
.aviso-dinheiro svg { color: var(--gold); flex: none; margin-top: 2px; }

/* farm do BombCrypto */
.farm-grade { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 34px; align-items: center; }
.print { overflow: hidden; transform: rotate(1.2deg); transition: transform .4s var(--ease); }
.print:hover { transform: rotate(0) scale(1.01); }
.print img { width: 100%; height: auto; }
.sistemas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.sistema { display: grid; justify-items: center; gap: 6px; padding: 14px 8px; text-decoration: none; text-align: center; transition: transform .08s, background .15s; }
.sistema:hover { background: var(--ink3); }
.sistema:active { transform: translateY(2px); }
.sistema svg { width: 30px; height: 30px; }
.sistema b { font-size: 14px; font-weight: 900; }
.sistema small { font-size: 11.5px; color: var(--muted); font-weight: 700; line-height: 1.2; }
.versao { margin-top: 12px; font-size: 13px; color: var(--muted); }
.versao b { color: var(--paper); }

/* ranking + status */
.vivo-grade { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 22px; align-items: start; }
.ranking { padding: 8px; }
.ranking-cab { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; }
.ranking-cab b { font-size: 18px; font-weight: 900; }
.abas { margin-left: auto; display: flex; border: 2px solid var(--line); border-radius: 9px; overflow: hidden; }
.abas button { border: 0; background: var(--ink2); color: var(--muted); font: 800 13px/1 var(--font); padding: 8px 11px; cursor: pointer; }
.abas button[aria-pressed="true"] { background: var(--ink4); color: var(--paper); }
.linhas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.linha { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; }
.linha .pos { width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--line); display: grid; place-items: center; font-weight: 900; font-size: 14px; background: var(--ink3); }
.linha:nth-child(1) .pos { background: var(--gold); color: #3a2400; }
.linha:nth-child(2) .pos { background: #d8dce8; color: #22202c; }
.linha:nth-child(3) .pos { background: #d98a4e; color: #2b1100; }
.linha .quem { min-width: 0; }
.linha .quem b { display: block; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha .quem small { color: var(--muted); font-size: 12px; font-weight: 700; }
.linha .pontos { font-weight: 900; font-variant-numeric: tabular-nums; text-align: right; }
.linha .pontos small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; }
.status { padding: 20px; display: grid; gap: 14px; }
.status-topo { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 18px; }
.status-topo .pisca.fora { background: var(--crit); box-shadow: none; animation: none; }
.status dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; font-size: 14px; }
.status dt { color: var(--muted); }
.status dd { margin: 0; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; }

/* perguntas */
.perguntas { display: grid; gap: 10px; max-width: 860px; }
.pergunta { padding: 0; overflow: hidden; }
.pergunta summary { list-style: none; cursor: pointer; padding: 16px 18px; font-weight: 900; font-size: 16px; display: flex; gap: 12px; align-items: center; }
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after { content: "+"; margin-left: auto; font-size: 22px; color: var(--bomb); transition: transform .2s; }
.pergunta[open] summary::after { transform: rotate(45deg); }
.pergunta p { padding: 0 18px 16px; color: var(--muted); font-size: 15px; }

/* chamada final */
.chamada { text-align: center; display: grid; justify-items: center; gap: 16px; }
.chamada h2 { font-size: clamp(30px, 4.6vw, 50px); }
.chamada .heroi-acoes { justify-content: center; }
.andando { position: relative; height: 72px; margin-top: 18px; width: 100%; overflow: hidden; }
.andando canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }

/* rodapé */
.rodape { background: var(--ink); padding-block: 40px 28px; }
.rodape .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
.rodape h4 { font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--bomb-hi); margin-bottom: 10px; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 14px; }
.rodape a { color: var(--muted); text-decoration: none; }
.rodape a:hover { color: var(--paper); }
.rodape p { color: var(--dim); font-size: 13px; margin-top: 10px; max-width: 42ch; }
.rodape-fim { grid-column: 1 / -1; border-top: 2px solid var(--line); padding-top: 18px; font-size: 12.5px; color: var(--dim); display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* entrada ao rolar: começa visível; só desliza um pouco */
.sobe { animation: sobe .6s var(--ease) backwards; animation-delay: var(--d, 0ms); }
@keyframes sobe { from { opacity: 0; transform: translateY(14px); } }

/* ---------- celular ---------- */
@media (max-width: 980px) {
  .heroi .wrap, .cavernas-grade, .farm-grade, .vivo-grade { grid-template-columns: minmax(0, 1fr); }
  .dois, .moedas { grid-template-columns: minmax(0, 1fr); }
  .npcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape .wrap > div:first-child { grid-column: 1 / -1; }
  .print { transform: none; }
}
@media (max-width: 560px) {
  .faixa { padding-block: 60px; }
  .heroi .wrap { padding-block: 40px 52px; }
  .trilha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sistemas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heroi-acoes .btn { flex: 1 1 100%; }
  .lado { padding: 20px; }
  .alfinete i { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.ranking:has(.linhas li) .so-vazio { display: none; }

/* ================= guia ================= */
.guia-topo {
  position: relative; border-bottom: 3px solid var(--line); padding-block: 28px 40px;
  background:
    radial-gradient(ellipse 60% 120% at 85% 0%, rgba(255,122,26,.16), transparent 60%),
    linear-gradient(180deg, #221838, var(--night));
}
.migalhas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; font-weight: 800; color: var(--dim); margin-bottom: 22px; }
.migalhas a { color: var(--muted); text-decoration: none; }
.migalhas a:hover { color: var(--paper); }
.migalhas b { color: var(--paper); }
.ficha-grande { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; align-items: center; }
.ficha-texto { display: grid; gap: 14px; min-width: 0; }
.ficha-texto h1 { font-size: clamp(34px, 5vw, 54px); }
.ficha-texto .selos { display: flex; flex-wrap: wrap; gap: 6px; }
.ficha-texto .selos a { text-decoration: none; }
.retrato {
  width: 180px; height: 180px; display: grid; place-items: center; overflow: hidden;
  background:
    repeating-conic-gradient(#2c2244 0 25%, #261d3c 0 50%) 0 0 / 36px 36px;
}
.retrato img { width: 120px; height: 120px; object-fit: contain; image-rendering: pixelated; animation: flutua 3.2s ease-in-out infinite; filter: drop-shadow(0 6px 0 rgba(0,0,0,.35)); }
.retrato.chefe { border-color: var(--crit); box-shadow: 0 6px 0 var(--line), 0 0 0 3px rgba(255,92,79,.35); }
.retrato.item img { width: 96px; height: 96px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: grid; gap: 2px; padding: 8px 12px; min-width: 84px; background: var(--ink2); border: 2px solid var(--line); border-radius: 10px; box-shadow: 0 3px 0 var(--line); }
.chip small { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.chip b { font-size: 18px; font-weight: 900; line-height: 1.1; }
.chip.xp b, .mini .xp b { color: var(--info); }
.chip.ouro b, .mini .ouro b { color: var(--gold); }

.tabela { overflow-x: auto; padding: 6px; }
.drops { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: 15px; }
.drops th { text-align: left; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); padding: 6px 12px; }
.drops td { background: var(--ink2); padding: 8px 12px; border-block: 2px solid var(--line); white-space: nowrap; }
.drops td:first-child { border-left: 2px solid var(--line); border-radius: 9px 0 0 9px; width: 100%; white-space: normal; }
.drops td:last-child { border-right: 2px solid var(--line); border-radius: 0 9px 9px 0; }
.drops .forte { font-weight: 900; color: var(--paper); }
.drops td.num { color: var(--muted); font-weight: 700; }
.item-linha { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; }
.item-linha img { width: 32px; height: 32px; flex: none; }
.item-linha:hover span { color: var(--bomb-hi); }

.cartas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.cartas.pequenas { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cartas.largas { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.carta {
  display: grid; justify-items: center; align-content: start; gap: 6px; padding: 14px 10px 12px; text-align: center;
  text-decoration: none; color: var(--paper); transition: transform .2s var(--ease), background .15s;
}
.carta:hover { transform: translateY(-4px); background: var(--ink2); }
.carta:active { transform: translateY(0); }
.carta b { font-size: 15px; font-weight: 900; line-height: 1.2; }
.carta-arte { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 10px; background: repeating-conic-gradient(#2c2244 0 25%, #261d3c 0 50%) 0 0 / 28px 28px; border: 2px solid var(--line); }
.carta-arte img { width: 60px; height: 60px; object-fit: contain; image-rendering: pixelated; transition: transform .25s var(--ease); }
.carta:hover .carta-arte img { transform: scale(1.15) translateY(-2px); }
.carta.chefe { border-color: var(--crit); background: linear-gradient(180deg, #3a1a2a, var(--ink) 70%); }
.mini { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font-size: 12px; color: var(--muted); font-weight: 700; }
.mini b { color: var(--paper); }
.caverna-carta { justify-items: start; text-align: left; padding: 16px; gap: 8px; }
.caverna-carta .selos { display: flex; flex-wrap: wrap; gap: 5px; min-height: 22px; }
.faixa-nivel { font-size: 12px; font-weight: 900; color: #2b1100; background: var(--bomb); border: 2px solid var(--line); border-radius: 7px; padding: 3px 8px; }
.faixa-nivel::before { content: "nível "; }
html[lang="en"] .faixa-nivel::before { content: "level "; }

.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; align-items: start; }
.bloco { padding: 20px; display: grid; gap: 14px; }
.bloco-titulo { font-size: 13px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--bomb-hi); }
.atributos { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; }
.atributos dt, .atributos dd { padding: 9px 2px; border-bottom: 2px dashed var(--ink3); margin: 0; }
.atributos dt { color: var(--muted); font-weight: 700; }
.atributos dd { font-weight: 900; text-align: right; }
.mini-cartas { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.mini-carta { display: flex; align-items: center; gap: 8px; padding: 8px; text-decoration: none; font-size: 13px; font-weight: 800; }
.mini-carta img { width: 32px; height: 32px; image-rendering: pixelated; object-fit: contain; flex: none; }
.mini-carta:hover { background: var(--ink3); }

/* entrada do guia */
.portas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.porta { display: grid; gap: 10px; padding: 20px; text-decoration: none; transition: transform .2s var(--ease), background .15s; }
.porta:hover { transform: translateY(-4px); background: var(--ink2); }
.porta .icones { display: flex; gap: 4px; height: 56px; align-items: end; }
.porta .icones img { width: 48px; height: 48px; image-rendering: pixelated; object-fit: contain; }
.porta b { font-size: 20px; font-weight: 900; text-shadow: 0 2px 0 var(--line); }
.porta span { color: var(--muted); font-size: 14px; }
.stamina { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.stamina .faixa-st { padding: 14px; display: grid; gap: 4px; }
.stamina .faixa-st b { font-size: 26px; font-weight: 900; }
.stamina .faixa-st:nth-child(1) b { color: var(--ok); }
.stamina .faixa-st:nth-child(2) b { color: var(--warn, #ffc53d); }
.stamina .faixa-st:nth-child(3) b { color: var(--crit); }
.stamina small { color: var(--muted); font-size: 13px; }

/* textos legais e páginas de texto */
main.doc { padding-block: 48px 72px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
main.doc article {
  max-width: 820px; margin-inline: auto; background: var(--ink); border: 3px solid var(--line); border-radius: 14px;
  box-shadow: 0 6px 0 var(--line); padding: clamp(20px, 4vw, 44px); color: #e6dcf5; line-height: 1.7;
}
main.doc h1 { font-size: clamp(30px, 4vw, 42px); font-weight: 900; text-shadow: 0 3px 0 var(--line); color: var(--paper); margin-bottom: 18px; }
main.doc h2 { font-size: 22px; font-weight: 900; color: var(--paper); margin: 32px 0 10px; }
main.doc h3 { font-size: 17px; font-weight: 900; color: var(--bomb-hi); margin: 22px 0 8px; }
main.doc p, main.doc ul, main.doc ol, main.doc table, main.doc blockquote { margin: 0 0 14px; }
main.doc a { color: var(--info); }
main.doc table { width: 100%; border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; }
main.doc th, main.doc td { border: 2px solid var(--line); padding: 8px 10px; text-align: left; }
main.doc th { background: var(--ink2); }
main.doc blockquote { border-left: 4px solid var(--bomb); padding: 8px 14px; background: var(--ink2); border-radius: 0 8px 8px 0; }
main.doc hr { border: 0; border-top: 2px dashed var(--ink3); margin: 26px 0; }

@media (max-width: 980px) { .portas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .ficha-grande { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .retrato { width: 132px; height: 132px; }
  .retrato img { width: 92px; height: 92px; }
  .portas, .stamina { grid-template-columns: minmax(0, 1fr); }
  .chip { min-width: 0; flex: 1 1 40%; }
}
/* lista de texto (rótulo + frase): rótulo à esquerda, frase alinhada à esquerda */
.atributos.texto { grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); column-gap: 18px; }
.atributos.texto dd { text-align: left; font-weight: 600; color: var(--paper); line-height: 1.5; }
.atributos.texto dt { font-weight: 900; color: var(--bomb-hi); }
@media (max-width: 560px) {
  .atributos.texto { grid-template-columns: minmax(0, 1fr); }
  .atributos.texto dt { border-bottom: 0; padding-bottom: 0; }
}
.moedas:has(> .moeda:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 980px) { .moedas:has(> .moeda:nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); } }
/* notas da versão do app (baixar.js): uma novidade por linha */
.notas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.notas li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; background: var(--ink2); border: 2px solid var(--line); border-radius: 10px; font-size: 15px; line-height: 1.45; }
.notas-ic { width: 34px; height: 34px; display: grid; place-items: center; font-size: 18px; background: var(--ink3); border: 2px solid var(--line); border-radius: 8px; }

/* busca e filtros das listas do guia */
.filtros { display: grid; gap: 12px; padding: 14px; margin-bottom: 18px; position: sticky; top: calc(66px + env(safe-area-inset-top, 0px)); z-index: 20; box-shadow: 0 8px 18px -10px rgba(0,0,0,.7); }
.busca { display: flex; align-items: center; gap: 10px; background: var(--ink); border: 2px solid var(--line); border-radius: 10px; padding: 0 12px; color: var(--dim); }
.busca:focus-within { border-color: var(--bomb); color: var(--bomb-hi); }
.busca input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--paper); font: 700 16px/1 var(--font); padding: 12px 0; }
.busca input::placeholder { color: var(--dim); font-weight: 600; }
.chips-filtro { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.chips-filtro button {
  flex: none; cursor: pointer; font: 800 13px/1 var(--font); color: var(--muted);
  background: var(--ink3); border: 2px solid var(--line); border-radius: 8px; padding: 8px 11px;
  box-shadow: 0 2px 0 var(--line); transition: transform .08s, background .15s;
}
.chips-filtro button:hover { color: var(--paper); }
.chips-filtro button:active { transform: translateY(2px); box-shadow: none; }
.chips-filtro button[aria-pressed="true"] { background: var(--bomb); color: #2b1100; }
.carta[hidden] { display: none; }
.filtro-vazio { text-align: center; padding: 30px 0; font-size: 15px; }

/* baixar: o botão do sistema de quem está vendo */
.sistema.sugerido { outline: 3px solid var(--bomb); outline-offset: -1px; background: linear-gradient(180deg, #3a2414, var(--ink) 80%); position: relative; }
.sistema.sugerido::before {
  content: attr(data-sugerido); position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  background: var(--bomb); color: #2b1100; border: 2px solid var(--line); border-radius: 6px; padding: 2px 7px;
}

/* ================= animações (anim.js põe .anima no <html>) ================= */
/* entrada ao rolar: só some quando o JS está ligado; aparece em cascata */
.anima .revela:not(.visto) { opacity: 0; }
.anima .revela.visto { animation: entra .62s cubic-bezier(.2, .9, .3, 1.15) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes entra { from { opacity: 0; transform: translateY(22px) scale(.97); } }
.anima .linha.revela.visto, .anima .notas li.revela.visto { animation-name: entra-lado; }
@keyframes entra-lado { from { opacity: 0; transform: translateX(-18px); } }

/* pavio aceso ao lado do rótulo das seções */
.eyebrow { position: relative; }
.pavio { display: inline-block; width: 46px; height: 3px; margin-left: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--line) 0 50%, var(--bomb-hi) 50%); background-size: 200% 100%; background-position: 100% 0; position: relative; }
.anima .visto .pavio, .anima .faixa-cab.visto .pavio { animation: queima 1.6s .3s ease-in forwards; }
.pavio::after { content: ""; position: absolute; right: -3px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle, #fff6c2 0 25%, var(--gold) 45%, rgba(255,122,26,0) 70%); animation: chispa .18s steps(2) infinite; }
.anima .faixa-cab.visto .pavio::after { animation: chispa .18s steps(2) infinite, anda-chispa 1.6s .3s ease-in forwards; }
@keyframes queima { to { background-position: 0 0; } }
@keyframes anda-chispa { to { right: calc(100% - 4px); opacity: 0; } }
@keyframes chispa { 50% { transform: scale(1.5); } }

/* canvas das explosões dos botões, por cima de tudo, sem pegar clique */
.fx-boom { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 90; }

/* brasas no topo */
.brasas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; image-rendering: pixelated; }
.heroi .wrap, .guia-topo .wrap { position: relative; z-index: 1; }

/* cartas inclinam com o mouse e ganham um brilho onde o mouse está */
.anima .carta, .anima .porta, .anima .npc, .anima .moeda, .anima .lado {
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .18s ease-out, background .15s;
  will-change: transform;
}
.anima .carta:hover, .anima .porta:hover, .anima .npc:hover { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-5px); }
.carta, .porta, .npc, .moeda, .lado { position: relative; }
.anima .carta::after, .anima .porta::after, .anima .npc::after, .anima .moeda::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,242,212,.12), transparent 55%);
}
.anima .carta:hover::after, .anima .porta:hover::after, .anima .npc:hover::after, .anima .moeda:hover::after { opacity: 1; }

/* monstros vivos: as artes do guia respiram, cada uma num tempo */
.carta-arte img { animation: respira 2.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -170ms); transform-origin: 50% 100%; }
@keyframes respira { 50% { transform: scale(1.04, .96); } }
.carta:hover .carta-arte img { animation: pulinho .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pulinho { 40% { transform: translateY(-8px) scale(1.12); } }
.npc img { animation: respira 2.8s ease-in-out infinite; transform-origin: 50% 100%; }
.npc:nth-child(2n) img { animation-delay: -1.1s; }
.npc:nth-child(3n) img { animation-delay: -.6s; }

/* chefe com aura pulsando */
.carta.chefe, .retrato.chefe { animation: aura 2.2s ease-in-out infinite; }
@keyframes aura { 50% { box-shadow: 0 6px 0 var(--line), 0 0 0 4px rgba(255,92,79,.25), 0 0 28px rgba(255,92,79,.35); } }
.bicho.chefe img { animation: respira 1.6s ease-in-out infinite; }

/* moedas que saltam no ouro e nos cristais */
.moeda { overflow: visible; }
.moeda-pula { position: absolute; left: 50px; top: 46px; width: 22px; height: 22px; pointer-events: none; animation: pula-moeda 1.1s cubic-bezier(.3, .7, .5, 1) forwards; z-index: 2; }
@keyframes pula-moeda {
  0% { transform: translate(0, 0) scale(.6) rotate(0); opacity: 0; }
  15% { opacity: 1; }
  45% { transform: translate(calc(var(--dx) * .6), calc(var(--alt) * -1)) scale(1) rotate(160deg); }
  100% { transform: translate(var(--dx), 30px) scale(.8) rotate(360deg); opacity: 0; }
}

/* trilha das cavernas: puff na escolhida */
.cav.puff { animation: puff .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes puff { 40% { transform: scale(1.08); } }
.cav .piso { transition: transform .3s; }
.cav:hover .piso { transform: scale(1.03); }
.cav[aria-pressed="true"] .piso { animation: piso-anda 6s linear infinite; }
@keyframes piso-anda { to { background-position: 48px 0; } }

/* título do Início: as palavras caem uma a uma */
.heroi h1 .palavra { display: inline-block; animation: cai .7s cubic-bezier(.2, 1.4, .4, 1) backwards; animation-delay: calc(120ms + var(--p, 0) * 70ms); }
@keyframes cai { from { opacity: 0; transform: translateY(-40px) rotate(-6deg); } }
.heroi h1 .laranja .palavra { background: linear-gradient(100deg, var(--bomb) 0 40%, #ffd34a 50%, var(--bomb) 60% 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: cai .7s cubic-bezier(.2, 1.4, .4, 1) backwards, reluz 5s 1.6s ease-in-out infinite; animation-delay: calc(120ms + var(--p, 0) * 70ms), 1.6s; }
.heroi h1 .laranja { text-shadow: none; filter: drop-shadow(0 3px 0 var(--line)); }
@keyframes reluz { 0%, 60% { background-position: 100% 0; } 100% { background-position: -50% 0; } }

/* janela da caçada flutua de leve */
.anima .heroi .janela { animation: flutua-janela 6s ease-in-out infinite; }
@keyframes flutua-janela { 50% { transform: translateY(-6px); } }

/* contadores: brilho quando o número muda */
.contador { transition: transform .2s; }
.contador:hover { transform: translateY(-2px); }
.pisca { position: relative; }

/* botões principais: a bomba "respira" antes de clicar */
.btn:not(.alt) .ic { transition: transform .2s; }
.btn:not(.alt):hover .ic { animation: treme .3s steps(3) infinite; }
@keyframes treme { 33% { transform: translate(1px, -1px) rotate(4deg); } 66% { transform: translate(-1px, 1px) rotate(-4deg); } }

@media (prefers-reduced-motion: reduce) {
  .anima .revela:not(.visto) { opacity: 1; }
}

/* ---------- raridade dos itens (guia) ---------- */
:root {
  --rar-raro: #5fb7ff; --rar-superRaro: #c27bff; --rar-epico: #ff5fd2; --rar-lendario: #ffc23a; --rar-superLendario: #ff6a1a;
}
.raridade {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
  padding: 3px 7px; border-radius: 6px; border: 2px solid var(--line); background: var(--ink3); color: var(--paper);
}
.raridade::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.raridade.raro { background: #16314a; color: var(--rar-raro); }
.raridade.superRaro { background: #2b1a48; color: var(--rar-superRaro); }
.raridade.epico { background: #3e1434; color: var(--rar-epico); }
.raridade.lendario { background: linear-gradient(#5a3e0a, #3a2600); color: var(--rar-lendario); }
.raridade.superLendario { background: linear-gradient(90deg, #4a1200, #6a2a00, #4a1200); color: #ffd7a8; text-shadow: 0 0 6px var(--rar-superLendario); }
.raridade.superLendario::before { background: linear-gradient(90deg, #ff6a1a, #ffd34a, #ff5fd2, #5fb7ff); box-shadow: 0 0 8px #ffa04d; animation: rar-giro 2.4s linear infinite; }
.selo.raridade { padding: 4px 8px; }
.selo.raridade::before { display: none; }
.selo.raridade.raro { background: var(--rar-raro); color: #06203a; }
.selo.raridade.superRaro { background: var(--rar-superRaro); color: #220a3a; }
.selo.raridade.epico { background: var(--rar-epico); color: #3a0628; }
.selo.raridade.lendario { background: linear-gradient(#ffe27a, var(--rar-lendario)); color: #3a2400; }
.selo.raridade.superLendario { background: linear-gradient(90deg, #ff6a1a, #ffd34a, #ff5fd2, #5fb7ff, #ff6a1a); background-size: 300% 100%; color: #2b0500; animation: rar-fluxo 4s linear infinite; }

/* carta e ficha: borda e brilho na cor da raridade */
.carta[data-raridade="raro"] { border-color: var(--rar-raro); }
.carta[data-raridade="superRaro"] { border-color: var(--rar-superRaro); }
.carta[data-raridade="epico"] { border-color: var(--rar-epico); }
.carta[data-raridade="lendario"] { border-color: var(--rar-lendario); box-shadow: 0 0 16px rgba(255, 194, 58, .35); }
.carta[data-raridade="superLendario"] { border-color: var(--rar-superLendario); box-shadow: 0 0 18px rgba(255, 106, 26, .45), 0 0 36px rgba(255, 95, 210, .2); }
.carta[data-raridade="raro"] .carta-arte, .ficha-grande[data-raridade="raro"] .retrato { box-shadow: inset 0 0 22px rgba(95, 183, 255, .35); }
.carta[data-raridade="superRaro"] .carta-arte, .ficha-grande[data-raridade="superRaro"] .retrato { box-shadow: inset 0 0 22px rgba(194, 123, 255, .4); }
.carta[data-raridade="epico"] .carta-arte, .ficha-grande[data-raridade="epico"] .retrato { box-shadow: inset 0 0 24px rgba(255, 95, 210, .4); }
.carta[data-raridade="lendario"] .carta-arte, .ficha-grande[data-raridade="lendario"] .retrato { box-shadow: inset 0 0 26px rgba(255, 194, 58, .5); }
.carta[data-raridade="superLendario"] .carta-arte, .ficha-grande[data-raridade="superLendario"] .retrato { box-shadow: inset 0 0 30px rgba(255, 106, 26, .55); position: relative; overflow: hidden; }
.carta[data-raridade="superLendario"] .carta-arte::after, .ficha-grande[data-raridade="superLendario"] .retrato::after {
  content: ""; position: absolute; inset: -20% auto -20% 0; width: 40%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation: brilho 3.2s ease-in-out infinite;
}
.ficha-grande[data-raridade="lendario"] .titulo { color: var(--rar-lendario); }
.ficha-grande[data-raridade="superLendario"] .titulo { background: linear-gradient(90deg, #ff6a1a, #ffd34a, #ff5fd2, #5fb7ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chips-filtro button[data-raridade="raro"][aria-pressed="true"] { background: var(--rar-raro); color: #06203a; }
.chips-filtro button[data-raridade="superRaro"][aria-pressed="true"] { background: var(--rar-superRaro); color: #220a3a; }
.chips-filtro button[data-raridade="epico"][aria-pressed="true"] { background: var(--rar-epico); color: #3a0628; }
.chips-filtro button[data-raridade="lendario"][aria-pressed="true"] { background: var(--rar-lendario); color: #3a2400; }
.chips-filtro button[data-raridade="superLendario"][aria-pressed="true"] { background: var(--rar-superLendario); color: #2b0500; }
@keyframes rar-giro { to { filter: hue-rotate(360deg); } }
@keyframes rar-fluxo { to { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) {
  .raridade.superLendario::before, .selo.raridade.superLendario, .carta[data-raridade="superLendario"] .carta-arte::after, .ficha-grande[data-raridade="superLendario"] .retrato::after { animation: none; }
}