#play-btn {
  background: linear-gradient(135deg, #f72585 0%, #3a0ca3 100%);
  border-radius: 50%;
  box-shadow: 0 2px 12px #f7258533, 0 0 0 2px #f72585;
  border: none;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  color: #fff;
  transition: box-shadow 0.2s, transform 0.2s, background 0.3s;
  animation: playBtnPulse 1.2s infinite alternate;
}
#play-btn:hover {
  box-shadow: 0 0 24px #f72585, 0 2px 8px #3a0ca3;
  background: linear-gradient(135deg, #3a0ca3 0%, #f72585 100%);
  color: #fff;
  transform: scale(1.12);
}
#play-btn:active {
  animation: playBtnBounce 0.3s;
  transform: scale(0.96);
}
@keyframes playBtnPulse {
  0% { box-shadow: 0 2px 12px #f7258533, 0 0 0 2px #f72585; }
  100% { box-shadow: 0 8px 32px #f7258555, 0 0 0 8px #3a0ca3; }
}
@keyframes playBtnBounce {
  0% { transform: scale(1.1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1.08); }
}
.window98-player-frame {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 100;
  min-width: 340px;
  max-width: 96vw;
  /* keep element layout but move the visible background to ::before so children can overflow */
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(247,37,133,0.28);
  border-radius: 28px;
  overflow: visible; /* allow cover to scale without being clipped */
  padding: 0 0 14px 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 3px 10px rgba(247,37,133,0.04) inset;
  transition: border-radius 0.3s, box-shadow 0.3s, background 0.3s;
}

@keyframes borderPulse {
  0% { box-shadow: 0 0 0 0 rgba(247,37,133,0.2); border-color: rgba(0,0,0,0.65); }
  100% { box-shadow: 0 0 24px 6px rgba(247,37,133,0.12); border-color: rgba(220,20,110,0.95); }
}

/* Quando estiver tocando: fundo bem mais rosa/roxo para alto contraste */
.window98-player-frame.playing::before {
  /* playing: stronger pink → purple gradient across the whole player (applied to pseudo background) */
  background: linear-gradient(90deg, rgba(247,37,133,0.78) 0%, rgba(213,80,200,0.28) 45%, rgba(58,12,163,0.22) 100%);
  backdrop-filter: blur(16px) saturate(1.2);
  border-color: rgba(247,37,133,0.9);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55) inset;
}

/* Variante para tema escuro - mantém contraste e saturação mais visíveis */
body.tema-escuro .window98-player-frame.playing::before {
  background: linear-gradient(90deg, rgba(247,37,133,0.6) 0%, rgba(243,231,255,0.08) 55%, rgba(58,12,163,0.12) 100%);
  box-shadow: 0 8px 30px rgba(247,37,133,0.12) inset;
}

/* Botões com fundo semi-transparente por padrão e ainda mais translúcidos quando tocando */
#play-btn, #show-queue {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(6px);
  color: #3a0ca3;
  border: 1px solid rgba(0,0,0,0.06);
}
.window98-player-frame.playing #play-btn,
.window98-player-frame.playing #show-queue {
  background: rgba(255,255,255,0.18); /* mais translúcido quando tocando */
  color: #fff;
  box-shadow: 0 6px 20px rgba(247,37,133,0.12);
  border: 1px solid rgba(247,37,133,0.18);
}

/* animação de borda interna quando tocando */
.window98-player-frame::after {
  content: '';
  position: absolute;
  inset: 6px; /* espaço interno para a borda animada */
  border-radius: 9999px;
  border: 2px solid transparent;
  pointer-events: none;
  transition: box-shadow 0.3s, background 0.3s, opacity 0.3s;
  opacity: 0;
  z-index: 1; /* inner decorative border sits above background but below content */
}

/* visual rounded background moved to ::before so children can overflow without clipping */
.window98-player-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(247,37,133,0.12) 0%, rgba(255,255,255,0.02) 35%, rgba(58,12,163,0.06) 100%);
  backdrop-filter: blur(10px) saturate(1.05);
  pointer-events: none;
  z-index: 0;
  transition: background 0.3s, backdrop-filter 0.3s, opacity 0.3s;
}

/* ensure normal content sits above the background and inner border */
.window98-player-frame > * { position: relative; z-index: 2; }
.window98-player-frame.player-grow::after {
  opacity: 1;
  box-shadow: 0 0 0 6px rgba(247,37,133,0.08), 0 0 20px rgba(58,12,163,0.08);
  border-color: rgba(247,37,133,0.6);
}
.window98-player-frame.player-shrink::after {
  opacity: 0;
}

/* Botões animados do player */
#play-btn, #show-queue {
  transition: box-shadow 0.3s, transform 0.2s, background 0.3s;
}
#play-btn:hover, #show-queue:hover {
  box-shadow: 0 0 12px #f72585, 0 2px 8px #0002;
  background: linear-gradient(90deg, #f72585 0%, #3a0ca3 100%);
  color: #fff;
  transform: scale(1.12);
}
#play-btn:active, #show-queue:active {
  animation: btnBounce 0.3s;
}
@keyframes btnBounce {
  0% { transform: scale(1.1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1.08); }
}
/* Animações extras para o player */
.player-grow {
  transform: scale(1.08);
  box-shadow: 0 8px 32px #0002, 0 0 0 4px #f72585;
  animation: playerPulse 1.2s infinite alternate;
  background: rgba(255, 0, 128, 0.15); /* Mantém translúcido mesmo animado */
  backdrop-filter: blur(12px);
}
.player-shrink {
  transform: scale(0.97);
  box-shadow: 0 2px 8px #0001;
  background: rgba(255, 0, 128, 0.15); /* Mantém translúcido mesmo animado */
  backdrop-filter: blur(12px);
}
@keyframes playerPulse {
  0% { box-shadow: 0 8px 32px #f7258522, 0 0 0 4px #f72585; }
  100% { box-shadow: 0 16px 48px #f7258555, 0 0 0 8px #f72585; }
}
.player-animated-enter {
  animation: playerEnter 0.7s cubic-bezier(.68,-0.55,.27,1.55);
}
@keyframes playerEnter {
  0% { opacity: 0; transform: scale(0.7) translateY(40px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* Animação do player estilo iTunes */
.player-grow {
  transform: scale(1.08);
  box-shadow: 0 8px 32px #0002, 0 0 0 4px #f72585;
}
.player-shrink {
  transform: scale(0.97);
  box-shadow: 0 2px 8px #0001;
}
@keyframes scroll-title {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.animate-scroll-title {
  display: inline-block;
  animation: scroll-title 8s linear infinite;
}

/* Capa animada quando o player estiver tocando */
#cover {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.player-grow #cover {
  transform: scale(1.06) rotate(-2deg);
  box-shadow: 0 8px 24px #0006;
  border-radius: 12px;
}
.player-shrink #cover {
  transform: scale(1) rotate(0deg);
  box-shadow: 0 2px 8px #0002;
  border-radius: 8px;
}

/* Small decorative elements replacing emojis */
.live-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #ff3b30; /* red live color */
  border-radius: 50%;
  margin-right: 6px;
  box-shadow: 0 0 8px rgba(255,59,48,0.35);
}
.music-icon { color: #f72585; }

/* Player text color scheme: use darker text by default for readability on light/translucent background.
   When the player is in the .playing state the background becomes saturated so we switch to white text. */
.window98-player-frame { color: #6b2034; }
.window98-player-frame #song-title {
  color: #6b2034 !important;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-shadow: none;
}
.window98-player-frame #artist-name {
  color: rgba(107,32,52,0.78) !important;
  font-size: 0.9rem;
}
.window98-player-frame #onair-label {
  color: rgba(107,32,52,0.65) !important;
}
.window98-player-frame #live-indicator {
  color: rgba(192,36,78,0.95) !important; /* slightly lighter wine for live */
  font-weight: 700;
}
.window98-player-frame #listeners-player,
.window98-player-frame #listeners-count {
  color: rgba(107,32,52,0.85) !important;
}
.window98-player-frame #volume-label {
  color: rgba(107,32,52,0.82) !important;
}
.window98-player-frame #clock {
  color: #0b0b0b !important; /* keep clock text readable */
  background: #ffffff !important;
}

/* Buttons and icons: leave them as-is so controls retain their contrast and visual language */
.window98-player-frame button,
.window98-player-frame #play-btn svg,
.window98-player-frame #show-queue {
  /* inherit color from surrounding controls; do not force white here */
  color: inherit !important;
}

/* Variant when playing: ensure contrast remains (white text on saturated background) */
.window98-player-frame.playing #song-title,
.window98-player-frame.playing #artist-name,
.window98-player-frame.playing #volume-label {
  color: #fff !important;
}

/* Dark theme adjustments: keep high contrast but tuned for dark base */
/* Dark theme adjustments: keep high contrast but tuned for dark base
   Override the wine/pink text colors so they are not used in dark mode. */
body.tema-escuro .window98-player-frame {
  color: #fff !important;
}
body.tema-escuro .window98-player-frame #song-title { color: #fff !important; }
body.tema-escuro .window98-player-frame #artist-name { color: rgba(255,255,255,0.92) !important; }
body.tema-escuro .window98-player-frame #onair-label { color: rgba(255,200,200,0.9) !important; }
body.tema-escuro .window98-player-frame #live-indicator { color: rgba(255,130,160,0.95) !important; }
body.tema-escuro .window98-player-frame #listeners-player,
body.tema-escuro .window98-player-frame #listeners-count { color: rgba(255,255,255,0.9) !important; }
body.tema-escuro .window98-player-frame #volume-label { color: rgba(255,255,255,0.9) !important; }
body.tema-escuro .window98-player-frame #clock { color: #111 !important; background: #fff !important; }

/* Estilização dos ícones SVG do botão play/pause */
#play-btn svg {
  display: block;
  width: 26px;
  height: 26px;
  color: #3a0ca3; /* usa currentColor no SVG path */
  transition: transform 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
#play-btn:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(247,37,133,0.18);
}
.window98-player-frame.playing #play-btn svg {
  color: #fff; /* ícone branco quando tocando */
}
#play-btn:active svg { transform: scale(0.96); }
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

body {
  background: url('pixil-frame-0.png') repeat !important;
}
body.tema-escuro {
  background: #111 !important;
}


main, header, .queue-retro, .queue-footer, .window, .window-header, .window-content {
  font-family: 'VT323', monospace !important;
}


/* Botões e inputs retro */
button, input[type=range] {
  font-family: 'VT323', monospace !important;
  border: 2px solid #bdbdbd !important;
  background: #e0e0e0 !important;
  color: #3a0ca3 !important;
  border-radius: 4px !important;
  box-shadow: 1px 1px 0 #8888 !important;
  transition: background 0.2s;
}
button:hover {
  background: #f72585 !important;
}

/* Make player controls visually transparent but keep focus styles */
.window98-player-frame button,
.window98-player-frame .win98-btn,
.window98-player-frame #play-btn,
.window98-player-frame #show-queue {
  /* stronger contrasting surface so controls are clearly readable */
  background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.03)) !important;
  border: 1px solid rgba(0,0,0,0.36) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.02);
  color: inherit !important;
  padding: 8px 10px;
  border-radius: 12px;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}
.window98-player-frame button:hover,
.window98-player-frame #play-btn:hover,
.window98-player-frame #show-queue:hover {
  background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.06)) !important;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}
.window98-player-frame.playing button,
.window98-player-frame.playing #play-btn,
.window98-player-frame.playing #show-queue {
  /* slightly more contrasted when playing */
  background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(247,37,133,0.02)) !important;
  border-color: rgba(247,37,133,0.18) !important;
  box-shadow: 0 6px 22px rgba(247,37,133,0.08), 0 1px 0 rgba(255,255,255,0.02) inset;
}
.window98-player-frame button:focus,
.window98-player-frame .win98-btn:focus,
.window98-player-frame #play-btn:focus,
.window98-player-frame #show-queue:focus {
  outline: 3px solid rgba(247,37,133,0.18);
  outline-offset: 4px;
}

/* Dark theme button contrast */
body.tema-escuro .window98-player-frame button,
body.tema-escuro .window98-player-frame .win98-btn,
body.tema-escuro .window98-player-frame #play-btn,
body.tema-escuro .window98-player-frame #show-queue {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
}
body.tema-escuro .window98-player-frame button:hover,
body.tema-escuro .window98-player-frame #play-btn:hover,
body.tema-escuro .window98-player-frame #show-queue:hover {
  background: rgba(255,255,255,0.06) !important;
}
input[type=range] {
  accent-color: #3a0ca3 !important;
}

/* Estilo aprimorado e animado para o volume */
#volume {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 120px;
  height: 8px;
  background: linear-gradient(90deg, #3a0ca3 0%, #7b2bff 100%);
  border-radius: 999px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
  outline: none;
  transition: box-shadow 0.2s, transform 0.15s;
}
#volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #dfe9ff);
  box-shadow: 0 4px 12px rgba(58,12,163,0.3);
  border: 3px solid #3a0ca3;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
#volume:active::-webkit-slider-thumb { transform: scale(1.08); }
#volume::-moz-range-thumb { width:18px; height:18px; border-radius:50%; }

/* Firefox track */
#volume::-moz-range-track {
  background: linear-gradient(90deg, #3a0ca3 0%, #7b2bff 100%);
  height: 8px;
  border-radius: 999px;
}

/* show percentage label animation */
#volume-label { transition: transform 0.18s ease, opacity 0.18s ease; }
.window98-player-frame.playing #volume { transform: scale(1.02); }
.window98-player-frame.playing #volume::-webkit-slider-thumb { box-shadow: 0 6px 18px rgba(247,37,133,0.28); border-color: #f72585; }

/* Moldura arcade do player (mantém SVG) */
.fixed.bottom-0.left-0.w-full {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  justify-content: center !important;
  padding-bottom: 12px !important;
}

/* Fila de músicas retro */
#queue-list, .queue-footer {
  background: #fff !important;
  border: 2px solid #bdbdbd !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px #0002 !important;
  color: #222 !important;
  font-family: 'VT323', monospace !important;
}
#queue-list h2, .queue-footer h3 {
  color: #3a0ca3 !important;
  font-size: 1.1em !important;
  margin-bottom: 8px !important;
}
#queue-list ul, .queue-footer ul {
  list-style: square inside !important;
  padding: 0 !important;
  margin: 0 !important;
}
#queue-list li, .queue-footer li {
  margin-bottom: 2px !important;
  color: #222 !important;
}
#queue-list li.text-blue-400, .queue-footer li.text-blue-400 { color: #2196f3 !important; }
#queue-list li.text-green-400, .queue-footer li.text-green-400 { color: #43aa8b !important; font-weight: bold !important; }
#queue-list li.text-white, .queue-footer li.text-white { color: #222 !important; }

::-webkit-scrollbar {
  width: 10px;
  background: #bdbdbd;
}
::-webkit-scrollbar-thumb {
  background: #3a0ca3;
  border-radius: 6px;
}

/* Modo escuro retrô */
body.tema-escuro {
  background: #1a1a1a;
  color: #e0e0e0;
}
body.tema-escuro .win98-main-window {
  background: #2a2a2a;
  border-color: #555;
  color: #e0e0e0;
}
body.tema-escuro .win98-titlebar {
  background: linear-gradient(90deg, #333, #666);
}
body.tema-escuro .window98-player-frame {
  background: rgba(40, 10, 40, 0.25); /* Fundo escuro translúcido */
  backdrop-filter: blur(12px);
  border-color: #f72585;
  color: #fff;
  box-shadow: 0 0 0 4px #000, 0 4px 16px #000a;
}
body.tema-escuro button {
  background-color: #444 !important;
  color: #fff !important;
  border-color: #888 !important;
}
body.tema-escuro button:hover {
  background-color: #666 !important;
}

.window-close {
  color: red !important; /* Define a cor do texto como vermelho */
  background: transparent !important; /* Remove qualquer fundo que possa estar sobrepondo */
  border: none !important; /* Remove bordas, se necessário */
  font-weight: bold !important; /* Deixa o "X" mais destacado */
}

.window-close:hover {
  color: #ff0000 !important; /* Torna o vermelho mais intenso ao passar o mouse */
  cursor: pointer; /* Mostra o cursor de clique */
}

.volume-percentage {
  color: #3a0ca3 !important; /* Substitua pelo código de cor desejado */
  font-weight: bold !important; /* Deixa o texto mais destacado */
}

.recommendation-form {
  font-family: 'VT323', monospace;
  margin: 20px;
}

input {
  border: 2px solid #bdbdbd;
  padding: 5px;
  border-radius: 4px;
}

button {
  background-color: #3a0ca3;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #5a0cb3;
}