@charset "utf-8";

/* 선명한 그리드 설정 (z-index 문제를 방지하기 위해 canvas 배경으로 강제 지정) */
.show-grid {
    /* 배경색을 짙게 하고 선을 밝게 하여 가시성 확보 */
    background-color: #111 !important; 
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.15) 1.5px, transparent 1.5px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.15) 1.5px, transparent 1.5px);
    background-size: 10% 5%; /* 10칸 20줄 표준 */
}

/* 게임 프레임: PC/모바일 동일한 디자인 (테두리 및 라운드) */
.game-frame {
    background: #000;
    border: 5px solid #333; /* 두꺼운 테두리 */
    border-radius: 10px;    /* 둥근 모서리 */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

#gameCanvas {
    display: block;
    image-rendering: pixelated; /* 블록 선명도 극대화 */
}

/* 기기별 크기 분리 (모양은 동일하게 유지) */

/* [모바일] 가로 꽉 차게 */
@media (max-width: 991.98px) {
    .game-frame {
        width: 100%;
        max-width: 360px; /* 모바일에서 너무 크지 않게 상한선 */
    }
    #gameCanvas {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 10 / 20;
        max-height: 60vh; /* 정보창 노출을 위해 길이 제한 */
    }
}

/* [PC] 고정 크기 */
@media (min-width: 992px) {
    .game-frame {
        width: 320px;
    }
    #gameCanvas {
        width: 310px !important; /* 프레임 내부 여백 감안 */
        height: 545px !important;
    }

}

/* 폰트 및 기타 */
.fw-mono { font-family: 'Courier New', Courier, monospace; }
.card { border-radius: 10px !important; }
[data-bs-theme="dark"] .game-frame { border-color: #444; }
[data-bs-theme="light"] .game-frame { border-color: #222; }



@keyframes popIn {
    0% {
        transform:translate(-50%, -60%) scale(0.9);
        opacity:0;
    }
    100% {
        transform:translate(-50%, -50%) scale(1);
        opacity:1;
    }
}

/* 게임 모달 - 배경색 유지 */
.tetris-game-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99999;
}

/* 모달 컨텐츠 - 위치/디자인 수치 고정, 색상만 대응 */
.tetris-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bs-body-bg);     /* 자동 배경색 */
    color: var(--bs-body-color);       /* 자동 글자색 */
    padding: 30px 20px;
    border-radius: 12px;
    text-align: center;
    width: 320px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    animation: popIn 0.3s ease;
    border: 1px solid var(--bs-border-color); /* 다크모드 가독성용 */
}

.tetris-modal-content h2 {
    font-size: 22px;
    margin-bottom: 15px;
    color: var(--bs-emphasis-color);   /* 테마별 강조색 */
}

.tetris-modal-content p {
    font-size: 16px;
    margin: 8px 0;
}

/* 확인 버튼 - 디자인 유지 */
.tetris-restart-btn {
    margin-top: 20px;
    padding: 12px 25px;
    background: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.tetris-restart-btn:hover {
    background: #45a049;
}