.daltons-player-outer { display: block; width: 100%; max-width: 380px; clear: both; margin: 0 auto; }
.speler-widget { background-color: #3b2d24; width: 100%; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); overflow: hidden; border: 1px solid rgba(224, 192, 107, 0.35); font-family: 'Outfit', sans-serif; color: #faeee3; }
.speler-inner { position: relative; padding: 20px 16px; display: flex; flex-direction: column; align-items: center; overflow: hidden; border-bottom: 1px solid rgba(224, 192, 107, 0.3); background: linear-gradient(135deg, #46372d 0%, #2f231c 100%); }
.grote-achtergrond-hoes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; filter: blur(25px); opacity: 0.65; transform: scale(1.3); z-index: 0; transition: background-image 0.4s ease; }
.speler-content { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: center; }
.album-hoes { width: 180px; height: 180px; background-color: rgba(0, 0, 0, 0.25); border-radius: 16px; box-shadow: 0 8px 20px rgba(0,0,0,0.5); margin-bottom: 16px; display: flex; justify-content: center; align-items: center; overflow: hidden; border: 2px solid rgba(224, 192, 107, 0.6); padding: 4px; }
.album-hoes img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.nummer-info { text-align: center; margin-bottom: 14px; width: 100%; }
.nu-draait-box, .discogs-kant-box { display: none; margin-bottom: 6px; background: rgba(70, 52, 40, 0.8); border: 1px solid rgba(224, 192, 107, 0.5); padding: 4px 12px; border-radius: 20px; max-width: 100%; margin-left: auto; margin-right: auto; width: fit-content; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.nu-draait-tekst, .discogs-kant-tekst { font-size: 11px; color: #ffcc44; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.3px; }
.tekst-wrapper { width: 100%; overflow: hidden; white-space: nowrap; position: relative; margin-bottom: 4px; }
.nummer-titel { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 800; color: #fff4e6; display: inline-block; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.artiest-naam { font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 700; color: #f0d075; display: inline-block; text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
#artiestWrapper { margin-bottom: 10px; }
#equalizerContainer { display: flex; justify-content: center; align-items: flex-end; gap: 4px; height: 18px; margin-bottom: 14px; }
.eq-bar { width: 4px; border-radius: 2px; height: 6px; }
.eq-bar:nth-child(1) { background: #ff5252; }
.eq-bar:nth-child(2) { background: #ffeb3b; }
.eq-bar:nth-child(3) { background: #4caf50; }
.eq-bar:nth-child(4) { background: #00bcd4; }
.eq-bar:nth-child(5) { background: #ff9800; }
.speel-knop { background: linear-gradient(135deg, #f3d06c 0%, #d4af37 100%); color: #3b2d24; border: 2px solid rgba(255, 255, 255, 0.4); width: 66px; height: 66px; min-width: 66px; min-height: 66px; border-radius: 50% !important; font-size: 24px; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,0.4); display: flex; justify-content: center; align-items: center; padding: 0; outline: none; line-height: 1; text-indent: 2px; transition: transform 0.15s ease; }
.volume-houder { margin-top: 16px; width: 90%; background: rgba(30, 22, 17, 0.5); border: 1px solid rgba(224, 192, 107, 0.3); padding: 8px 16px; border-radius: 30px; display: flex; align-items: center; gap: 12px; box-shadow: inset 0 2px 6px rgba(0,0,0,0.4); }
.vol-icoon { font-size: 15px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); cursor: default; opacity: 0.8; }
#volumeRegelaar { width: 100%; accent-color: #d4af37; cursor: pointer; height: 5px; }
.historie-widget { padding: 14px; background-color: rgba(48, 36, 28, 0.75); position: relative; z-index: 2; width: 100%; }
.historie-kop { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; background: rgba(70, 52, 40, 0.85); padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(224, 192, 107, 0.35); box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.historie-kop h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #fff4e6; font-weight: 800; margin: 0; }
#historieLijst { display: flex; flex-direction: column; gap: 10px; }
.historie-laden { font-size: 12px; color: #fff4e6; text-align: center; padding: 6px; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.animatie-marquee { display: inline-block !important; white-space: nowrap; animation: marquee 18s linear infinite; }
@keyframes equalizerAnim { 0% { height: 4px; } 50% { height: 16px; } 100% { height: 6px; } }
.speler-actief .eq-bar { animation: equalizerAnim 0.8s ease-in-out infinite alternate; }
.speler-actief .eq-bar:nth-child(1) { animation-delay: 0.1s; }
.speler-actief .eq-bar:nth-child(2) { animation-delay: 0.3s; }
.speler-actief .eq-bar:nth-child(3) { animation-delay: 0.2s; }
.speler-actief .eq-bar:nth-child(4) { animation-delay: 0.4s; }
.speler-actief .eq-bar:nth-child(5) { animation-delay: 0.15s; }
.speler-inactief .eq-bar { animation: none !important; height: 4px !important; opacity: 0.4; }
@media (max-width: 480px) { .speler-widget { max-width: 100% !important; } }