/*!
 * ASkyo — Aquarius page styles
 *
 * Loaded only on the "Aquarius" page template (tpl/content-aquarius.php).
 */

.player{display:flex;background:rgb(255 255 255 / 80%);border-radius:20px;box-shadow:2px 2px 15px rgba(0,0,0,0.05);max-width:780px;padding:10px;gap:20px;flex-wrap:wrap}
.album-art-container{position:relative;width:100px;height:100px;margin:15px}
.album-art{width:100px;height:100px;border-radius:50px;box-shadow:0 0 10px rgba(0,0,0,0.5);background:#ddd url('https://cdn.peanoo.com/avatar.jpg') center/cover;animation:rotate 20s linear infinite;animation-play-state:paused}
.left-panel{position:relative;flex:0.3;display:flex;flex-direction:column;align-items:center;min-width:120px}
.play-btn{background:rgb(255 165 165 / 50%);border:none;width:60px;height:60px;border-radius:50%;cursor:pointer;transition:all 0.3s ease;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;box-shadow:0 4px 15px rgba(0,0,0,0.2)}
.play-btn:hover{background:rgb(255 165 165 / 50%);transform:translate(-50%,-50%) scale(1.05)}
.play-btn::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff;transition:all 0.2s ease;filter:drop-shadow(0 2px 3px rgba(0,0,0,0.2))}
.play-btn.paused::before{width:16px;height:24px;border:none;background:linear-gradient(#fff,#fff) left center,linear-gradient(#fff,#fff) right center;background-size:6px 24px;background-repeat:no-repeat;transform:translate(-50%,-50%)}
.right-panel{flex:1;min-width:250px;display:flex;flex-direction:column;justify-content:center;padding-right:15px}
.song-info{text-align:left;margin-bottom:1px}
.song-title{font-size:clamp(18px,4vw,24px);color:#2c3e50;margin:5px 0}
.artist{font-size:12px;color:#7f8c8d;margin:0}
.progress-bar{height:10px;background:#eee;border-radius:5px;margin:10px 0;cursor:pointer;position:relative;box-shadow:inset 0 2px 3px rgba(0,0,0,0.05),0 2px 4px rgba(0,0,0,0.05)}
.progress{height:100%;background:#f9e0e9;border-radius:5px;width:0;transition:width 0.1s linear;box-shadow:inset 0 2px 4px rgba(255,255,255,0.4),inset 0 -1px 2px rgba(0,0,0,0.15)}
.time{display:flex;justify-content:space-between;color:#95a5a6;font-size:clamp(12px,3vw,14px)}
@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media (max-width:480px){
	.player{flex-direction:column;align-items:center;padding-bottom:15px;gap:10px}
	.left-panel{flex:none;width:100%;flex-direction:row;justify-content:center;gap:20px}
	.play-btn{width:50px;height:50px}
	.album-art-container{width:80px;height:80px;margin:0}
	.album-art{margin:0;width:80px;height:80px}
	.right-panel{width:100%}
	.song-title{text-align:center}
	.artist{text-align:center}
}
@media (max-width:400px){
	.left-panel{flex-direction:column;align-items:center;gap:10px}
}