/* ===== 기본 스타일 ===== */
body {
  margin: 0;
  padding: 0;
  background: #1e1e1e;
  color: #fff;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

#wrapper {
  text-align: center;
}
div#aiNotice {
    padding-bottom: 10px;
}
button {
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.1s;
  font-size: 16px;
  padding: 10px 18px;
  /* 배경색과 테두리 기본값 제거 후, 개별 설정 */
}

button:active {
  transform: translateY(2px);
  box-shadow: 0 1px #222;
}

/* ===== 카드 스타일 ===== */
.card {
  background: #2c2c2c;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  margin-bottom: 15px;
}

/* ===== 언어 선택 ===== */
#langSelector button {
  margin: 3px;
  padding: 6px 12px;
  font-size: 14px;
  background: #1e1e1e;       /* 배경을 페이지 배경과 동일하게 */
  color: #fff;
  border: 1px solid #888;    /* 테두리 회색 */
}

#langSelector button:active {
  transform: translateY(2px);
  border-color: #aaa;         /* 눌렀을 때 조금 밝은 회색 */
}

/* ===== 컨테이너 ===== */
#container {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: flex-start;
}
.next-container {
    padding: 10px;
    background: #0d0d0d;
    border-radius: 12px;
}

/* ===== 게임판 ===== */
.game-grid {
  display: grid;
  grid-template-rows: repeat(20, 30px);
  grid-template-columns: repeat(10, 30px);
  gap: 2px;
  background: #222;
  padding: 5px;
  border-radius: 10px;
  box-shadow: inset 0 0 8px #000;
}

/* ===== 사이드바 ===== */
#sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 281px;
    text-align: left;
    font-size: 15px;
}
#status{
 text-align: center;
font-size : 18px;
    padding-bottom: 10px;
}
#lastScore {
 text-align: center;
font-size : 18px;
padding-bottom: 10px;
    color: red;
}
#gameDesc{
padding-top: 10px;
}
.next-grid {
  display: grid;
  grid-template-rows: repeat(4, 25px);
  grid-template-columns: repeat(6, 25px);
  gap: 2px;
  background: #222;
  padding: 5px;
  border-radius: 8px;
  box-shadow: inset 0 0 6px #000;
  width: auto;
}
#nextBlock {
    display: grid;
    grid-template-columns: repeat(6, 20px); /* NEXT_COLS */
    grid-template-rows: repeat(4, 20px);    /* NEXT_ROWS */
    gap: 2px;

    padding: 20px; /* 🔥 1칸(20px) × 상하좌우 = 총 2칸 증가 효과 */

    background: #111;
    border: 1px solid #444;
    border-radius: 10px;

    box-shadow:
        inset 0 0 8px rgba(255,255,255,0.05),
        0 4px 10px rgba(0,0,0,0.6);

    justify-content: center;
    align-content: center;
}

/* ===== 블록 스타일 ===== */
.cell, .smallCell {
  border-radius: 4px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.6),
              inset -2px -2px 6px rgba(255,255,255,0.2),
              inset 2px 2px 4px rgba(0,0,0,0.5);
  transition: all 0.15s linear;
}

/* .cell { width: 30px; height: 30px; } */
.cell {
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border-radius: 6px;

    background: #222;
    border: 1px solid rgba(255,255,255,0.08);

    box-shadow:
        inset 2px 2px 0 rgba(255,255,255,0.25),   /* 상단 하이라이트 */
        inset -2px -2px 0 rgba(0,0,0,0.35),       /* 하단 음영 */
        0 2px 4px rgba(0,0,0,0.4);                /* 외부 그림자 */
}

/* .smallCell { width: 25px; height: 25px; } */
/* .smallCell {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    margin: 1px;

    background: #333;
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.25),
        inset -1px -1px 0 rgba(0,0,0,0.3);
} */
.smallCell {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: #333;

    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.25),
        inset -1px -1px 0 rgba(0,0,0,0.3);
}

.smallCell.I { background: linear-gradient(145deg, #6fe7ff, #0096c7); }
.smallCell.O { background: linear-gradient(145deg, #fff1a8, #f1c40f); }
.smallCell.T { background: linear-gradient(145deg, #caa8ff, #8e44ad); }
.smallCell.S { background: linear-gradient(145deg, #7dff9a, #27ae60); }
.smallCell.Z { background: linear-gradient(145deg, #ff8b8b, #c0392b); }
.smallCell.J { background: linear-gradient(145deg, #8ab6ff, #2c3eeb); }
.smallCell.L { background: linear-gradient(145deg, #ffd28a, #e67e22); }


/* 블록 그라데이션 */
/* .I { background: linear-gradient(145deg,#00f0f0,#009999);}
.O { background: linear-gradient(145deg,#e6c300,#b38f00);}
.T { background: linear-gradient(145deg,#a000f0,#7000a0);}
.S { background: linear-gradient(145deg,#00f000,#009900);}
.Z { background: linear-gradient(145deg,#f00000,#990000);}
.J { background: linear-gradient(145deg,#0000f0,#0000f0);}
.L { background: linear-gradient(145deg,#f0a000,#b07000);} */
/* I 블록 */
.cell.I {
    background: linear-gradient(145deg, #6fe7ff, #0096c7);
}

/* O 블록 */
.cell.O {
    background: linear-gradient(145deg, #fff1a8, #f1c40f);
}

/* T 블록 */
.cell.T {
    background: linear-gradient(145deg, #caa8ff, #8e44ad);
}

/* S 블록 */
.cell.S {
    background: linear-gradient(145deg, #7dff9a, #27ae60);
}

/* Z 블록 */
.cell.Z {
    background: linear-gradient(145deg, #ff8b8b, #c0392b);
}

/* J 블록 */
.cell.J {
    background: linear-gradient(145deg, #8ab6ff, #2c3eeb);
}

/* L 블록 */
.cell.L {
    background: linear-gradient(145deg, #ffd28a, #e67e22);
}

/* .shadow {opacity:0.5; background: rgba(255,255,255,0.3); filter: brightness(1.4);} */
.cell.shadow {
    background: rgba(255,255,255,0.15);
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.4),
        inset -1px -1px 0 rgba(0,0,0,0.2);
    border: 1px dashed rgba(255,255,255,0.3);
}
.line-clear {animation: blink 0.2s ease;}
@keyframes blink { 0%{background:#fff;} 50%{background:#222;} 100%{background:#fff;} }

/* ===== 정보 패널 ===== */
.info-panel {
  margin-top: 6px;
  font-size: 16px;
  text-align: center;
}

.small-text {
  font-size: 14px;
  color: #ccc;
}

/* ===== 오버레이 ===== */
.overlay {
  position: absolute;
  top:0; left:0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  display: none;
}

.overlay button {
  margin-top: 15px;
}

/* ===== 메인 버튼 ===== */
#startBtn, #pauseBtn {
  background: #1e1e1e;       /* 배경을 페이지 배경과 동일하게 */
  border: 1px solid #888;    /* 테두리 회색 */
  color: #fff;
  width: 80%;
}

#startBtn:active, #pauseBtn:active {
  transform: translateY(2px);
  border-color: #aaa;
}

/* ===== 방문자 통계 ===== */
#visitorStats {
  font-size: 14px;
  color: #ffd700;
  text-align: center;
  margin-top: 10px;
}


/* ===== 낙하블록 그림자 ===== */
.shadow {
  opacity: 0.8; /* 그림자 투명도 약간 더 밝게 */
  background: rgba(255, 255, 255, 0.6); /* 밝은 흰색 계열로 */
  filter: brightness(1.8); /* 약간 더 밝게 */
  box-shadow: 0 0 6px rgba(255,255,255,0.6) inset; /* 은은하게 안쪽 그림자 */
}