body {
    /* display: flex; */ /* Canvas를 전체 배경으로 사용하므로 flex 불필요할 수 있음 */
    /* justify-content: center; */
    /* align-items: flex-start; */
    height: 100vh;
    margin: 0;
    background-color: #000; /* 매트릭스 효과를 위해 검은색 배경 */
    overflow: hidden; /* 스크롤바 방지 */
    position: relative; /* 공들이 body를 기준으로 position:absolute를 사용하므로 */
}

#matrix-canvas {
    position: fixed; /* 화면 전체에 고정 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* 다른 콘텐츠 뒤에 배치 */
}

.ball { /* ID 선택자에서 클래스 선택자로 변경 */
    width: 50px; /* script.js의 BALL_WIDTH와 일치 */
    height: 50px; /* script.js의 BALL_HEIGHT와 일치 */
    /* background-color: red; */ /* JavaScript에서 동적으로 설정하므로 제거 */
    border-radius: 50%;
    position: absolute; /* body를 기준으로 하므로 absolute 사용 */
    /* top, left는 script.js에서 설정 */
    /* transition은 script.js에서 opacity, transform에 대해 개별적으로 적용 중 */
}

.ball.exploded { /* 클래스 선택자로 변경 */
    /* script.js에서 직접 스타일을 변경 (transform, opacity) */
}

.particle {
    position: absolute; /* body를 기준으로 절대 위치 */
    width: 5px;
    height: 5px;
    /* background-color: orange; */ /* JavaScript에서 동적으로 설정하므로 제거 */
    border-radius: 50%;
    pointer-events: none; /* 파티클이 마우스 이벤트를 가로채지 않도록 함 */
    opacity: 1; /* 초기 투명도 */
    /* transition은 JavaScript에서 직접 제어하므로 여기서는 불필요 */
}

#blinking-text {
    position: absolute;
    /* top, left는 JavaScript에서 랜덤하게 설정 */
    /* transform: translate(-50%, -50%); 제거 */
    color: #FFF; /* 흰색 텍스트 */
    font-size: 4em; /* 글자 크기 2배로 */
    font-weight: bold; /* 글자 굵게 */
    font-family: sans-serif;
    /* text-align: center; 제거 또는 유지 (텍스트 자체 정렬) */
    white-space: nowrap; /* 텍스트가 줄바꿈되지 않도록 */
    z-index: 10; /* 다른 요소들 위에 표시 */
    opacity: 1; /* 항상 보이도록 */
    /* transition 제거 */
    pointer-events: none; /* 텍스트가 마우스 이벤트 방해하지 않도록 */
}

/* #blinking-text.visible 제거 */