:root { 
    --primary: #00838f; 
    --accent: #e91e63; 
    --bg: #e0f7fa; 
    --line-green: #06C755;
    --link-blue: #007aff;
}

* { box-sizing: border-box; }

body { 
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; 
    background-color: var(--bg); color: #333; margin: 0; 
    padding: 20px 15px 140px; transition: background-color 1.5s ease; 
}

/* --- Loader --- */
#loader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #e0f7fa; display: flex; justify-content: center; align-items: center;
    z-index: 9999; transition: opacity 0.8s ease, visibility 0.8s;
}
#loader.loaded { opacity: 0; visibility: hidden; }

/* --- Ranking Tabs --- */
.tab-btn {
    flex: 1; padding: 12px; border: none; border-radius: 10px;
    cursor: pointer; background: #cfd8dc; color: #546e7a;
    font-weight: bold; transition: 0.3s;
}
.tab-btn.active {
    background: var(--primary); color: white;
    box-shadow: 0 4px 10px rgba(0, 131, 143, 0.3);
}

/* --- Song Items --- */
.container { 
    max-width: 650px; margin: auto; background: rgba(255, 255, 255, 0.9); 
    padding: 20px; border-radius: 20px; box-shadow: 0 8px 30px rgba(0,0,0,0.1); 
}

.song-item { 
    background: #f1f8f9; border-radius: 12px; padding: 15px; 
    margin-bottom: 15px; border: 2px solid transparent; 
}
.song-item.playing { border: 2px solid var(--primary); background: #ffffff; }

.song-title { 
    font-weight: bold; font-size: 1rem; border-left: 5px solid var(--primary); 
    padding-left: 10px; display: flex; align-items: center; gap: 8px;
}

/* 再生マークは消さない */
.play-indicator { color: var(--primary); font-size: 0.8rem; }

/* アニメーション棒：再生中のみ表示 */
.playing-bars { display: none; align-items: flex-end; gap: 2px; height: 14px; }
.song-item.is-audio-active .playing-bars { display: inline-flex; }

.bar { width: 3px; background-color: var(--primary); animation: bar-up-down 0.5s infinite alternate; }
.bar:nth-child(2) { animation-delay: 0.15s; }
.bar:nth-child(3) { animation-delay: 0.3s; }
@keyframes bar-up-down { 0% { height: 3px; } 100% { height: 14px; } }

/* --- Footer Link --- */
.footer-link {
    color: var(--link-blue);
    text-decoration: underline;
    transition: opacity 0.2s;
}
.footer-link:active { opacity: 0.6; }

/* --- UI Parts --- */
.promo-banner { background: white; border-radius: 15px; padding: 15px; margin-bottom: 25px; text-align: center; border: 1px solid #eee; }
.promo-grid { display: flex; gap: 10px; margin-top: 10px; }
.promo-item { flex: 1; text-decoration: none; background: var(--line-green); color: white; padding: 10px; border-radius: 10px; font-size: 0.75rem; font-weight: bold; text-align: center; }

.action-buttons { display: flex; gap: 10px; margin-top: 15px; }
.like-btn, .share-btn { flex: 1; background: white; border-radius: 20px; padding: 8px 15px; cursor: pointer; font-weight: bold; font-size: 0.85rem; border: 1px solid #e0e0e0; }
.like-btn.active { background: var(--accent); color: white; border-color: var(--accent); }

.floating-player {
    position: fixed; bottom: -120px; left: 50%; transform: translateX(-50%); 
    width: 95%; max-width: 550px; background: rgba(255, 255, 255, 0.96); 
    backdrop-filter: blur(20px); border-radius: 30px; padding: 15px 25px; z-index: 1000;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2); transition: bottom 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.floating-player.show { bottom: 20px; }
#fp-seek-bar { -webkit-appearance: none; width: 100%; height: 6px; background: #e0e0e0; border-radius: 3px; outline: none; background-size: 0% 100%; background-repeat: no-repeat; background-image: linear-gradient(var(--primary), var(--primary)); }
#fp-seek-bar::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; background: white; border: 3px solid var(--primary); border-radius: 50%; }
.fp-play-pause { background: var(--primary); color: white; border: none; width: 48px; height: 48px; border-radius: 50%; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; cursor: pointer; }