/* newCombinedCSS.css */
body {font-family: Arial, sans-serif;margin: 0;padding: 0;display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;background-color: #000;}#artworkCover {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.8);display: flex;justify-content: center;align-items: center;z-index: 1000;cursor: pointer;transition: opacity 0.3s ease;}#artworkCover.hidden {opacity: 0;pointer-events: none;}#artworkImage {max-width: 80%;max-height: 80%;object-fit: contain;border: 4px solid #fff;border-radius: 10px;box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);cursor: pointer;}#loadingSpinner {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);border: 8px solid #f3f3f3;border-top: 8px solid #3498db;border-radius: 50%;width: 60px;height: 60px;animation: spin 2s linear infinite;z-index: 1001;display: none;}@keyframes spin {0% {transform: rotate(0) translate(-50%, -50%);}100% {transform: rotate(360deg) translate(-50%, -50%);}}#trackListingPanel {position: fixed;top: 0;left: -420px;width: 400px;height: 100%;background: rgba(45, 45, 45, 0.95);color: #ffffff;padding: 10px 15px;box-shadow: 2px 0 12px rgba(0, 0, 0, 0.8);overflow-y: auto;transition: left 0.3s ease;z-index: 2999;}#trackListingPanel.visible {left: 0;}#infoPanel {position: fixed;top: 20px;left: 50%;transform: translateX(-50%);width: 300px;padding: 20px;background-color: rgba(0, 0, 0, 0.9);color: #ffffff;border-radius: 8px;box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.5);z-index: 1003;display: none;text-align: left;}#infoPanel.visible {display: block;}.hidden {display: none;}.metadataItem {margin-bottom: 5px;display: flex;justify-content: space-between;}.metadataItem h2 {margin: 0;font-size: 1em;}.metadataItem p {margin: 0;font-size: 0.9em;color: #ffaa00;}#metadataContent {max-height: 90%;overflow-y: auto;}#nowPlayingContainer {position: fixed;bottom: 0;left: 50%;transform: translateX(-50%);background-color: rgba(20, 20, 20, 0.95);color: #fff;padding: 10px;display: flex;justify-content: center;align-items: center;box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5);z-index: 1000;text-align: center;}#nowPlayingText {display: flex;flex-direction: column;align-items: center;}#nowPlayingText .songTitle {font-size: 1.2em;font-weight: bold;}#nowPlayingText .artistName {font-size: 1em;margin-top: 5px;}#buttonContainer {position: fixed;top: 0;left: 50%;transform: translateX(-50%);background-color: rgba(0, 0, 0, 0.9);padding: 10px;display: flex;gap: 15px;z-index: 1002;}#buttonContainer button {background-color: #3498db;color: #000 !important;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer;transition: transform 0.2s ease, background-color 0.3s ease;}#buttonContainer button:hover {transform: scale(1.15);background-color: #F7931A !important;}#buttonContainer button:focus {outline: none;}#playButton {background-color: #F7931A !important;order: 2;animation: pulseOnLoad 0.2s ease-in-out 4;}#playButton.playing {background-color: #d32f2f !important;}#prevButton {background-color: #bdbdbd !important;order: 1;}#nextButton {background-color: #bdbdbd !important;order: 3;}#toggleInstruction {background-color: #757575 !important;order: 4;color: #fff;padding: 10px 20px;border-radius: 5px;cursor: pointer;}@keyframes pulseOnLoad {0%, 100% {transform: scale(1);}50% {transform: scale(1.2);}}