/* =====================
   PLAYER PAGE
   player.css
   ===================== */

.player-page body { background: var(--bg-dark); }

.player-hero {
  position: relative;
  padding: 60px 20px 100px;
  overflow: hidden;
}
.player-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(245,166,35,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.player-hero-inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
  position: relative;
  z-index: 2;
}

/* Logo */
.player-logo-wrap {
  width: 160px;
  height: 160px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 12px 50px rgba(0,0,0,0.6);
  animation: pulse-logo 3s ease-in-out infinite;
}
@keyframes pulse-logo {
  0%, 100% { box-shadow: 0 12px 50px rgba(0,0,0,0.6), 0 0 0 0 rgba(245,166,35,0.3); }
  50% { box-shadow: 0 12px 50px rgba(0,0,0,0.6), 0 0 0 16px rgba(245,166,35,0); }
}
.player-logo-img { width: 100%; height: 100%; object-fit: cover; }
.player-logo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 48px;
  font-weight: 900;
  color: #fff;
}

/* Info */
.ao-vivo-badge {
  background: rgba(255,60,60,0.15);
  border: 1px solid rgba(255,60,60,0.4);
  color: #ff6060;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 30px;
  letter-spacing: 1px;
  display: inline-block;
}
.player-info h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 900;
  color: #fff;
  margin: 10px 0 6px;
}
.player-slogan {
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  font-style: italic;
  margin-bottom: 8px;
}
.player-cidade {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
}

/* Controls */
.player-controls-wrap {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 32px 40px;
  width: 100%;
  max-width: 480px;
  backdrop-filter: blur(10px);
}
.player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 16px;
}
.btn-play {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--radio-cor, var(--amarelo));
  border: none;
  font-size: 24px;
  color: #111;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(245,166,35,0.4);
}
.btn-play:hover { transform: scale(1.08); }
.btn-play.playing { background: #ff4444; box-shadow: 0 4px 20px rgba(255,68,68,0.4); }

.volume-area {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
}
.volume-area input[type="range"] {
  width: 120px;
  accent-color: var(--radio-cor, var(--amarelo));
}

.player-status {
  text-align: center;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  min-height: 20px;
  margin-bottom: 20px;
}
.player-status.loading { color: var(--radio-cor, var(--amarelo)); }
.player-status.playing { color: #60ff80; }
.player-status.error { color: #ff6060; }

/* Share */
.player-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  margin-top: 4px;
}
.share-btn {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  transition: opacity 0.2s;
}
.share-btn:hover { opacity: 0.8; }
.share-btn.wa { background: #25d366; color: #fff; }
.share-btn.fb { background: #1877f2; color: #fff; }

/* Wave */
.player-hero .hero-wave { position: absolute; bottom: 0; left: 0; width: 100%; }
.player-hero .hero-wave svg { display: block; width: 100%; height: 60px; }

@media (max-width: 600px) {
  .player-controls-wrap { padding: 24px 20px; }
  .player-logo-wrap { width: 120px; height: 120px; }
}