/* transitions.css — Stage transition, audio control, banner */

#stage-transition {
  display: none; position: fixed; inset: 0; z-index: 999;
  background: #000; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; animation: fade-in-overlay 0.35s ease;
}
#stage-transition.active { display: flex; }
#stage-transition.cursed-overlay { background: #1a0005; }
#stage-transition.cursed-overlay h2 { color: var(--rojo); animation: blink 0.5s step-end infinite; }
@keyframes fade-in-overlay { from{opacity:0;} to{opacity:1;} }
#stage-transition h2 { font-size:1.5em; color:var(--amarillo); letter-spacing:4px; text-transform:uppercase; margin-bottom:10px; }
#stage-transition p  { color:#999; font-size:0.82em; letter-spacing:2px; }
.stage-icon { font-size:2.8em; margin-bottom:14px; animation:icon-pop 0.45s ease; }
@keyframes icon-pop { 0%{transform:scale(0);opacity:0;} 70%{transform:scale(1.2);} 100%{transform:scale(1);opacity:1;} }

#audio-control {
  position: fixed; top: 10px; right: 14px; z-index: 300;
  background: rgba(10,0,25,0.8); border: 1px solid rgba(124,58,237,0.4);
  color: #a78bfa; font-family: var(--font); font-size: 0.7em;
  padding: 5px 10px; cursor: pointer; letter-spacing: 1px;
  transition: all 0.2s; backdrop-filter: blur(6px);
}
#audio-control:hover { border-color: #06b6d4; color: #06b6d4; }

#banner-ad {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: rgba(6,6,6,0.97); border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; justify-content: center; align-items: center;
  min-height: 52px; padding: 2px 0;
}
#monetag-banner-wrap { width: 320px; height: 50px; overflow: hidden; display: flex; justify-content: center; align-items: center; }