.minesweeper-page{
  display:grid;
  gap:20px;
}

.minesweeper-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:14px;
  flex-wrap:wrap;
}

.minesweeper-toolbar label{
  display:grid;
  gap:7px;
  font-weight:1000;
  color:#111;
}

.minesweeper-toolbar select,
.minesweeper-toolbar button{
  min-height:46px;
  border:4px solid #111;
  border-radius:14px;
  background:#fff;
  color:#111;
  box-shadow:4px 4px 0 #111;
  padding:0 14px;
  font-weight:1000;
}

.minesweeper-toolbar button{
  background:#ffd32a;
  cursor:pointer;
}

.minesweeper-message{
  background:#fff3b0;
  border:4px solid #111;
  border-radius:18px;
  box-shadow:5px 5px 0 #111;
  padding:14px 16px;
  font-weight:1000;
}

/* Fenêtre ancienne */
.minesweeper-shell{
  width:max-content;
  max-width:100%;
  margin:0 auto;
  background:#c0c0c0;
  border:2px solid #111;
  box-shadow:
    8px 8px 0 #111,
    inset 2px 2px 0 #ffffff,
    inset -2px -2px 0 #7b7b7b;
  color:#111;
  font-family:"MS Sans Serif", Tahoma, Arial, sans-serif;
  overflow:auto;
}

.minesweeper-window-bar{
  height:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(90deg,#001b82,#74a5dc);
  color:#fff;
  padding:2px 5px;
  font-size:13px;
  font-weight:700;
}

.minesweeper-title{
  display:flex;
  align-items:center;
  gap:5px;
}

.minesweeper-icon{
  width:14px;
  height:14px;
  display:inline-block;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 2px, transparent 3px),
    radial-gradient(circle, #1b42ff 0 55%, #061a7a 56%);
  border:1px solid #fff;
}

.minesweeper-window-buttons{
  display:flex;
  gap:2px;
}

.minesweeper-window-buttons span{
  width:17px;
  height:16px;
  display:grid;
  place-items:center;
  background:#c0c0c0;
  color:#111;
  font-size:12px;
  line-height:1;
  border-top:2px solid #fff;
  border-left:2px solid #fff;
  border-right:2px solid #404040;
  border-bottom:2px solid #404040;
}

.minesweeper-menu{
  height:23px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 7px;
  background:#c0c0c0;
  font-size:13px;
}

.minesweeper-panel{
  padding:9px;
  background:#c0c0c0;
}

.minesweeper-header{
  height:46px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  margin-bottom:8px;
  padding:6px 8px;
  background:#bdbabd;
  border-top:3px solid #7b7b7b;
  border-left:3px solid #7b7b7b;
  border-right:3px solid #fff;
  border-bottom:3px solid #fff;
}

.mine-led{
  justify-self:start;
  min-width:58px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#111;
  color:#ff1212;
  border:2px inset #777;
  font-family:"Courier New", monospace;
  font-weight:1000;
  font-size:25px;
  line-height:1;
  letter-spacing:1px;
  text-shadow:0 0 5px rgba(255,0,0,.8);
}

#mineTimer{
  justify-self:end;
}

.mine-smiley{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  background:#c0c0c0;
  border-top:3px solid #fff;
  border-left:3px solid #fff;
  border-right:3px solid #7b7b7b;
  border-bottom:3px solid #7b7b7b;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  padding:0;
}

.mine-smiley:active{
  border-top:3px solid #7b7b7b;
  border-left:3px solid #7b7b7b;
  border-right:3px solid #fff;
  border-bottom:3px solid #fff;
}

.minesweeper-board-wrap{
  background:#bdbabd;
  border-top:3px solid #7b7b7b;
  border-left:3px solid #7b7b7b;
  border-right:3px solid #fff;
  border-bottom:3px solid #fff;
  padding:3px;
}

.minesweeper-board{
  display:grid;
  background:#bdbabd;
  gap:0;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
}

.mine-cell{
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  padding:0;
  margin:0;
  background:#c0c0c0;
  border-top:3px solid #fff;
  border-left:3px solid #fff;
  border-right:3px solid #7b7b7b;
  border-bottom:3px solid #7b7b7b;
  font-family:Arial, sans-serif;
  font-size:16px;
  font-weight:1000;
  line-height:1;
  cursor:pointer;
  box-sizing:border-box;
  color:#111;
}

.mine-cell:active{
  border-top:2px solid #7b7b7b;
  border-left:2px solid #7b7b7b;
  border-right:1px solid #fff;
  border-bottom:1px solid #fff;
}

.mine-cell.revealed{
  background:#c0c0c0;
  border:1px solid #808080;
  cursor:default;
}

.mine-cell.flagged{
  color:#e00000;
  font-size:15px;
}

.mine-cell.mine{
  background:#ff4d4d;
  border:1px solid #808080;
}

.mine-cell.exploded{
  background:#ff0000;
}

.mine-cell.n1{ color:#0000ff; }
.mine-cell.n2{ color:#008000; }
.mine-cell.n3{ color:#ff0000; }
.mine-cell.n4{ color:#000080; }
.mine-cell.n5{ color:#800000; }
.mine-cell.n6{ color:#008080; }
.mine-cell.n7{ color:#000000; }
.mine-cell.n8{ color:#808080; }

@media(max-width:760px){
  .minesweeper-shell{
    width:100%;
  }

  .minesweeper-panel{
    overflow:auto;
  }

  .mine-cell{
    width:21px;
    height:21px;
    font-size:14px;
  }

  .mine-led{
    min-width:54px;
    font-size:22px;
  }
}