/* 전체 폰트 적용 */
body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    overflow: hidden;
    background: radial-gradient(circle, #1a2a6c, #b21f1f, #fdbb2d); /* 화려한 배경색 */
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    font-family: 'Gaegu', cursive; /* 귀여운 폰트 */
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

#ui {
    z-index: 10; text-align: center; color: white; margin-top: 40px;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));
}

#title { font-size: 3.5rem; margin-bottom: 0; color: #fff; }
#score-board { font-size: 2rem; color: #ffeb3b; }

#start-btn {
    margin-top: 20px; padding: 15px 40px;
    font-size: 2rem; font-family: 'Gaegu', cursive;
    background: #ffffff; color: #ff4081;
    border: none; border-radius: 50px; cursor: pointer;
    box-shadow: 0 10px 0 #e91e63;
    transition: 0.1s;
}

#start-btn:active { transform: translateY(5px); box-shadow: 0 5px 0 #e91e63; }

/* 판정 라인을 더 직관적으로 변경 */
#judgment-line {
    position: absolute; bottom: 120px; width: 100%; height: 20px;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 20px #fff;
}

.note {
    position: absolute; font-size: 80px; /* 더 크게 */
    filter: drop-shadow(0 0 20px gold);
    user-select: none;
}

#feedback {
    position: absolute; top: 40%; width: 100%; text-align: center;
    font-size: 5rem; color: #fff; font-weight: bold;
    display: none; text-shadow: 0 0 20px #ff00ff, 0 0 40px #00ffff;
    pointer-events: none; z-index: 100;
}