/* ============================================================
   MAIS GAMES — STREAMER BOOST
   Camada adicional de estilo: mais vibração, glow e animação
   em cima do design original (não substitui, apenas reforça).
   ============================================================ */

:root{
  --mg-cyan: var(--cyan, #55d8ff);
  --mg-pink: var(--pink, #ff4c9b);
  --mg-acid: var(--acid, #c8ff36);
}

/* -------- scrollbar com a cara do site -------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#07090d; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--mg-pink), var(--mg-cyan));
  border-radius:8px;
  border:2px solid #07090d;
}
html{ scrollbar-color: var(--mg-pink) #07090d; }

/* -------- topbar / marca com brilho pulsante -------- */
.topbar .brandImage{
  filter: drop-shadow(0 0 0 rgba(85,216,255,0));
  animation: mgBrandGlow 3.2s ease-in-out infinite;
}
@keyframes mgBrandGlow{
  0%,100%{ filter: drop-shadow(0 0 6px rgba(85,216,255,.35)); }
  50%{ filter: drop-shadow(0 0 16px rgba(255,76,155,.55)); }
}

.brandWord{
  background: linear-gradient(90deg, var(--mg-cyan), var(--mg-pink), var(--mg-acid), var(--mg-cyan));
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: mgGradientShift 6s linear infinite;
}
@keyframes mgGradientShift{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 300% 50%; }
}

.topbar nav button:after{
  height:2px !important;
  background: linear-gradient(90deg, var(--mg-cyan), var(--mg-pink)) !important;
  box-shadow: 0 0 10px var(--mg-cyan);
}

/* -------- hero: título com glow neon -------- */
.heroTitle strong{
  text-shadow: 0 0 18px rgba(255,76,155,.35), 0 0 42px rgba(85,216,255,.18);
}
.heroTitle strong:after{
  animation: mgUnderlineGrow 2.6s ease-in-out infinite alternate;
  box-shadow: 0 0 18px rgba(255,76,155,.65);
}
@keyframes mgUnderlineGrow{
  0%{ width:22%; opacity:.75; }
  100%{ width:34%; opacity:1; }
}

.eyebrow span{
  box-shadow: 0 0 12px var(--mg-pink);
  animation: mgPing 1.8s ease-in-out infinite;
}
@keyframes mgPing{
  0%,100%{ transform:scaleX(1); opacity:1; }
  50%{ transform:scaleX(1.6); opacity:.6; }
}

/* -------- botões: brilho e efeito de "energia" -------- */
.primary,.ghost{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.primary:before,.ghost:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .6s ease;
}
.primary:hover:before,.ghost:hover:before{
  transform:translateX(120%);
}
.primary:hover{
  box-shadow: 0 0 24px rgba(85,216,255,.65), 0 10px 30px rgba(85,216,255,.25);
}
.ghost:hover{
  box-shadow: 0 0 20px rgba(255,76,155,.45);
}

/* -------- player card: aura giratória neon -------- */
.playerCard{
  position:relative;
}
.playerCard.online{
  animation: cardFloat 7s ease-in-out infinite, mgAuraPulse 3.4s ease-in-out infinite;
}
@keyframes mgAuraPulse{
  0%,100%{ box-shadow:0 35px 90px rgba(0,0,0,.48), 0 0 34px rgba(255,76,155,.14); }
  50%{ box-shadow:0 35px 90px rgba(0,0,0,.48), 0 0 55px rgba(85,216,255,.35); }
}
.playerCard.online:before{
  background-size:200% 100%;
  animation: mgGradientShift 3.5s linear infinite;
}

.pulseDot.online{
  box-shadow: 0 0 0 5px rgba(255,76,155,.24), 0 0 26px rgba(255,76,155,.85);
}

.liveRibbon{
  animation: mgLiveFlicker 2.4s ease-in-out infinite;
}
@keyframes mgLiveFlicker{
  0%,19%,21%,54%,56%,100%{ filter:none; }
  20%,55%{ filter:brightness(1.3); }
}

/* -------- ticker: passe de luz -------- */
.tickerRail{
  position:relative;
}
.ticker span{
  text-shadow: 0 0 12px rgba(85,216,255,.35);
}

/* -------- seções: títulos com destaque -------- */
.sectionHead h2,.aboutIntro h2{
  background:linear-gradient(100deg, var(--paper) 40%, var(--mg-cyan) 55%, var(--paper) 70%);
  background-size:250% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: mgHeadlineSheen 5s ease-in-out infinite;
}
@keyframes mgHeadlineSheen{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}

/* -------- cards de vídeo: hover mais vivo -------- */
.videoCard>button{
  transition: box-shadow .35s ease, transform .35s ease;
}
.videoCard>button:hover{
  box-shadow: 0 18px 45px rgba(85,216,255,.22);
  transform: translateY(-4px);
}
.cardPlay{
  transition: all .25s ease, box-shadow .25s ease;
}
.videoCard>button:hover .cardPlay{
  box-shadow: 0 0 22px rgba(255,255,255,.75);
  transform: translate(-50%,-50%) scale(1.12);
}
.cardCopy span{
  text-shadow: 0 0 10px rgba(85,216,255,.4);
}

/* -------- setup cards: borda com energia -------- */
.setupCard{
  position:relative;
}
.setupCard:hover{
  box-shadow: 0 20px 50px rgba(85,216,255,.18), inset 0 0 0 1px rgba(85,216,255,.45);
}
.setupCard small{
  text-shadow: 0 0 10px rgba(255,76,155,.5);
}
.setupInspect{
  position:relative;
}
.setupInspect:after{
  content:"";
  position:absolute;
  left:0; bottom:-3px;
  width:0%; height:1px;
  background: var(--mg-cyan);
  box-shadow: 0 0 8px var(--mg-cyan);
  transition: width .3s ease;
}
.setupCard:hover .setupInspect:after{ width:100%; }

/* -------- links de texto com underline animado -------- */
.textLink{
  position:relative;
}
.textLink:hover{
  text-shadow: 0 0 10px rgba(85,216,255,.5);
}

/* -------- footer social: glow ao passar o mouse -------- */
.socialButton{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.socialButton:hover,.socialButton:focus-visible{
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 10px 26px rgba(85,216,255,.28);
}
.socialButton.social-twitch:hover{ box-shadow:0 10px 26px rgba(145,71,255,.45); }
.socialButton.social-youtube:hover{ box-shadow:0 10px 26px rgba(255,0,60,.4); }
.socialButton.social-instagram:hover{ box-shadow:0 10px 26px rgba(255,76,155,.45); }

/* -------- dock de música / pix: leve respiração -------- */
.musicToggle,.pixFab{
  animation: mgBreathe 3.6s ease-in-out infinite;
}
@keyframes mgBreathe{
  0%,100%{ box-shadow:0 0 0 rgba(255,76,155,0); }
  50%{ box-shadow:0 0 20px rgba(255,76,155,.35); }
}

/* -------- ambient particles: leve reforço de brilho -------- */
.ambientFx i{
  filter: drop-shadow(0 0 4px currentColor);
}

/* -------- respeita quem prefere menos movimento -------- */
@media (prefers-reduced-motion: reduce){
  .brandWord,.topbar .brandImage,.heroTitle strong:after,.eyebrow span,
  .playerCard.online,.playerCard.online:before,.liveRibbon,
  .sectionHead h2,.aboutIntro h2,.musicToggle,.pixFab{
    animation:none !important;
  }
}