.mine-stage{overflow:hidden;background:#0e141b}
.scroll{
  overflow:auto;
  max-width:100%;
  padding:10px;
  scrollbar-width:thin;
  scrollbar-color:#2b3947 transparent;
}
.scroll::-webkit-scrollbar{height:8px;width:8px}
.scroll::-webkit-scrollbar-thumb{background:#2b3947;border-radius:8px}

.grid{
  display:grid;
  grid-template-columns:repeat(var(--cols, 9), var(--cs, 26px));
  gap:2px;
  width:max-content;
  margin:0 auto;
}

.cell{
  width:var(--cs, 26px);
  height:var(--cs, 26px);
  padding:0;
  border:0;
  border-radius:4px;
  background:linear-gradient(180deg,#2a3543,#1b242e);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 1px 0 rgba(0,0,0,.35);
  color:transparent;
  font-size:calc(var(--cs, 26px) * .5);
  font-weight:700;
  font-family:inherit;
  line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  user-select:none;-webkit-user-select:none;
  touch-action:manipulation;
  transition:background .1s ease,transform .06s ease;
}
.cell:hover{filter:brightness(1.18)}
.cell:active{transform:scale(.97)}
.cell.open{
  background:#111a22;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
  cursor:default;
  filter:none;
}
.cell.open:hover{filter:none}
.cell.flag{
  color:#f0abfc;
  background:linear-gradient(180deg,#2c2238,#1d1727);
  font-size:calc(var(--cs, 26px) * .52);
}
.cell.mine{background:#26141c;color:#ff8a9a;font-size:calc(var(--cs, 26px) * .46)}
.cell.boom{background:linear-gradient(180deg,#4a1622,#33101a);color:#ff6f86}
.cell.wrong{background:#2a1a1a;color:#ff8a8a;text-decoration:line-through}
.cell.n1{color:#8ab4ff}
.cell.n2{color:#7ce38b}
.cell.n3{color:#ff8b9a}
.cell.n4{color:#b39dff}
.cell.n5{color:#ffbd7a}
.cell.n6{color:#5eead4}
.cell.n7{color:#ffd166}
.cell.n8{color:#d8e2ec}

@media (max-width:600px){
  .scroll{padding:8px}
}