/* Tom's Face: profile song player (js/song.js). 2006 flash-player look. */
.sg-player {
  position: relative;
  background: linear-gradient(#3b3b3b, #121212 55%, #000);
  border: 1px solid #000; border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  color: #ddd; padding: 8px;
  font: 10px/1.35 Verdana, Tahoma, Arial, sans-serif;
}
.sg-top { display: flex; gap: 8px; align-items: center; }
.sg-art {
  flex: 0 0 44px; height: 44px; display: grid; place-items: center;
  background: linear-gradient(135deg, #ff6600, #cc0066 60%, #330066);
  border: 1px solid #666; color: #fff; font: bold 16px/1 Arial, sans-serif; letter-spacing: -1px;
  text-shadow: 1px 1px 0 #000;
}
.sg-meta { min-width: 0; }
.sg-artist { color: #9fc4ff; font-weight: bold; font-size: 12px; }
.sg-title { color: #fff; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-genre { color: #888; }

.sg-eq {
  display: flex; align-items: flex-end; gap: 2px; height: 34px; margin: 8px 0 5px;
  padding: 2px; background: #000; border: 1px solid #333;
}
.sg-eq i {
  flex: 1; height: 100%;
  background: linear-gradient(to top, #00d400 0 55%, #e6e600 55% 80%, #ff3b00 80%);
  transform-origin: bottom; transform: scaleY(.06);
  transition: transform .08s linear;
}
.sg-prog { height: 4px; background: #333; border-radius: 2px; overflow: hidden; margin-bottom: 7px; }
.sg-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4b8bff, #9fc4ff); }

.sg-ctrls { display: flex; align-items: center; gap: 5px; }
.sg-btn {
  display: grid; place-items: center; width: 28px; height: 24px; padding: 0;
  background: linear-gradient(#5a5a5a, #222); color: #fff;
  border: 1px solid #000; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.sg-btn:hover { color: #9fc4ff; }
.sg-play { width: 34px; height: 28px; border-radius: 50%; background: linear-gradient(#5d97ff, #1c4fc0); }
.sg-play:hover { color: #fff; filter: brightness(1.15); }
.sg-vol { display: flex; align-items: center; gap: 4px; margin-left: auto; color: #aaa; min-width: 0; }
.sg-vol input { width: 80px; min-width: 0; accent-color: #5d97ff; }

.sg-list { list-style: none; margin: 8px 0 4px; padding: 0; border-top: 1px solid #333; }
.sg-list button {
  display: flex; width: 100%; gap: 5px; align-items: baseline; text-align: left;
  padding: 3px 2px; background: none; border: 0; border-bottom: 1px dotted #333;
  color: #ccc; font: 10px Verdana, Tahoma, sans-serif;
}
.sg-list button:hover { background: #222; color: #fff; }
.sg-list button.on { color: #ffcc00; font-weight: bold; }
.sg-n { color: #777; flex: 0 0 auto; }
.sg-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-len { color: #777; flex: 0 0 auto; }

.sg-plays { margin: 4px 0 0; color: #aaa; }
.sg-plays b { color: #fff; }
.sg-plays span { color: #777; }

.sg-banner {
  display: block; width: 100%; margin-top: 6px; padding: 4px;
  background: #ffff00; color: #cc0000; border: 1px dashed #cc0000;
  font: bold 11px Verdana, sans-serif; text-align: center;
  animation: sg-blink 1s steps(2) infinite;
}
.sg-banner[hidden] { display: none; }
@keyframes sg-blink { 50% { opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
  .sg-banner { animation: none; }
  .sg-eq i { transition: none; }
}