:root { --bg:#e5e5e5; --cell:#c0c0c0; --cell-light:#fff; --cell-dark:#808080; --ink:#222; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; }
body {
  font:16px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg); color:var(--ink);
  display:flex; flex-direction:column; align-items:center; padding:16px 10px 40px;
  touch-action:manipulation; user-select:none; -webkit-user-select:none;
}
h1 { font-size:22px; margin:4px 0 2px; }
.tag { color:#555; font-size:14px; margin:0 0 12px; text-align:center; }
.card {
  background:#f8f8f8; border:2px solid #999; border-radius:10px; padding:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  background:#000; border:3px solid; border-color:#999 #fff #fff #999;
  padding:8px 10px; margin-bottom:12px; border-radius:4px;
}
.counter {
  font:700 22px/1 "Courier New",monospace; color:#f00; background:#000;
  padding:2px 8px; letter-spacing:1px;
}
.smiley {
  font-size:26px; cursor:pointer; background:var(--cell);
  border:3px solid; border-color:#fff #808080 #808080 #fff; padding:0 8px; line-height:1.2;
}
.diffs { display:flex; gap:8px; margin:12px 0; }
.diff-btn {
  flex:1; font-size:14px; font-weight:600; padding:10px 0; cursor:pointer;
  background:var(--cell); border:3px solid; border-color:#fff #808080 #808080 #fff;
}
.diff-btn.active { background:#d5e8d4; }
#board {
  display:grid; grid-template-columns:repeat(var(--cols,9), 1fr);
  grid-auto-rows:1fr; gap:1px; background:#999; border:3px solid;
  border-color:#fff #808080 #808080 #fff; margin:0 auto;
}
.cell {
  width:30px; height:30px; background:var(--cell); display:flex; align-items:center;
  justify-content:center; font-weight:700; cursor:pointer; font-size:15px;
  border:2px solid; border-color:#fff #808080 #808080 #fff; line-height:1;
}
.cell.revealed { background:#d8d8d8; border:1px solid #ccc; }
.cell.mine { background:#ffc0c0; }
.cell.n1 { color:#0000ff; } .cell.n2 { color:#008000; } .cell.n3 { color:#ff0000; }
.cell.n4 { color:#000080; } .cell.n5 { color:#800000; } .cell.n6 { color:#008080; }
.cell.n7 { color:#000; } .cell.n8 { color:#808080; }
#outcome { min-height:22px; margin-top:10px; text-align:center; font-weight:600; }
.hint { color:#777; font-size:12px; margin-top:8px; text-align:center; }
footer { margin-top:28px; color:#777; font-size:12px; text-align:center; max-width:640px; }
footer a { color:#1565c0; }
@media (max-width:480px) {
  .cell { width:min(26px, calc((100vw - 56px) / var(--cols,9))); height:min(26px, calc((100vw - 56px) / var(--cols,9))); font-size:13px; }
  h1 { font-size:19px; }
}