/* Identidade visual do AuraIDLE: tokens e componentes da vitrine e das telas de entrada.
   Marca e ação em laranja-brasa; o dourado metálico (--shiny-*) é só do Shiny e do Lendário. */
@font-face{font-family:Cinzel;font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/cinzel-var-latin.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}
@font-face{font-family:Saira Semi Condensed;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/saira-semi-condensed-500-latin.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}
@font-face{font-family:Saira Semi Condensed;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/saira-semi-condensed-700-latin.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}

:root {
  --fundo: #0d0f1a;
  --painel: #1a1d33;
  --painel-2: #242844;
  --borda: #2a2e4a;
  --texto: #f3ecd2;
  --texto-suave: #b9b5a0;
  --acao-a: #d9360f;
  --acao-b: #e8600c;
  --vida: #e0485a;
  --sistema: #2fd8f0;
  --raridade-comum: #aab2c0;
  --raridade-great: #2f7de1;
  --raridade-ultra: #f2c11b;
  --raridade-master: #9b4de0;
  --shiny-1: #8f6a00;
  --shiny-2: #ffd84a;
  --shiny-3: #fff6c0;
  --shiny-4: #c99a12;
  --fonte-titulo: Cinzel, Georgia, serif;
  --fonte-texto: 'Saira Semi Condensed', system-ui, sans-serif;
}

.botao-acao {
  display: inline-block;
  padding: 12px 26px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--acao-a), var(--acao-b));
  color: #fff;
  font: 700 16px var(--fonte-texto);
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 22px #ff7a1a40;
  transition: transform 0.15s, filter 0.15s;
}
.botao-acao:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}
.botao-acao:focus-visible {
  outline: 3px solid var(--sistema);
  outline-offset: 3px;
}

.cartao {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 12px;
  overflow: hidden;
}

.selo-raridade {
  display: inline-block;
  padding: 2px 10px;
  border: 1.5px solid var(--raridade-comum);
  border-radius: 999px;
  color: var(--raridade-comum);
  font: 700 11px var(--fonte-texto);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.selo-raridade[data-nivel='bom'] {
  border-color: var(--raridade-great);
  color: var(--raridade-great);
}
.selo-raridade[data-nivel='raro'] {
  border-color: var(--raridade-ultra);
  color: var(--raridade-ultra);
}
.selo-raridade[data-nivel='perfeito'] {
  border-color: var(--raridade-master);
  color: var(--raridade-master);
  box-shadow: 0 0 12px #9b4de088;
}
.selo-raridade[data-nivel='shiny'] {
  border-color: var(--shiny-2);
  color: var(--shiny-3);
  box-shadow: 0 0 14px #ffd84a66;
}

.shiny-borda {
  border: 2px solid transparent;
  background-image: linear-gradient(var(--painel), var(--painel)),
    linear-gradient(120deg, var(--shiny-1), var(--shiny-2) 35%, var(--shiny-3) 50%, var(--shiny-4) 70%, var(--shiny-1));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 250% 100%;
  animation: shiny-brilho 3.5s linear infinite;
}
@keyframes shiny-brilho {
  to {
    background-position: 0 0, 250% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shiny-borda {
    animation: none;
  }
  .botao-acao {
    transition: none;
  }
}