:root {
            --bg-color: #020617;
        }

        #lobby {
            position: fixed;
            inset: 0;
            background: radial-gradient(circle at center, #1e293b 0%, #020617 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 600;
        }

       #game-container {
    display: none;
    width: 100%;
    flex: 0;            /* 중요: 남은 수직 공간을 모두 차지 */
    flex-direction: column;
    min-height: 0;      /* 내부 요소가 넘칠 때 컨테이너가 늘어나는 것 방지 */
}

.score-header {
    width: 100%;
    background: rgba(15, 23, 42, 0.98);
    border-top: 2px solid #334155; /* 위쪽 테두리로 변경 */
    padding: 8px 0;
    z-index: 100;
    flex-shrink: 0;     /* 화면이 작아져도 점수판 높이는 유지 */
}

        .scoreboard-wrapper {
            width: 100%;
            overflow-x: auto;
            padding: 0 10px;
            scrollbar-width: none;
        }
        .scoreboard-wrapper::-webkit-scrollbar { display: none; }

        .frames-container {
            display: flex;
            min-width: 600px;
            gap: 4px;
            justify-content: center;
        }

        .frame-box {
            flex: 1;
            min-width: 55px;
            background: #1e293b;
            border-radius: 6px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            font-size: 0.75rem;
            border: 2px solid transparent;
        }

        .frame-box.active {
            border-color: #fbbf24;
            box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
        }

        .frame-label {
            background: #334155;
            text-align: center;
            padding: 2px 0;
            font-weight: bold;
            color: #94a3b8;
        }

        .shot-area {
            display: flex;
            height: 22px;
            border-bottom: 1px solid #334155;
        }

        .shot-val {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            border-right: 1px solid #334155;
            font-weight: 800;
        }

        .frame-total {
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fbbf24;
            font-weight: 900;
        }

.canvas-area {
    position: relative;
    flex: 1;            /* 점수판 높이를 제외한 나머지 공간을 꽉 채움 */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

 canvas {
    max-height: 100%;   /* 점수판을 밀어내지 않도록 높이 제한 */
    max-width: 100%;
    aspect-ratio: 5 / 9;
    object-fit: contain;
    touch-action: none;
}

        #power-meter {
            position: absolute;
            right: 25px;
            bottom: 60px;
            width: 14px;
            height: 180px;
            background: #1e293b;
            border-radius: 7px;
            overflow: hidden;
            display: none;
            border: 2px solid #475569;
        }
        #power-fill {
            position: absolute;
            bottom: 0;
            width: 100%;
            background: linear-gradient(to top, #22c55e, #eab308, #ef4444);
        }

        #overlay {
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,0.9);
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        .btn {
            background: #3b82f6;
            padding: 40px 48px;
            border-radius: 14px;
            font-weight: bold;
            transition: all 0.2s;
        }
        .btn:active { transform: scale(0.95); }

        #turn-indicator {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            padding: 6px 24px;
            border-radius: 24px;
            font-weight: 900;
            z-index: 10;
        }