/*
 * visual.css — PayatGamer
 * Extensão visual alinhada ao login aprovado.
 * Carregado APÓS o app.css, só adiciona — não quebra nada.
 */

/* ── FUNDO COM NEBULOSA ── */
[data-theme="dark"] body {
  background:
    radial-gradient(ellipse 55% 38% at 12% 18%, rgba(45,15,110,.2) 0%, transparent 58%),
    radial-gradient(ellipse 45% 32% at 88% 78%, rgba(0,212,255,.07) 0%, transparent 52%),
    radial-gradient(ellipse 35% 28% at 58% 92%, rgba(255,45,85,.05) 0%, transparent 48%),
    #04040c;
}

/* ── PARTÍCULAS — canvas já existente ── */
#pg-canvas { opacity: .38 }

/* ── NAV — linha inferior mais viva ── */
.nav::after {
  background: linear-gradient(90deg,
    transparent 0%, var(--p) 15%, var(--cyan,#00d4ff) 35%,
    var(--y) 50%, var(--cyan,#00d4ff) 65%, var(--p) 85%, transparent 100%) !important;
  opacity: .6 !important;
  filter: blur(.3px) !important;
}

/* ── HERO — reforço visual por estilo ── */

/* Portal: glow central mais intenso */
[data-theme="dark"] .hero-style-portal .hero-dynamic-bg {
  background: radial-gradient(ellipse 70% 55% at 50% 45%,
    rgba(60,0,120,.7) 0%, rgba(10,0,25,.92) 55%, #04040c 100%);
}

/* HUD: grid levemente mais visível com cor roxa */
[data-theme="dark"] .hero-style-hud .hero-grid {
  background-image:
    linear-gradient(rgba(145,70,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(145,70,255,.055) 1px, transparent 1px) !important;
}

/* Glitch: fundo ultra-escuro para o efeito contrastar */
[data-theme="dark"] .hero-style-glitch {
  background: #030305 !important;
}

/* Cosmic: nebulosa de fundo */
[data-theme="dark"] .hero-style-cosmic .hero-dynamic-bg {
  background: radial-gradient(ellipse 65% 50% at 50% 45%,
    rgba(45,15,110,.5) 0%, rgba(10,0,25,.9) 55%, #04040c 100%);
}

/* ── BOTÕES — shimmer igual ao login ── */
.btn-y, .btn-p, .sort-btn-participate, .pod-play, .btn-vote {
  position: relative;
  overflow: hidden;
}
.btn-y::after, .btn-p::after,
.sort-btn-participate::after, .pod-play::after, .btn-vote::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: translateX(-100%);
  transition: transform .55s ease;
  pointer-events: none;
}
.btn-y:hover::after, .btn-p:hover::after,
.sort-btn-participate:hover::after,
.pod-play:hover::after, .btn-vote:hover::after {
  transform: translateX(100%);
}

/* ── INPUTS — foco luminoso igual ao login ── */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus, select:focus {
  border-color: var(--p) !important;
  box-shadow: 0 0 0 3px rgba(145,70,255,.14), 0 0 18px rgba(145,70,255,.06) !important;
  outline: none !important;
}
[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="password"]:focus,
[data-theme="dark"] textarea:focus {
  background: rgba(145,70,255,.05) !important;
}

/* ── SEC-ALT — barra lateral animada ── */
.sec-alt::before {
  background: linear-gradient(180deg, var(--y), var(--p), var(--cyan,#00d4ff), var(--p), var(--y));
  background-size: 100% 300%;
  animation: secBarAnim 6s ease-in-out infinite;
  opacity: .7;
}
@keyframes secBarAnim {
  0%,100% { background-position: 0% 0% }
  50%     { background-position: 0% 100% }
}

/* ── CARDS — glow sutil no hover ── */
.vid-card:hover,
.pod-card:hover,
.nl-card:hover,
.psi-card:hover,
.rv:hover {
  box-shadow:
    0 18px 50px rgba(0,0,0,.42),
    0 0 0 1px rgba(145,70,255,.14) !important;
}
.sort-card:hover {
  box-shadow:
    0 20px 60px rgba(0,0,0,.5),
    0 0 40px rgba(255,215,0,.06),
    0 0 0 1px rgba(145,70,255,.1) !important;
}

/* ── RANKING — glow por medalha ── */
.rank-card.rank-pos-1 { box-shadow: 0 0 22px rgba(255,215,0,.14) !important }
.rank-card.rank-pos-2 { box-shadow: 0 0 16px rgba(192,192,192,.1) !important }
.rank-card.rank-pos-3 { box-shadow: 0 0 16px rgba(205,127,50,.1)  !important }

/* ── SCROLLBAR ROXA ── */
::-webkit-scrollbar-thumb          { background: var(--p) }
::-webkit-scrollbar-thumb:hover    { background: var(--p2) }

/* ── FAB ── */
.fab-top { box-shadow: 0 4px 18px rgba(255,215,0,.28), 0 0 0 1px rgba(255,215,0,.1) }
.fab-top:hover { box-shadow: 0 8px 30px rgba(255,215,0,.45), 0 0 0 1px rgba(255,215,0,.2) }

/* ── LIVE DOT ── */
.live-dot, .sc-dot {
  animation: livePulse 1.2s ease-in-out infinite !important;
}
@keyframes livePulse {
  0%,100% { transform: scale(1);   opacity: 1 }
  50%     { transform: scale(1.5); opacity: .55 }
}

/* ── POLL BOX — profundidade ── */
[data-theme="dark"] .poll-box {
  background: linear-gradient(180deg, rgba(45,15,110,.07) 0%, transparent 40%), var(--card);
  border-color: rgba(145,70,255,.2);
  box-shadow: 0 0 28px rgba(145,70,255,.06);
}

/* ── FLASH — borda lateral colorida ── */
.flash { border-left: 3px solid currentColor !important }

/* ── TRANSIÇÃO SUAVE DE TEMA ── */
body, .nav, .card, .sort-card, .vid-card, .pod-card,
.rv, .nl-card, .psi-card, .sc, .rank-card, .poll-box {
  transition:
    background-color .28s ease,
    border-color .28s ease,
    color .28s ease !important;
}
/* Não transicionar transform (quebraria animações) */
.sort-card, .vid-card, .psi-card, .nl-card, .rv {
  transition:
    background-color .28s ease,
    border-color .28s ease,
    color .28s ease,
    transform .3s var(--ease-out, cubic-bezier(.22,1,.36,1)),
    box-shadow .3s !important;
}