/* notes.css - 인게임 노트 및 판정 스타일 분리 */

/* --- [게임 컨테이너 내부 요소] --- */

/* 레인 레이아웃 */
.lane-area {
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
}

.lane {
    flex: 1;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: background 0.05s;
}

/* 키 입력 시각 효과 */
.lane.active {
    background: linear-gradient(to top, rgba(0, 255, 204, 0.3), transparent);
}

.lane .hint {
    font-size: 12px;
    color: white;
    opacity: 0.2;
    position: absolute;
    bottom: 20px;
}

/* 판정선 */
#judgment-line {
    position: absolute;
    bottom: 80px;
    width: 100%;
    height: 4px;
    background: #00ffcc; /* test.html 스타일 통일 */
    box-shadow: 0 0 15px #00ffcc;
    z-index: 20;
}

/* 마디선 */
.bar-line {
    position: absolute;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    z-index: 5;
    pointer-events: none;
    bottom: 0;
    will-change: transform;
}

/* --- [노트 스타일] --- */
.note {
    position: absolute;
    width: 90%;
    left: 5%;
    height: 16px;
    
    /* 1. 색상: 밋밋한 흰색 대신, 약간의 그라데이션이 들어간 '단단한 화이트' */
    background: linear-gradient(to bottom, #ffffff, #e0e0e0);
    
    /* 2. 테두리: 진한 회색 테두리를 추가해 배경과 확실히 분리 (이게 핵심) */
    border: 2px solid #555555;

    border-radius: 4px;
    z-index: 10;
    bottom: 0;
    will-change: transform;
    pointer-events: none;
}

/* 더블 노트 */
.note.double { 
    background: #ffaa00; 
    box-shadow: 0 0 10px #ffaa00;
}

/* 롱노트 */
.note.long { 
    background: rgba(255, 255, 255, 0.6); 
    border: 1px solid white;
    box-sizing: border-box;
    border-radius: 4px;
}

/* 롱노트 홀딩 중 */
.note.long.holding {
    background: rgba(0, 255, 204, 0.8);
    border-color: #00ffcc;
    box-shadow: 0 0 15px #00ffcc;
    z-index: 100;
}

/* --- [판정 텍스트 스타일] --- */
/* main.html의 ID는 judgement-text 입니다. test.html 스타일을 적용합니다. */
#judgement-text {
    position: absolute;
    top: 260px; /* 콤보 아래쪽 위치 */
    width: 100%;
    text-align: center;
    font-size: 32px;
    font-weight: 900;
    z-index: 60;
    opacity: 0;
    transform: scale(0.5);
    -webkit-text-stroke: 1px rgba(0,0,0,0.5);
    pointer-events: none;
}

/* 판정 팝업 애니메이션 */
.pop-animation {
    animation: pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes pop {
    0% { transform: scale(1.0); opacity: 1; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1.0); opacity: 1; }
}

/* FAST / SLOW 라벨 스타일 (test.html과 동일) */
.timing-label {
    display: block;
    font-size: 14px;
    font-weight: bold;
    margin-top: -5px;
    letter-spacing: 2px;
    -webkit-text-stroke: 0;
}

.timing-fast { color: #ff5500; text-shadow: 0 0 5px #ff5500; }
.timing-slow { color: #00aaff; text-shadow: 0 0 5px #00aaff; }



#combo-container {
    position: absolute;
    top: 150px;       /* 콤보 위치 (판정보다 위) */
    width: 100%;
    text-align: center;
    z-index: 50;
    display: none;    /* 평소엔 숨김, JS에서 show */
    pointer-events: none; /* 클릭 방지 */
}

#combo-num {
    display: block;
    font-size: 60px;
    font-weight: 900;
    color: white;
    line-height: 1;
    text-shadow: 0 0 20px rgba(0, 255, 204, 0.8);
    /* 애니메이션은 JS에서 style.animation으로 제어 */
}

#combo-text {
    display: block;
    font-size: 14px;
    letter-spacing: 5px;
    color: #aaa;
    font-weight: bold;
    margin-top: 5px;
}

/* 콤보 바운스 애니메이션 */
@keyframes bounce {
    0% { transform: scale(1.2); }
    50% { transform: scale(0.9); }
    100% { transform: scale(1.0); }
}