/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
  transition: background 0.5s ease;
  overflow: hidden;
}

.dark-mode body {
  background: linear-gradient(135deg, #2c3e50, #4ca1af);
  color: #f0f0f0;
}

/* Container */
.game-container {
  background-color: rgba(255,255,255,0.95);
  border-radius: 25px;
  padding: 30px 40px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  text-align: center;
  width: 95%;
  max-width: 750px;
  transition: all 0.3s ease-in-out;
  position: relative;
}

.dark-mode .game-container { background-color: rgba(30,30,30,0.9); color: #f0f0f0; }

h1 { margin-bottom: 20px; font-size: 2.5em; text-shadow: 1px 1px #fff; }

/* Controls */
.controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.level-select { display: flex; align-items: center; gap: 5px; }
.buttons-top { display: flex; align-items: center; gap: 10px; }

/* Buttons & Select */
select, button {
  padding: 8px 14px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

button:hover, select:hover { transform: scale(1.05); }

#mode-toggle { background-color: #3498db; color: white; }
#new-game { background-color: #2ecc71; color: white; }
#check-btn, #hint-btn, #solve-btn { background-color: #4CAF50; color: white; padding: 12px 25px; border-radius: 12px; font-size: 16px; transition: all 0.3s; }
#check-btn:hover, #hint-btn:hover, #solve-btn:hover { transform: scale(1.05); background-color: #45a049; }

/* Timer & Score */
#timer { font-weight: bold; font-size: 16px; }
#scoreboard { display: flex; justify-content: space-between; margin: 10px 0; font-weight: bold; }

/* Sudoku Grid */
#sudoku-container {
  display: grid;
  grid-template-columns: repeat(9, 60px);
  grid-template-rows: repeat(9, 60px);
  gap: 2px;
  justify-content: center;
  margin: 20px 0;
}

input {
  width: 100%;
  height: 100%;
  font-size: 22px;
  text-align: center;
  border: 1px solid #bbb;
  border-radius: 12px;
  transition: all 0.2s ease-in-out;
  background-color: #fff;
}

.dark-mode input { background-color: #444; color: #f0f0f0; }

input:focus { outline: none; border: 2px solid #4CAF50; box-shadow: 0 0 10px #4CAF50; }
input:disabled { font-weight: bold; background-color: #ddd; color: #222; }

#sudoku-container input.block-shade { background-color: #f0f0f0; }
.dark-mode #sudoku-container input.block-shade { background-color: #555; }

#sudoku-container .thick-right { border-right: 3px solid #333; }
#sudoku-container .thick-bottom { border-bottom: 3px solid #333; }

/* Buttons & Message */
.buttons { display: flex; justify-content: center; gap: 15px; margin-bottom: 10px; }
#message { margin-top: 15px; font-weight: bold; font-size: 18px; min-height: 24px; transition: all 0.3s ease; }

/* Leaderboard */
#leaderboard-container { margin-top: 20px; }
#leaderboard-container ol { padding-left: 20px; text-align: left; }

/* Particle canvas */
#particle-canvas { position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }