/* --- Animation Definitions --- */
@keyframes textBreath {
    0% { transform: scale(1.0); }
    50% { transform: scale(1.20); text-shadow: -8px -8px 0 #6d5b9b, 8px 8px 0 #33ffff, -2px -2px 0 #fff; }
    100% { transform: scale(1.0); }
}
@keyframes colorFlash {
    0%, 100% { color: #ff69b4; }
    50% { color: #ffff00; }
}
@keyframes subtitleBounce {
    0%, 100% { transform: translateY(0) scale(1.0); }
    50% { transform: translateY(-2px) scale(1.05); }
}
@keyframes buttonWobble {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-1px) rotate(1deg); }
    66% { transform: translateY(1px) rotate(-1deg); }
}
@keyframes rhythmicJitter {
    0% { transform: translateY(0) rotate(0deg) scale(2.0); }
    25% { transform: translateY(5px) rotate(2deg) scale(1.95); }
    50% { transform: translateY(-15px) rotate(-8deg) scale(2.10); }
    75% { transform: translateY(0) rotate(0deg) scale(2.0); }
    100% { transform: translateY(0) rotate(0deg) scale(2.0); }
}
@keyframes moveBubbles {
    from { background-position: 0 0, 0 0, 0 0, 0 0; }
    to { background-position: 200px 200px, -300px 300px, 150px -150px, -350px 350px; }
}

/* --- Global Styles --- */

* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
*::-webkit-scrollbar {
    display: none;
}

body {
    margin: 0; padding: 0; background-color: #F8F8FF;
    font-family: 'Fredoka One', cursive; overflow: hidden;
    touch-action: none; display: flex; justify-content: center;
    align-items: center; min-height: 90vh; color: #5A189A;
    user-select: none; -webkit-user-select: none;
}
.bubble-bg {
    background: #ffffff; 
    background-image: 
        radial-gradient(circle at 5% 15%, rgba(255, 20, 147, 0.4) 0%, transparent 70%), 
        radial-gradient(circle at 75% 85%, rgba(0, 255, 255, 0.5) 0%, transparent 70%), 
        radial-gradient(circle at 30% 60%, rgba(255, 165, 0, 0.3) 0%, transparent 70%),
        radial-gradient(circle at 90% 10%, rgba(128, 0, 128, 0.3) 0%, transparent 60%); 
    background-size: 200px 200px, 300px 300px, 150px 150px, 350px 350px;
    animation: moveBubbles 15s linear infinite;
}
#game-container {
    position: relative; width: 100%; max-width: 600px; height: 90vh;
    background: linear-gradient(180deg, #FFE4E1 0%, #FFFFFF 100%); 
    box-shadow: 0 0 30px rgba(236, 72, 153, 0.4); 
    display: flex; flex-direction: column; overflow: hidden;
}
canvas { display: block; width: 100%; height: 100%; }

.overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.98); 
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    z-index: 20; transition: opacity 0.3s; overflow-y: auto; padding-top: 20px;
}

/* Typography */
.bubble-title {
    font-family: 'Luckiest Guy', cursive; line-height: 1;
    text-shadow: -5px -5px 0 #5f4b8b, 5px 5px 0 #00ffff, 0 0 10px #ff00ff, 0 0 20px #00ffff, -2px -2px 0 #fff; 
    animation: textBreath 3s ease-in-out infinite alternate, colorFlash 0.2s linear infinite;
    font-size: 7.2rem !important;
    line-height: 0.88 !important;
    margin-left: -10px; 
    transform: translateX(-4px);
    text-overflow: visible;
    white-space: nowrap;
}
.subtitle-garish {
    font-family: 'Luckiest Guy', cursive; color: #ffff00;
    text-shadow: -3px -3px 0 #ff69b4, 3px 3px 0 #00ffff, 0 0 8px #ff00ff;
    line-height: 1; animation: subtitleBounce 0.3s ease-in-out infinite alternate;
}
.garish-text {
    font-family: 'Bangers', cursive; letter-spacing: 2px; color: #FF00FF; 
    -webkit-text-stroke: 1.5px black; text-shadow: 3px 3px 0 #00FFFF;
}
.feature-text {
    font-family: 'Bangers', cursive; color: #33ffff;
    -webkit-text-stroke: 1px #6d5b9b; text-shadow: 2px 2px 0 #ff69b4; transform: rotate(-2deg);
    font-size: 2.2rem !important;
    line-height: 1 !important;
    margin-bottom: 6px;
}

/* UI Elements */
.song-select-garish {
    font-family: 'Luckiest Guy', cursive; color: #000000; background-color: #00ffff; 
    border: 4px solid #ff69b4; padding: 0.5rem 1.5rem;
    -webkit-appearance: none; appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23FF69B4" d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.5em;
}
.cat-animated { animation: rhythmicJitter 0.5s ease-out infinite; cursor: pointer; }
.start-button {
    transition: none; font-family: 'Bangers', cursive; letter-spacing: 2px;
    border-width: 4px; border-style: solid; border-color: #000;
    box-shadow: 0 8px 0 0 #5f4b8b, 0 0 10px #ff00ff, 0 0 20px #00ffff;
    animation: buttonWobble 0.2s linear infinite; cursor: pointer;
}
.start-button:active {
    box-shadow: 0 2px 0 0 #5f4b8b, 0 0 10px #ff00ff, 0 0 20px #00ffff;
    transform: translateY(6px); animation: none; 
}
.start-button:disabled {
    background-color: #ccc; box-shadow: none; animation: none; transform: none; cursor: not-allowed; border-color: #666;
}

#hud-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5;
}
#score-board, #combo-board {
    position: absolute; top: 20px; font-size: 2rem; 
}
#score-board { left: 20px; }
#combo-board { right: 20px; }
#lyrics-container {
    position: absolute; width: 100%; top: 100px; text-align: center; pointer-events: none;
}
.lyric-active {
    font-family: 'Bangers', cursive; font-size: 2.2rem; color: #FFF000; 
    -webkit-text-stroke: 1.5px black; text-shadow: 3px 3px 0 #000, 5px 5px 0 #FF00FF; 
    transform: scale(1.05) rotate(-2deg); opacity: 1; letter-spacing: 1px;
}
select, input {
    font-size: 1.2rem; padding: 12px; border-radius: 15px; margin-top: 5px; 
    border: 3px solid #EC4899; background: white; font-family: 'Fredoka One'; width: 80%; max-width: 300px; outline: none; color: #000; 
}

/* Cleaned leaderboard styling: compact, readable */
.leaderboard-table {
    width: 100%; max-width: 420px; margin: 8px auto 0; border-collapse: collapse; font-family: 'Fredoka One', cursive;
}
.leaderboard-table thead th {
    font-family: 'Bangers', cursive; color: #5A189A; font-size: 1.15rem; text-align: left; padding: 6px 8px;
}
.leaderboard-table td {
    padding: 6px 8px; color: #5f4b8b; font-size: 1rem; background: transparent; border: none;
}
.leaderboard-table td.text-right { text-align: right; }
.leaderboard-row.highlight td { background: linear-gradient(90deg,#fffdf0,#fff); font-weight:700; }
.leaderboard-row.you td { background: linear-gradient(90deg,#ffebf7,#fff); color:#ff2fa6; font-weight:800; }

/* Apply bubblegum fonts to leaderboard content and input */
#player-name, .leaderboard-table td { font-family: 'Luckiest Guy', 'Bangers', cursive; }

/* Hide top-final score and rank on game-over screen per request */
#final-score, #rank-text { display: none !important; }

/* Remove overall overlay scrolling and optimize spacing for mobile */
.overlay { padding-top: 10px; }
#game-container { max-width: 540px; }

@media (max-width: 480px) {
    .bubble-title { font-size: 3.2rem !important; margin-left: -4px; }
    .subtitle-garish { font-size: 1.1rem !important; }
    .feature-text { font-size: 1.25rem !important; }
    #game-container { max-width: 380px; height: 100vh; padding: 10px; }
    .overlay { padding-top: 6px; }
    #start-screen .relative.h-96 { height: 200px; }
    .leaderboard-table { max-width: 320px; font-size: 0.95rem; }
    .start-button { font-size: 1rem; padding-top: 10px; padding-bottom: 10px; }
    select, input { font-size: 1rem; padding: 8px; border-radius: 10px; }
    .garish-text { font-size: 1.05rem; }
    /* Reduce vertical spacing to avoid scrolling */
    .relative.z-20.pt-7 { padding-top: 6px; }
    .relative.z-20.mb-6 { margin-bottom: 6px; }
}