/* =============================================
   カラー数独 ゲームスタイル
   ============================================= */

body {
  font-size: 16px;
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  padding: 40px 0 60px;
}

/* --- ゲームヘッダー --- */
.game-header {
  text-align: center;
  margin-bottom: 32px;
}

.game-header h1 {
  font-size: 26px;
  color: #00293C;
  margin-bottom: 8px;
}

.game-header h1 .bi {
  color: var(--color-main);
  margin-right: 6px;
}

.game-header p {
  font-size: 14px;
  color: #555;
  line-height: 1.7;
}

/* --- ゲームエリア --- */
.game-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* --- 難易度 --- */
.difficulty {
  display: flex;
  gap: 8px;
}

.diff-btn {
  padding: 6px 20px;
  border: 2px solid #ccc;
  border-radius: 20px;
  background: #fff;
  color: #888;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.diff-btn:hover {
  border-color: var(--color-main);
  color: var(--color-main);
}

.diff-btn.active {
  background: var(--color-main);
  border-color: var(--color-main);
  color: #fff;
}

/* --- パレット --- */
.palette {
  display: flex;
  gap: 14px;
  align-items: center;
}

.color-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 4px solid transparent;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.color-btn:hover {
  transform: scale(1.08);
}

.color-btn.active {
  border-color: #333;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.12);
  transform: scale(1.15);
}

.color-btn[data-color="1"] { background: #E53935; }
.color-btn[data-color="2"] { background: #1E88E5; }
.color-btn[data-color="3"] { background: #43A047; }
.color-btn[data-color="4"] { background: #FB8C00; }

.color-btn.eraser {
  background: #f0f0f0;
  color: #666;
  border-color: #ccc;
}

.color-btn.eraser.active {
  border-color: #666;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
}

/* --- パズル番号 --- */
.puzzle-label {
  font-size: 13px;
  color: #888;
  letter-spacing: 0.05em;
}

/* --- グリッド --- */
.grid {
  --cell: clamp(58px, 17vw, 72px);
  display: inline-grid;
  grid-template-columns: repeat(4, var(--cell));
  grid-template-rows: repeat(4, var(--cell));
  border: 3px solid #333;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  transition: box-shadow 0.3s;
}

.grid.cleared {
  box-shadow: 0 0 0 4px #43A047, 0 4px 24px rgba(67,160,71,0.4);
}

/* --- セル --- */
.cell {
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  transition: filter 0.12s;
  position: relative;
}

.cell:hover:not(.given) {
  filter: brightness(0.92);
}

/* ボックス境界線（右） */
.cell:nth-child(4n+2) { border-right: 3px solid #555; }
.cell:nth-child(4n)   { border-right: none; }

/* ボックス境界線（下） */
.cell:nth-child(5),
.cell:nth-child(6),
.cell:nth-child(7),
.cell:nth-child(8) { border-bottom: 3px solid #555; }

/* 最終行は下線なし */
.cell:nth-child(13),
.cell:nth-child(14),
.cell:nth-child(15),
.cell:nth-child(16) { border-bottom: none; }

/* --- 色クラス --- */
.cell.color-red    { background: #E53935; }
.cell.color-blue   { background: #1E88E5; }
.cell.color-green  { background: #43A047; }
.cell.color-orange { background: #FB8C00; }

/* 空セルのホバー：選択中の色をうっすら予告 */
.cell.empty.hover-red    { background: rgba(229,57,53,0.15); }
.cell.empty.hover-blue   { background: rgba(30,136,229,0.15); }
.cell.empty.hover-green  { background: rgba(67,160,71,0.15); }
.cell.empty.hover-orange { background: rgba(251,140,0,0.15); }

/* --- 固定セル（問題として与えられた色） --- */
.cell.given {
  cursor: default;
}

.cell.given::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 2px solid rgba(255,255,255,0.55);
  border-radius: 3px;
  pointer-events: none;
}

/* --- コンフリクト（エラー） --- */
.cell.conflict {
  box-shadow: inset 0 0 0 3px #b71c1c;
  animation: conflict-pulse 0.7s ease-in-out infinite alternate;
}

@keyframes conflict-pulse {
  from { box-shadow: inset 0 0 0 3px rgba(183,28,28,0.6); }
  to   { box-shadow: inset 0 0 0 3px rgba(183,28,28,1); }
}

/* --- クリアアニメーション --- */
.cell.cleared-cell {
  animation: cell-pop 0.4s ease-out forwards;
}

@keyframes cell-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

/* --- メッセージ --- */
.game-message {
  font-size: 18px;
  font-weight: bold;
  min-height: 28px;
  text-align: center;
  letter-spacing: 0.05em;
}

.game-message.success { color: #43A047; }
.game-message.error   { color: #E53935; }

/* --- コントロールボタン --- */
.controls {
  display: flex;
  gap: 12px;
}

.controls button {
  padding: 10px 22px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.15s, transform 0.1s;
}

.controls button:hover {
  transform: translateY(-1px);
}

#reset-btn {
  background: #eeeeee;
  color: #444;
}

#reset-btn:hover { background: #e0e0e0; }

#next-btn {
  background: var(--color-main);
  color: #fff;
}

#next-btn:hover { background: #006d87; }