/* Kodra V1.8 — Fundo MMORPG Anime
   100% CSS: sem PNG/JPG, sem requisições extras. */

:root {
  --world-orange: 255, 116, 24;
  --world-gold: 255, 184, 66;
  --world-blue: 42, 161, 219;
  --world-cyan: 93, 213, 255;
}

html {
  background: #05070b;
}

body {
  position: relative;
  overflow-x: hidden;
  background: #05070b !important;
}

.kodra-world-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% -18%, rgba(35, 48, 65, 0.34), transparent 50%),
    radial-gradient(ellipse at 50% 110%, rgba(17, 29, 43, 0.4), transparent 54%),
    linear-gradient(180deg, #05070b 0%, #070a0f 48%, #05070a 100%);
}

.site-shell {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

/* Vinheta para manter a leitura confortável no centro. */
.kodra-world-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 12;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent 17%, transparent 83%, rgba(0, 0, 0, 0.08)),
    radial-gradient(ellipse at center, transparent 20%, rgba(3, 5, 8, 0.08) 62%, rgba(2, 4, 7, 0.52) 100%);
}

/* Textura de tecido/energia muito leve. */
.kodra-world-bg::after {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: 11;
  opacity: 0.19;
  background-image:
    repeating-linear-gradient(118deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(28deg, rgba(255,255,255,0.009) 0 1px, transparent 1px 34px);
  transform: rotate(-3deg);
}

.world-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(83, 118, 147, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83, 118, 147, 0.028) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
}

.world-aura {
  position: absolute;
  width: min(62vw, 920px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.28;
  mix-blend-mode: screen;
  animation: world-aura-breathe 11s ease-in-out infinite alternate;
}

.world-aura-orange {
  left: -31vw;
  top: 9vh;
  background: radial-gradient(circle,
    rgba(var(--world-orange), 0.34) 0%,
    rgba(var(--world-orange), 0.13) 27%,
    rgba(var(--world-gold), 0.035) 50%,
    transparent 72%);
}

.world-aura-blue {
  right: -29vw;
  top: 16vh;
  background: radial-gradient(circle,
    rgba(var(--world-blue), 0.32) 0%,
    rgba(var(--world-blue), 0.12) 28%,
    rgba(var(--world-cyan), 0.035) 52%,
    transparent 73%);
  animation-delay: -5s;
}

/* Selos shinobi abstratos, criados só com gradientes CSS. */
.world-seal {
  position: absolute;
  z-index: 2;
  width: clamp(280px, 34vw, 540px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.1;
  filter: drop-shadow(0 0 28px currentColor);
  background:
    radial-gradient(circle,
      transparent 0 18%, currentColor 18.3% 18.8%, transparent 19.1% 29%,
      currentColor 29.3% 29.8%, transparent 30.1% 43%,
      currentColor 43.3% 43.8%, transparent 44.1% 59%,
      currentColor 59.3% 59.8%, transparent 60.1%),
    repeating-conic-gradient(from 0deg,
      currentColor 0 1.5deg,
      transparent 1.5deg 30deg);
  mask-image: radial-gradient(circle, #000 0 70%, transparent 71%);
  animation: world-seal-spin 80s linear infinite;
}

.world-seal::before,
.world-seal::after {
  content: "";
  position: absolute;
  inset: 31%;
  border: 1px solid currentColor;
  transform: rotate(45deg);
}

.world-seal::after {
  inset: 39%;
  border-width: 2px;
  border-radius: 50%;
  transform: none;
  box-shadow:
    0 -58px 0 -27px currentColor,
    50px 29px 0 -27px currentColor,
    -50px 29px 0 -27px currentColor;
}

.world-seal-left {
  left: -10vw;
  top: 20vh;
  color: rgb(var(--world-orange));
  transform: rotate(-12deg);
}

.world-seal-right {
  right: -11vw;
  top: 27vh;
  color: rgb(var(--world-blue));
  animation-direction: reverse;
  animation-duration: 95s;
}

.world-smoke {
  position: absolute;
  z-index: 4;
  width: 90vw;
  height: 34vh;
  min-height: 260px;
  opacity: 0.12;
  filter: blur(30px);
  background:
    radial-gradient(ellipse at 12% 55%, rgba(255,255,255,0.14), transparent 25%),
    radial-gradient(ellipse at 35% 42%, rgba(106,132,160,0.13), transparent 30%),
    radial-gradient(ellipse at 62% 61%, rgba(255,255,255,0.10), transparent 27%),
    radial-gradient(ellipse at 84% 39%, rgba(70,103,137,0.13), transparent 28%);
  animation: world-smoke-drift 24s ease-in-out infinite alternate;
}

.world-smoke-one {
  left: -18vw;
  top: 36vh;
}

.world-smoke-two {
  right: -24vw;
  top: 69vh;
  opacity: 0.08;
  transform: scaleX(-1);
  animation-delay: -12s;
}

/* Trilhas de chakra nas laterais. */
.world-energy {
  position: absolute;
  z-index: 5;
  width: 46vw;
  height: 2px;
  opacity: 0.44;
  filter: blur(0.2px) drop-shadow(0 0 10px currentColor);
  background: linear-gradient(90deg, transparent, currentColor 24%, rgba(255,255,255,0.55) 50%, currentColor 75%, transparent);
  transform-origin: center;
  animation: world-energy-flow 8s ease-in-out infinite;
}

.world-energy::after {
  content: "";
  position: absolute;
  left: 45%;
  top: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
}

.world-energy-orange {
  left: -8vw;
  top: 30vh;
  color: rgba(var(--world-orange), 0.7);
  transform: rotate(-19deg);
}

.world-energy-blue {
  right: -9vw;
  top: 57vh;
  color: rgba(var(--world-cyan), 0.66);
  transform: rotate(17deg);
  animation-delay: -4s;
}

/* Partículas bem discretas; não atrapalham os cards. */
.world-particles {
  position: absolute;
  inset: 0;
  z-index: 6;
  opacity: 0.34;
  background-image:
    radial-gradient(circle, rgba(var(--world-gold), .75) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(var(--world-cyan), .7) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(255,255,255,.42) 0 .8px, transparent 1.4px);
  background-size: 173px 211px, 229px 193px, 137px 257px;
  background-position: 15px 28px, 90px 110px, 42px 180px;
  animation: world-particles-rise 28s linear infinite;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 91%, transparent);
}

/* Os painéis ganham uma leve transparência para o cenário respirar. */
.rank-card,
.level-sidebar,
.server-mini-card,
.download-card,
.content-shell:not(.content-shell-plain),
.modern-table,
.ranking-podium .podium-card,
.character-card,
.wiki-category-card,
.hall-podium-card,
.hall-list-card {
  backdrop-filter: blur(8px);
}

/* Linha atmosférica no topo da área principal. */
.page-main {
  position: relative;
}

.page-main::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 10%;
  right: 10%;
  height: 1px;
  z-index: -1;
  opacity: 0.32;
  background: linear-gradient(90deg, transparent, rgba(var(--world-orange), .42), rgba(var(--world-blue), .38), transparent);
  box-shadow: 0 0 18px rgba(var(--world-blue), .09);
}

@keyframes world-aura-breathe {
  0% { transform: scale(.92) translate3d(0, 0, 0); opacity: .2; }
  100% { transform: scale(1.08) translate3d(2vw, -2vh, 0); opacity: .34; }
}

@keyframes world-seal-spin {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

@keyframes world-smoke-drift {
  0% { transform: translate3d(-4vw, 0, 0) scale(1); }
  50% { transform: translate3d(4vw, -2vh, 0) scale(1.06); }
  100% { transform: translate3d(9vw, 1vh, 0) scale(.98); }
}

@keyframes world-energy-flow {
  0%, 100% { opacity: .18; scale: .88 1; }
  50% { opacity: .5; scale: 1.06 1; }
}

@keyframes world-particles-rise {
  from { background-position: 15px 28px, 90px 110px, 42px 180px; }
  to { background-position: 15px -394px, 90px -276px, 42px -334px; }
}

@media (max-width: 900px) {
  .world-seal {
    width: 330px;
    opacity: .075;
  }

  .world-aura {
    width: 760px;
  }

  .world-energy {
    width: 70vw;
    opacity: .28;
  }
}

@media (max-width: 620px) {
  .world-grid {
    opacity: .1;
    background-size: 54px 54px;
  }

  .world-seal-left {
    left: -190px;
  }

  .world-seal-right {
    right: -200px;
  }

  .world-smoke {
    opacity: .07;
  }

  .world-particles {
    opacity: .22;
  }
}

@media (prefers-reduced-motion: reduce) {
  .world-aura,
  .world-seal,
  .world-smoke,
  .world-energy,
  .world-particles {
    animation: none !important;
  }
}