body { 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        margin: 0; 
        font-family: 'Segoe UI', sans-serif; 
    }
    h1 { 
        margin: 10px 0; 
    }
    #controls { 
        display: flex; 
        flex-wrap: wrap; 
        justify-content: center; 
        gap: 8px; 
        margin-bottom: 8px; 
    }
    #controls label { 
        font-size: 0.9rem; 
    }
    /* 승패 기록 영역 스타일 */
    #score-board {
        width: 150px; 
        margin-bottom: 15px;
        font-size: 1.1em;
        font-weight: bold;
        color: #333;
        border: 1px solid #ccc;
        padding: 5px 10px;
        border-radius: 5px;
        background-color: #fff;
    }
    canvas { 
        background: #deb887; 
        border: 2px solid #333; 
        touch-action: none; 
        width: 600px; 
        height: 600px; 
    }
    @media (max-width: 600px) { 
        canvas { 
            width: 92vw; 
            height: 92vw; 
        } 
    }
    /* 삼삼수 경고 메시지 스타일 */
    #message {
        height: 30px; 
        margin-bottom: 10px;
        font-weight: bold;
        color: #d9534f; /* 붉은색 경고 */
        font-size: 1.2rem;
        opacity: 0;
        transition: opacity 0.3s;
    }
    .visible {
        opacity: 1 !important;
    }

        /* 1. 테이블 전체 스타일 */
        .rounded-table {
            /* 핵심: 모서리를 둥글게 만듭니다. */
            border-radius: 15px; 
            /* 내부 셀 간격을 없애고 */
            border-spacing: 0; 
            /* border-radius가 작동하도록 separate로 설정합니다. */
            border-collapse: separate; 
            background-color: #FFFFFF;
            
            width: 100%;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            overflow: hidden; /* 모서리 밖으로 튀어나온 셀 경계를 숨깁니다. (중요) */
        }

        /* 2. 셀(th, td) 공통 스타일 */
        .rounded-table th, 
        .rounded-table td {
            padding: 12px 15px;
            text-align: left;
            /* 내부 경계를 아래쪽과 오른쪽만 만듭니다. */
            border-bottom: 1px solid #ddd;
            border-right: 1px solid #ddd;
        }

        /* 3. 불필요한 내부 경계 제거 */
        /* 마지막 열의 오른쪽 경계를 제거합니다. */
        .rounded-table th:last-child,
        .rounded-table td:last-child {
            border-right: none;
        }

        /* 마지막 행의 아래쪽 경계를 제거합니다. */
        .rounded-table tr:last-child td {
            border-bottom: none;
        }

        /* 4. 개별 모서리 둥글게 만들기 (선택 사항) */
        /* <table>에 overflow: hidden;을 적용하면 아래 셀 경계 설정이 필요 없을 수도 있습니다. */
        
        /* 둥근 테이블의 왼쪽 위 모서리 */
        .rounded-table tr:first-child th:first-child {
            border-top-left-radius: 15px;
        }
        /* 둥근 테이블의 오른쪽 위 모서리 */
        .rounded-table tr:first-child th:last-child {
            border-top-right-radius: 15px;
        }
        
        /* 둥근 테이블의 왼쪽 아래 모서리 */
        .rounded-table tr:last-child td:first-child {
            border-bottom-left-radius: 15px;
        }
        /* 둥근 테이블의 오른쪽 아래 모서리 */
        .rounded-table tr:last-child td:last-child {
            border-bottom-right-radius: 15px;
        }