/* Base do site PokeRoyale: paleta do gen_brand.py (Client/tools) + peças comuns.
   O site é escuro por identidade (o mesmo marinho do login e do splash). */
:root {
  --navy: #090c18;
  --navy-2: #101632;
  --roxo-noite: #140f2c;
  --painel: #0d0d13;
  --anel: #343854;
  --lenda: #1abc9c;
  --lenda-escuro: #0e6e5b;
  --lilas: #c6b4ff;
  --vermelho: #e8383d;
  --branco: #f4f4f6;
  --branco-s: #bec2d0;
  --texto-fraco: #8a8fa8;

  --fonte: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --borda: 2px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--navy);
  color: var(--branco);
  font-family: var(--fonte);
  line-height: 1.5;
}

a { color: var(--lilas); }

img.px { image-rendering: pixelated; image-rendering: crisp-edges; }

/* fundo do login: marinho, verde-água no meio, pokébola gigante em linha fina,
   vinheta. Sem imagem: tudo gradiente + SVG em linha. */
.fundo {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 52%, rgba(26, 188, 156, .16), transparent 70%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 60%, var(--roxo-noite) 100%);
}
.fundo::after { /* vinheta */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 55%, rgba(4, 6, 12, .75) 100%);
}
.fundo svg.bola {
  position: absolute; left: 50%; top: 52%;
  width: min(110vh, 96vw); aspect-ratio: 1; transform: translate(-50%, -50%);
  opacity: .22; stroke: var(--lenda); fill: none;
}
.fundo .bokeh {
  position: absolute; border-radius: 50%; filter: blur(1px);
  background: currentColor; opacity: .25;
}

/* botões em estilo pixel: borda dura + sombra dura, sem raio */
.btn {
  --cor: var(--lenda); --tinta: #04130f; --sombra: var(--lenda-escuro);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 0 22px;
  font: 700 1rem/1 var(--fonte); letter-spacing: .02em; text-decoration: none;
  color: var(--tinta); background: var(--cor);
  border: var(--borda) solid var(--painel);
  box-shadow: 0 4px 0 var(--sombra), 0 4px 0 2px var(--painel);
  transition: transform .08s, box-shadow .08s, filter .15s;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sombra), 0 1px 0 2px var(--painel); }
.btn:focus-visible { outline: 3px solid var(--lilas); outline-offset: 4px; }
.btn.grande { min-height: 60px; padding: 0 30px; font-size: 1.15rem; }

.btn.sec {
  --cor: rgba(13, 13, 19, .6); --tinta: var(--branco); --sombra: var(--anel);
  border-color: var(--anel);
}
.btn[aria-disabled="true"] {
  --cor: rgba(13, 13, 19, .45); --tinta: var(--texto-fraco); --sombra: #1c1f30;
  border-color: #23263a; cursor: default; filter: none; transform: none;
}
.btn .tag {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 6px; background: var(--anel); color: var(--branco-s);
}

/* selo de servidor */
.selo {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .9rem; color: var(--branco-s);
}
.selo i {
  width: 10px; height: 10px; background: var(--lenda);
  box-shadow: 0 0 0 2px var(--painel), 0 0 10px var(--lenda);
}
.selo[hidden] { display: none; }

/* runas em órbita (runas.js). Cada runa é 15x17 nativa, ampliada por inteiro. */
.orbita { position: absolute; inset: 0; pointer-events: none; }
.orbita .runa {
  position: absolute; left: 0; top: 0; will-change: transform, opacity;
}
.orbita .runa img { display: block; width: calc(15px * var(--kr, 3)); height: calc(17px * var(--kr, 3)); }
.orbita .runa .brilho {
  position: absolute; left: 50%; top: 50%;
  width: calc(15px * var(--kr, 3) * 3); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: var(--cor);
  -webkit-mask: url(../img/rune_glow.png) center / contain no-repeat;
          mask: url(../img/rune_glow.png) center / contain no-repeat;
  opacity: .55;
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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