body { 
    margin: 0; 
    display: flex; 
    background-color: #1a1a1a; 
    color: white; 
    font-family: 'Segoe UI', sans-serif; 
    overflow: hidden; 
    height: 100vh; 
    position: relative; 
}

/* 왼쪽 사이드바 (점수, 넥스트, 홀드) */
#left-sidebar { 
    width: 140px; 
    background-color: #262626; 
    border-right: 2px solid #444; 
    display: flex; 
    flex-direction: column; 
    padding: 15px; 
    box-sizing: border-box; 
    z-index: 10; 
    overflow-y: auto; 
}
#status-panel, #next-mino-panel, #hold-mino-panel { 
    background: #111; 
    padding: 10px; 
    border-radius: 8px; 
    margin-bottom: 15px; 
    text-align: center; 
}
#score { 
    font-size: 24px; 
    color: #0f0; 
    font-weight: bold; 
    margin-top: 5px; 
}

/* 2D 미노 렌더링 그리드 */
#next-list, #hold-list { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    align-items: center; 
    margin-top: 10px; 
    min-height: 40px; 
    justify-content: center; 
}
.next-preview-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 12px); 
    grid-template-rows: repeat(2, 12px); 
    gap: 1px; 
}
.preview-cell { 
    width: 12px; 
    height: 12px; 
    background: transparent; 
}
.preview-filled { 
    border: 0.5px solid rgba(0,0,0,0.3); 
}

/* 중앙 3D 뷰 */
#game-container { 
    flex: 1; 
    height: 100vh; 
    position: relative; 
}

/* 오른쪽 사이드바 (단면도 레이어) */
#right-sidebar { 
    width: 250px; 
    background-color: #262626; 
    border-left: 2px solid #444; 
    display: flex; 
    flex-direction: column; 
    padding: 10px; 
    box-sizing: border-box; 
    z-index: 10; 
    overflow-y: auto; 
}
#layers-wrapper { 
    display: grid; 
    gap: 8px; 
    flex-grow: 1; 
}
.layer-view { 
    background-color: #333; 
    padding: 5px; 
    border-radius: 6px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
}
.layer-label { 
    font-size: 11px; 
    color: #aaa; 
    margin-bottom: 3px; 
    font-weight: bold; 
}
.grid-2d { 
    display: grid; 
    gap: 1px; 
    background-color: #444; 
}
.cell { 
    background-color: #111; 
}

/* 화면 덮는 오버레이 (메뉴 등) */
.overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.85); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    z-index: 100; 
}
.overlay h1 { 
    font-size: 50px; 
    margin-bottom: 20px; 
    letter-spacing: 2px; 
}
.overlay button { 
    padding: 15px 30px; 
    font-size: 20px; 
    font-weight: bold; 
    color: white; 
    background: #333; 
    border: 2px solid #555; 
    border-radius: 8px; 
    cursor: pointer; 
    margin: 10px; 
    transition: 0.2s; 
}
.overlay button:hover { 
    background: #fff; 
    color: #000; 
}
.sub-btn {
    border-color: #aaa !important; 
    font-size: 16px !important; 
    padding: 10px 20px !important; 
}

/* 설정창 및 조작법 UI */
.settings-panel { 
    background: #222; 
    border: 1px solid #444; 
    border-radius: 10px; 
    padding: 30px; 
    margin-bottom: 20px; 
    width: 320px; 
}
.setting-row { 
    display: flex; 
    flex-direction: column; 
    margin-bottom: 20px; 
    font-size: 16px; 
    width: 100%; 
}
.setting-row div { 
    display: flex; 
    justify-content: space-between; 
    width: 100%; 
    margin-bottom: 8px; 
    font-weight: bold; 
}
.setting-row input[type=range] { 
    width: 100%; 
    cursor: pointer; 
    accent-color: #0cf; 
}
.val { 
    color: #0cf; 
}
.controls-text {
    text-align: left; 
    line-height: 1.6; 
    font-size: 16px;
}
.controls-text p {
    margin-top: 0;
}
.highlight-text {
    color: #0cf; 
    font-size: 18px;
}