/* Neon de raridade (direção do usuário de 19/10, DESIGN.md seção 1b): cada nível tem identidade
   neon própria e crescente. Carta: Raro < Épico < Lendário < Mítico. Aura: Rara ... Celestial,
   Secreta. Rank: C ... SS. Animações só por CSS; prefers-reduced-motion desliga tudo (01-base). */

@property --neon-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes neon-spin {
  to { --neon-angle: 360deg; }
}

@keyframes neon-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes neon-sweep {
  0% { transform: translateX(-120%) skewX(-20deg); }
  60%, 100% { transform: translateX(220%) skewX(-20deg); }
}

@keyframes matrix-rain {
  to { background-position: 0 48px; }
}

@keyframes glitch-shift {
  0%, 86%, 100% { text-shadow: 0 0 6px var(--r-secret); transform: none; }
  88% { text-shadow: -2px 0 #ff2bd6, 2px 0 #00f0ff; transform: translateX(1px); }
  91% { text-shadow: 2px 0 #ff2bd6, -2px 0 #00f0ff; transform: translateX(-1px); }
  94% { text-shadow: 0 0 6px var(--r-secret); transform: none; }
}

/* Fundo: escuro, mas com cor (violeta no alto, ciano embaixo), para não ficar preto e branco. */
body {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(140, 82, 255, 0.16), transparent 60%),
    radial-gradient(900px 600px at 110% 110%, rgba(0, 200, 255, 0.12), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

.lobby-header,
#top-hud,
#bottom-hud {
  background: linear-gradient(90deg, rgba(140, 82, 255, 0.14), rgba(22, 25, 32, 0.92) 40%, rgba(0, 200, 255, 0.10));
}

/* Cabeçalho do lobby com base opaca: o fundo do mundo da aba Batalha não passa por ele. */
.lobby-header {
  background-color: var(--bg);
}

.briefing,
.forge-altar,
.summon-rates,
.panel {
  background: linear-gradient(160deg, color-mix(in srgb, var(--panel-tint, #8c52ff) 14%, var(--surface-1)), var(--surface-1) 55%);
  border-color: color-mix(in srgb, var(--panel-tint, #8c52ff) 35%, var(--line));
}

.forge-altar { --panel-tint: var(--aura, #c77dff); }
.forge-auras-card { --panel-tint: #ff9cf2; }
.summon-rates { --panel-tint: #5aa9ff; }
.modal-card {
  background: linear-gradient(170deg, color-mix(in srgb, var(--panel-tint, #8c52ff) 12%, var(--surface-1)), var(--surface-1) 45%);
}

/* Cartas: moldura e fundo na cor da raridade; o brilho cresce com o nível. */
.inventory-card,
.catalog-card,
.summon-card-item,
.team-slot-card:not(.empty),
.hero-slot {
  border-color: color-mix(in srgb, var(--rarity) 55%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--rarity) 13%, var(--surface-1)), var(--surface-1) 62%);
}

.inventory-card.rarity-rare,
.catalog-card.rarity-rare,
.summon-card-item.rarity-rare,
.team-slot-card.rarity-rare,
.hero-slot.rarity-rare {
  box-shadow: 0 0 10px -2px color-mix(in srgb, var(--rarity) 45%, transparent);
}

.inventory-card.rarity-epic,
.catalog-card.rarity-epic,
.summon-card-item.rarity-epic,
.team-slot-card.rarity-epic,
.hero-slot.rarity-epic {
  box-shadow:
    0 0 8px -1px color-mix(in srgb, var(--rarity) 60%, transparent),
    0 0 22px -4px color-mix(in srgb, var(--rarity) 40%, transparent);
}

.inventory-card.rarity-legendary,
.catalog-card.rarity-legendary,
.summon-card-item.rarity-legendary,
.team-slot-card.rarity-legendary,
.hero-slot.rarity-legendary {
  border-color: color-mix(in srgb, var(--rarity) 85%, var(--line));
  box-shadow:
    0 0 6px var(--rarity),
    0 0 18px -2px color-mix(in srgb, var(--rarity) 60%, transparent),
    0 0 36px -8px color-mix(in srgb, var(--rarity) 45%, transparent);
}

/* Mítico: moldura cônica girando, além do brilho em camadas. */
.inventory-card.rarity-mythic,
.catalog-card.rarity-mythic,
.summon-card-item.rarity-mythic,
.team-slot-card.rarity-mythic,
.hero-slot.rarity-mythic {
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rarity) 16%, var(--surface-1)), var(--surface-1) 62%) padding-box,
    conic-gradient(from var(--neon-angle), var(--rarity), #ffd1e0 12%, var(--rarity) 25%, #8c52ff 50%, var(--rarity) 75%, #ffd1e0 88%, var(--rarity)) border-box;
  box-shadow:
    0 0 8px var(--rarity),
    0 0 24px -2px color-mix(in srgb, var(--rarity) 65%, transparent),
    0 0 48px -10px color-mix(in srgb, var(--rarity) 55%, transparent);
  animation: neon-spin 4s linear infinite;
}

/* Celestial (v0.74): moldura cônica ciano e rosa, mais rápida que a do Mítico, com brilho mais forte. */
.inventory-card.rarity-celestial,
.catalog-card.rarity-celestial,
.summon-card-item.rarity-celestial,
.team-slot-card.rarity-celestial,
.hero-slot.rarity-celestial {
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rarity) 18%, var(--surface-1)), var(--surface-1) 62%) padding-box,
    conic-gradient(from var(--neon-angle), var(--r-celestial), #ffffff 10%, var(--r-celestial-2) 28%, var(--r-celestial) 50%, #ffffff 62%, var(--r-celestial-2) 80%, var(--r-celestial)) border-box;
  box-shadow:
    0 0 10px var(--r-celestial),
    0 0 28px -2px color-mix(in srgb, var(--r-celestial-2) 60%, transparent),
    0 0 56px -10px color-mix(in srgb, var(--r-celestial) 55%, transparent);
  animation: neon-spin 3s linear infinite;
}

/* Desperto (v0.100): moldura cônica Brasa (laranja, branco quente e vermelho de forja), mais rápida que a do Celestial, com um
   miolo que brilha de dentro e respira. */
.inventory-card.rarity-awakened,
.catalog-card.rarity-awakened,
.summon-card-item.rarity-awakened,
.team-slot-card.rarity-awakened,
.hero-slot.rarity-awakened {
  border: 2px solid transparent;
  background:
    radial-gradient(ellipse 80% 55% at 50% 42%, color-mix(in srgb, var(--r-awakened) 30%, transparent), transparent 70%) padding-box,
    linear-gradient(180deg, color-mix(in srgb, var(--r-awakened-3) 30%, var(--surface-1)), var(--surface-1) 66%) padding-box,
    conic-gradient(from var(--neon-angle), var(--r-awakened), var(--r-awakened-2) 8%, var(--r-awakened) 20%, var(--r-awakened-3) 38%, var(--r-awakened) 50%, var(--r-awakened-2) 58%, var(--r-awakened) 70%, var(--r-awakened-3) 88%, var(--r-awakened)) border-box;
  box-shadow:
    0 0 10px var(--r-awakened),
    0 0 30px -2px color-mix(in srgb, var(--r-awakened-3) 70%, transparent),
    0 0 60px -8px color-mix(in srgb, var(--r-awakened) 60%, transparent);
  animation: neon-spin 2.4s linear infinite, awakened-breathe 1.8s ease-in-out infinite;
}

@keyframes awakened-breathe {
  50% { filter: brightness(1.2); }
}

/* Brilho que atravessa a carta (Lendário, Mítico e Celestial). */
.inventory-card.rarity-legendary::after,
.inventory-card.rarity-mythic::after,
.inventory-card.rarity-celestial::after,
.inventory-card.rarity-awakened::after,
.catalog-card.rarity-legendary::after,
.catalog-card.rarity-mythic::after,
.catalog-card.rarity-celestial::after,
.catalog-card.rarity-awakened::after,
.summon-card-item.rarity-legendary::after,
.summon-card-item.rarity-mythic::after,
.summon-card-item.rarity-celestial::after,
.summon-card-item.rarity-awakened::after {
  content: '';
  position: absolute;
  inset: -20% auto -20% 0;
  width: 35%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rarity) 22%, rgba(255, 255, 255, 0.18)), transparent);
  pointer-events: none;
  animation: neon-sweep 5s ease-in-out infinite;
}

.inventory-card.rarity-mythic::after,
.catalog-card.rarity-mythic::after,
.summon-card-item.rarity-mythic::after,
.inventory-card.rarity-celestial::after,
.catalog-card.rarity-celestial::after,
.summon-card-item.rarity-celestial::after,
.inventory-card.rarity-awakened::after,
.catalog-card.rarity-awakened::after,
.summon-card-item.rarity-awakened::after {
  animation-duration: 3.2s;
}

.inventory-card::before,
.catalog-card::before,
.summon-card-item::before,
.team-slot-card::before,
.hero-slot::before {
  height: 3px;
  box-shadow: 0 0 8px var(--rarity);
}

.rarity-label {
  text-shadow: 0 0 8px color-mix(in srgb, var(--rarity) 70%, transparent);
}

.catalog-card.locked {
  box-shadow: none;
  background: var(--surface-1);
}

.catalog-card.locked::after {
  display: none;
}

/* Retrato: a borda representa só a aura (v0.28). Sem aura, borda neutra fina; com aura, borda e
   brilho na cor da raridade da aura (a mesma da etiqueta), intensidade crescente. */
.portrait,
.mini-portrait,
.inspect-portrait,
.unit-portrait,
.forge-pedestal-card-slot .portrait {
  border: 1px solid var(--line);
  box-shadow: none;
}

/* Aura na carta: halo no retrato, intensidade pela raridade da aura. */
.has-aura .portrait,
.has-aura .mini-portrait,
.has-aura.inspect-portrait,
.has-aura .unit-portrait {
  border: 2px solid var(--aura);
  box-shadow: 0 0 8px color-mix(in srgb, var(--aura) 70%, transparent);
}

.aura-epic .portrait,
.aura-epic .mini-portrait,
.aura-epic.inspect-portrait {
  box-shadow:
    0 0 6px var(--aura),
    0 0 18px -2px color-mix(in srgb, var(--aura) 60%, transparent);
}

.aura-legendary .portrait,
.aura-legendary .mini-portrait,
.aura-legendary.inspect-portrait {
  box-shadow:
    0 0 6px var(--aura),
    0 0 16px var(--aura),
    0 0 34px -6px var(--aura);
  animation: aura-breathe 2.4s ease-in-out infinite;
}

@keyframes aura-breathe {
  0%, 100% { border-color: var(--aura); }
  50% { border-color: #ffffff; }
}

/* Mítica, Celestial e Secreta: moldura cônica girando (o retrato fica por cima, padding-box). */
.aura-mythic .portrait,
.aura-mythic .mini-portrait,
.aura-mythic.inspect-portrait,
.aura-celestial .portrait,
.aura-celestial .mini-portrait,
.aura-celestial.inspect-portrait {
  border: 3px solid transparent;
  background:
    linear-gradient(var(--surface-3), var(--surface-3)) padding-box,
    conic-gradient(from var(--neon-angle), var(--aura), #ffffff 10%, var(--aura) 22%, transparent 35%, var(--aura) 50%, #ffffff 60%, var(--aura) 72%, transparent 85%, var(--aura)) border-box;
  box-shadow:
    0 0 10px var(--aura),
    0 0 28px -2px var(--aura),
    0 0 52px -10px var(--aura);
  animation: neon-spin 3s linear infinite;
}

.aura-celestial .portrait,
.aura-celestial .mini-portrait,
.aura-celestial.inspect-portrait {
  background:
    linear-gradient(var(--surface-3), var(--surface-3)) padding-box,
    conic-gradient(from var(--neon-angle), #8ef4ff, #ff9cf2, #ffd76a, #9cffb8, #8ef4ff, #c9a2ff, #ff9cf2, #8ef4ff) border-box;
  box-shadow:
    0 0 10px #ff9cf2,
    0 0 26px -2px #8ef4ff,
    0 0 60px -8px var(--aura);
  animation-duration: 2.2s;
}

/* Secreta (Hacker): verde matriz, chuva de linhas e falha de sinal. */
.aura-secret .portrait,
.aura-secret .mini-portrait,
.aura-secret.inspect-portrait {
  border: 2px solid var(--r-secret);
  box-shadow:
    0 0 8px var(--r-secret),
    0 0 24px -2px var(--r-secret),
    inset 0 0 18px rgba(87, 255, 154, 0.35);
}

.aura-secret .portrait::after,
.aura-secret .mini-portrait::after,
.aura-secret.inspect-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(87, 255, 154, 0.22) 0 2px, transparent 2px 6px);
  mix-blend-mode: screen;
  animation: matrix-rain 1.2s linear infinite;
}

.aura-tag.rarity-secret {
  font-family: 'Courier New', monospace;
  color: var(--r-secret);
  border-color: var(--r-secret);
  background: rgba(87, 255, 154, 0.08);
  animation: glitch-shift 2.6s steps(1) infinite;
}

/* Etiqueta de aura: cor da aura, brilho pela raridade. */
.aura-tag[class*='rarity-'] {
  background: color-mix(in srgb, var(--rarity) 12%, transparent);
  text-shadow: 0 0 6px color-mix(in srgb, var(--rarity) 80%, transparent);
}

.aura-tag.rarity-legendary,
.aura-tag.rarity-mythic {
  box-shadow: 0 0 10px -2px var(--rarity);
}

.aura-tag.rarity-celestial {
  color: #ffffff;
  border: 1px solid transparent;
  border-image: none;
  background:
    linear-gradient(90deg, rgba(40, 20, 60, 0.85), rgba(20, 40, 60, 0.85)) padding-box,
    linear-gradient(90deg, #8ef4ff, #ff9cf2, #ffd76a, #8ef4ff) border-box;
  text-shadow: 0 0 6px #ff9cf2, 0 0 12px #8ef4ff;
  box-shadow: 0 0 12px -2px #ff9cf2;
}

/* Ranks: C cinza a SS ciano celestial. S, S+ e SS preenchidos e com brilho; SS animado. */
.rank {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  padding: 0 5px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--rank) 70%, transparent);
  background: color-mix(in srgb, var(--rank) 14%, transparent);
  color: var(--rank);
  text-shadow: 0 0 6px color-mix(in srgb, var(--rank) 60%, transparent);
  line-height: 1.35;
}

.rank.rank-c { --rank: #9aa8b8; }
.rank.rank-cplus { --rank: #b4bfcc; }
.rank.rank-b { --rank: #2ed573; }
.rank.rank-bplus { --rank: #3fa2ff; }
.rank.rank-a { --rank: #b98aff; }
.rank.rank-aplus { --rank: #cf6bff; }
.rank.rank-s { --rank: #ffb020; }
.rank.rank-splus { --rank: #ff4d6a; }
.rank.rank-ss { --rank: #00e5ff; }

.rank.rank-s,
.rank.rank-splus {
  background: var(--rank);
  border-color: var(--rank);
  color: #0e1015;
  text-shadow: none;
  box-shadow: 0 0 8px var(--rank), 0 0 18px -4px var(--rank);
}

.rank.rank-ss {
  background: linear-gradient(110deg, #00e5ff, #b7fbff 25%, #b49cff 50%, #00e5ff 75%, #b7fbff);
  background-size: 200% 100%;
  border-color: #b7fbff;
  color: #0e1015;
  text-shadow: none;
  box-shadow: 0 0 8px #00e5ff, 0 0 20px -2px #00e5ff, 0 0 34px -8px #8c52ff;
  animation: ss-shine 2.4s linear infinite;
}

@keyframes ss-shine {
  to { background-position: -200% 0; }
}

.rank-cell:has(.rank-ss) {
  background: linear-gradient(160deg, rgba(0, 229, 255, 0.16), var(--surface-2));
  box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.45);
}

.rank-cell:has(.rank-splus) {
  background: linear-gradient(160deg, rgba(255, 77, 106, 0.14), var(--surface-2));
}

.rank-cell:has(.rank-s) {
  background: linear-gradient(160deg, rgba(255, 176, 32, 0.12), var(--surface-2));
}

/* Códex e barras de chance: cada raridade com o próprio brilho. */
.codex-rarity-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--rarity) 12%, var(--surface-1)), var(--surface-1) 70%);
  border-color: color-mix(in srgb, var(--rarity) 45%, var(--line));
  box-shadow: 0 0 14px -6px var(--rarity);
}

.codex-rarity-card.rarity-celestial {
  --rarity: #ff9cf2;
  box-shadow: 0 0 18px -4px #ff9cf2, 0 0 30px -10px #8ef4ff;
}

.codex-rarity-card.rarity-secret {
  background:
    repeating-linear-gradient(180deg, rgba(87, 255, 154, 0.06) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, rgba(87, 255, 154, 0.12), var(--surface-1) 70%);
  box-shadow: 0 0 18px -4px var(--r-secret);
}

.rate-bar span {
  box-shadow: 0 0 8px var(--rarity);
}

/* Universo em foco (continua valendo): mais saturado e com brilho. */
.stage-card.active {
  box-shadow: inset 0 0 0 1px var(--universe), 0 0 18px -4px var(--universe);
  background: linear-gradient(160deg, color-mix(in srgb, var(--universe) 26%, var(--surface-1)), color-mix(in srgb, var(--universe) 8%, var(--surface-1)));
}

.mode-select-card.active {
  background: linear-gradient(160deg, rgba(140, 82, 255, 0.18), var(--surface-2));
}

@media (prefers-reduced-motion: reduce) {
  .rank.rank-ss,
  .aura-tag.rarity-secret,
  [class*='rarity-']::after,
  .has-aura .portrait,
  .has-aura .mini-portrait,
  .has-aura.inspect-portrait {
    animation: none !important;
  }
}