/* games/minesweeper/style.css */

.difficulty-bar {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.mine-tip {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-bottom: 12px;
}

.mine-board {
  --cols: 9;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 2px;
  width: 100%;
}

/* 高級（16×30）：gap 縮 1px，格子等比縮放填滿容器，不捲動 */
.mine-board[data-level="hard"] {
  gap: 1px;
}
/* 高級模式：棋盤容器撐寬至 940px，桌面充分利用畫面空間 */
.game-canvas-wrap:has(.mine-board[data-level="hard"]) {
  max-width: 940px;
}

.mine-cell {
  min-width: 0;
  aspect-ratio: 1;
  border-radius: 5px;
  border: 2px solid #bbb;
  background: #d8d8c8;
  font-size: clamp(8px, calc(55vw / var(--cols)), 20px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;  /* 數字等寬，避免視覺大小不一 */
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;           /* 防止 emoji 撐破格子 */
  transition: background 0.1s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.mine-cell:hover:not(.revealed) {
  background: #c8c8b8;
}

.mine-cell.revealed {
  background: #f0f0e0;
  border-color: #ccc;
  cursor: default;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.1);
}

.mine-cell.flagged {
  background: #fff3cd;
  border-color: #ffc107;
  font-size: calc(clamp(8px, calc(55vw / var(--cols)), 20px) * 0.78); /* 旗幟 emoji 略小，與數字視覺齊 */
}

.mine-cell.exploded {
  background: #ffcdd2;
  border-color: #D32F2F;
}

/* Chord：已翻開數字格的 hover 提示 */
.mine-cell.chord-hint {
  cursor: pointer;
}
.mine-cell.chord-hint:hover {
  background: #e8e8d0;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.15);
}

/* Chord 失敗閃紅警示 */
.mine-cell.chord-fail {
  background: #ffb3b3 !important;
  border-color: #D32F2F !important;
  animation: chord-fail-flash 0.6s ease;
}
@keyframes chord-fail-flash {
  0%, 100% { background: #f0f0e0; }
  30%       { background: #ffb3b3; }
  60%       { background: #ffb3b3; }
}

/* 長按視覺回饋（手機插旗中…） */
.mine-cell.long-pressing {
  background: #ffe082 !important;
  border-color: #ffa000 !important;
  transform: scale(0.88);
  transition: transform 0.15s, background 0.15s;
}

/* 手機高級模式：允許橫向捲動，避免格子過小 */
@media (max-width: 600px) {
  .mine-board[data-level="hard"] {
    min-width: 480px;  /* 保持最小格子尺寸，容器可橫卷 */
  }
  .game-canvas-wrap:has(.mine-board[data-level="hard"]) {
    overflow-x: auto;
    max-width: 100%;
  }
}