/* css/game.css */
/* Game Container and Ball Styles */
.ball {
    border-radius: 50%;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7); /* 그림자 진하게 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 그림자 강조 */
    z-index: 15;
    line-height: 1.1;
    text-align: center;
    margin: 2px;
    transition: transform 0.05s linear; /* 회전 애니메이션 유지 */
    border: 3px solid transparent; /* 테두리 두께 증가 */
    box-sizing: border-box; /* 너비/높이에 테두리 포함 */
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}
.ball-rank { font-size: 8px; display: block; margin-top: -2px; }
.ball-id-emoji { font-size: 10px; display: block; margin-top: 2px;}
.ball-emoji { font-size: 9px; margin-left: 1px; }
.ball-team { font-size: 7px; display: block; margin-top: 1px; font-weight: normal; color: #eee; }
.ball-second-chance-tag { font-size: 7px; display: block; margin-top: 1px; font-weight: normal; color: #ffeb3b; text-shadow: 0 0 3px black;}
.ball-second-chance-attempts { font-size: 7px; display: block; margin-top: 1px; font-weight: normal; color: #a8dadc; text-shadow: 0 0 3px black;}

.game-container {
    width: 600px; /* 고정 너비 */
    height: 600px; /* 고정 높이 */
    background-color: #f0f4f8; /* 더 밝은 배경색 */
    border: 2px solid #a7d9f7; /* 테두리 색상 변경 */
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    cursor: default;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05); /* 내부 그림자 */
}
.game-container.placement-mode { cursor: crosshair; }

#staging-area-div {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 450px;
    height: 100px;
    background-color: rgba(100, 116, 139, 0.2);
    border: 2px dashed #64748b;
    border-radius: 8px;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#chute-entry-hole-visual {
    width: 60px; /* 구멍 너비 증가 */
    height: 12px; /* 구멍 높이 증가 */
    background-color: rgba(0,0,0,0.3);
    border-radius: 4px;
    position: absolute;
    bottom: -6px; /* 구멍이 약간 더 돌출되도록 */
    left: 50%;
    transform: translateX(-50%);
}

#ball-chute-container {
    position: absolute;
    top: 135px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 150px;
    background-color: rgba(156, 163, 175, 0.4);
    clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 20% 100%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

#chute-door {
    width: calc(80% - 20%);
    left: 20%;
    z-index: 11;
    position: absolute;
    bottom: 0;
    height: 5px; /* 문 두께 증가 */
    background-color: #475569; /* 진한 슬레이트 색상 */
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    transition: transform 500ms ease-in-out, opacity 500ms ease-in-out;
}
#chute-door.door-open { transform: translateY(100%) scaleY(0.7); opacity: 0; } /* 문 열림 애니메이션 */

#countdown-display {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5.5rem; /* 폰트 크기 증가 */
    font-weight: 800; /* 더 굵게 */
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.7); /* 더 어두운 배경 */
    z-index: 30;
    display: none;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.5); /* 그림자 추가 */
}
.timer-display {
    font-size: 1.5rem; /* 폰트 크기 증가 */
    font-weight: 700;
    text-align: center;
    margin: 5px 0; /* 상하 여백 조정 */
    color: #3f51b5; /* 진한 파란색 */
    background-color: #e8eaf6; /* 연한 배경 */
    padding: 8px 15px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Obstacle Styles */
.obstacle {
    position: absolute;
    background-color: #607d8b; /* 더 차분한 회색 */
    border: 1px solid #455a64;
    z-index: 6;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.25);
    cursor: grab; /* grab 커서 */
    transition: border-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}
.obstacle:active {
    cursor: grabbing; /* grabbing 커서 */
    border-color: #2196f3; /* 드래그 시 파란색 테두리 */
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.5);
}
.obstacle.triangle-right { clip-path: polygon(0% 100%, 100% 0%, 100% 100%); }
.obstacle.triangle-left { clip-path: polygon(0% 0%, 0% 100%, 100% 100%); }
.obstacle.oval { border-radius: 50%; }

#finish-gate-draggable {
    position: absolute;
    width: 120px; /* 너비 증가 */
    height: 15px; /* 높이 증가 */
    background-color: #ffd600; /* 더 선명한 노란색 */
    border: 2px solid #ffab00; /* 더 선명한 주황색 */
    cursor: grab;
    z-index: 7;
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(255,221,0,0.8); /* 그림자 강조 */
    transition: box-shadow 0.1s ease-in-out;
}
#finish-gate-draggable:active { 
    cursor: grabbing; 
    box-shadow: 0 0 15px rgba(255,221,0,1); /* 드래그 시 그림자 더 강조 */
}

#obstacle-palette {
    position: absolute;
    top: 15px;
    right: -215px; /* 숨겨진 상태 */
    width: 140px; /* 너비 증가 */
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    z-index: 20;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: right 0.3s ease-in-out;
}
#obstacle-palette.visible { right: 15px; } /* 보이게 할 때 위치 */

#trash-can {
    position: absolute;
    bottom: 15px; /* 하단 여백 증가 */
    right: 15px; /* 우측 여백 증가 */
    font-size: 32px; /* 아이콘 크기 증가 */
    cursor: pointer;
    z-index: 25;
    display: none; /* JS에서 토글 */
    padding: 8px;
    background-color: rgba(255,255,255,0.7); /* 배경 추가 */
    border-radius: 50%; /* 원형 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    color: #666;
}
#trash-can.visible { display: block; }
#trash-can.over-trash {
    color: #ef5350; /* 빨간색으로 변경 */
    transform: scale(1.1); /* 확대 */
    background-color: rgba(255,235,238,0.9); /* 연한 빨강 배경 */
}