.mine-wrap{
  max-width:520px;
}

.flag-toggle{
  margin-top:26px;
  font-size:12px;
  padding:12px 22px;
}
.flag-toggle.active{
  background:var(--warn);
  color:#04141a;
  border-color:var(--warn);
  box-shadow:0 0 20px rgba(255,210,63,0.5);
}

.mine-board{
  display:grid;
  grid-template-columns:repeat(9, 1fr);
  gap:3px;
  max-width:400px;
  margin:20px auto 0;
  user-select:none;
  touch-action:manipulation;
}

.cell{
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Orbitron',sans-serif;
  font-size:14px;
  font-weight:700;
  background:rgba(63,242,255,0.08);
  border:1px solid rgba(63,242,255,0.25);
  border-radius:2px;
  cursor:pointer;
  color:#fff;
  transition:background .15s ease, transform .1s ease;
}
.cell:hover{background:rgba(63,242,255,0.16);}
.cell.revealed{
  background:rgba(255,255,255,0.03);
  border-color:rgba(255,255,255,0.08);
  cursor:default;
}
.cell.revealed:hover{background:rgba(255,255,255,0.03);}
.cell.mine{
  background:rgba(255,95,126,0.25);
  border-color:var(--danger);
}
.cell.flag{
  color:var(--warn);
}
.cell.n1{color:#3ff2ff;}
.cell.n2{color:#4dffa0;}
.cell.n3{color:#ff5f7e;}
.cell.n4{color:#c04dff;}
.cell.n5{color:#ffd23f;}
.cell.n6{color:#3fb8ff;}
.cell.n7{color:#ffffff;}
.cell.n8{color:#8fb6c9;}

.restart-btn{
  margin:34px auto 0;
}

@media (max-width:480px){
  .mine-board{max-width:320px;}
  .cell{font-size:12px;}
}