:root{
  --bg: #E0CDB2;
  --panel: #E0CDB2;
  --cell-size: 30px;
  --font-sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  background:#424658;
  color:#424658;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:20px;
}

#app{
  width:100%;
  max-width:980px;
  background:var(--panel);
  border-radius:10px;
  box-shadow:0 8px 24px rgba(12,20,40,0.12);
  padding:14px;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
  color:#424658;
}
.title{font-weight:700}
.controls{display:flex; gap:8px; align-items:center}
.controls select, .controls input{padding:6px; border-radius:6px; border:1px solid #c8d6e5}
.controls label{color:#424658; font-weight:600; margin-left:8px}
.controls button{padding:6px 10px; border-radius:6px; border: none; background:#81a3c6; color:white; cursor:pointer}

.statusbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:3.5px;
  background:linear-gradient(180deg,#ffffff,#eef6ff);
  border-radius:8px;
  margin-bottom:12px;
}
.counter, .timer{font-weight:600}
.face{
  cursor:pointer;
  font-size:14px;
  padding:4.2px 7px;
  border-radius:8px;
  background:#fff;
  border:1px solid #d0e3ff;
  user-select:none;
}

.minesweeper {
  font-family: sans-serif;
  text-align: center;
  color: #424658;
  font-size: 2em;
  font-weight: bold;
}

.minesweeper a {
  margin-left: 0.5rem;
  font-family: sans-serif;
  font-size: 0.5em;
  font-style: italic;
  text-decoration: underline;
  color: #424658;
  transition: color 0.3s ease;
}

.minesweeper a:hover {
  color: rgb(0, 51, 255);
}

.game-area{
  display:grid;
  gap:3px;
  justify-content:center;
  margin:0 auto 12px;
  padding:8px;
  background:#424658;
  border-radius:8px;
}

/* cells */
.cell{
  width:var(--cell-size);
  height:var(--cell-size);
  display:inline-grid;
  place-items:center;
  font-weight:700;
  border-radius:4px;
  background:linear-gradient(180deg,#81a3c6);
  cursor:pointer;
  user-select:none;
  border:1px solid rgba(12, 12, 12, 0.936);
  font-size:14px;
}
.cell.revealed{
  background:linear-gradient(180deg,#e1e6eb,#eef6ff);
  cursor:default;
  box-shadow:inset 0 0 0 1px rgba(12,24,40,0.03);
}
.cell.flagged{background:linear-gradient(180deg,#ffecec,#ffefef)}
.cell.mine{background:linear-gradient(180deg,#ffdede,#ffeaea)}

.cell.number-1{color:#0d47a1}
.cell.number-2{color:#2e7d32}
.cell.number-3{color:#c62828}
.cell.number-4{color:#3b2164}
.cell.number-5{color:#7b2e2e}
.cell.number-6{color:#00796b}
.cell.number-7{color:#212121}
.cell.number-8{color:#9e9e9e}

.footer{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.help{flex:1; color:#424658}
.scores{width:220px}
.scores h3{margin-top:0}
.scores ul{list-style:none; padding:0; margin:0}
.scores li{background:#fff; padding:6px 8px; margin-bottom:6px; border-radius:6px; border:1px solid #e6eef8; font-size:13px}

/* utility */
.hidden{display:none}

/* responsive: adjust cell size on narrow screens */
@media (max-width:520px){
  :root{--cell-size:28px}
  .controls{flex-wrap:wrap}
  .scores{display:none}
}