.static-pos{
  --header-height: 4em;
  --footer-height: 4em;
}

.static-pos header{
  height: var(--header-height);
  z-index: 10;
  
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.static-pos header h2{
  margin: 0;
}

.static-pos main {
  z-index: 9;
  overflow: auto;

  position: fixed;
  top: var(--header-height);
  bottom: var(--footer-height);
  left: 0;
  right: 0;
}

.static-pos footer {
  z-index: 10;
  height: var(--footer-height);

  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.btn-b-light{
  --bs-btn-border-color: white;
  --bs-btn-hover-border-color: white;
  --bs-btn-active-border-color: white;
  --bs-btn-disabled-border-color: white;
}
.btn-b-dark {
  --bs-btn-border-color: black;
  --bs-btn-hover-border-color: black;
  --bs-btn-active-border-color: black;
  --bs-btn-disabled-border-color: black;
}

.static-pos #grid{
  display: flex;
  flex-wrap: wrap;
  border-width: 1px;
  border-style: outset;
}

.static-pos #grid.large, .static-pos #grid.medium, .static-pos #grid.small {
  --size: 360px;
  font-size: 50%;
}


.static-pos #grid .cell{
  background: url('../img/grass.png') no-repeat;
  background-size: cover;
  
  border: 1px solid rgb(58, 28, 0);
  /* border-style: outset; */
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% / var(--cols));
  height: calc(100% / var(--rows));
}

.static-pos #grid .cell>img {
  width: 100%;
  height: 100%;
}

.static-pos #grid .cell::after{
  background: #000;
  min-width: 1em;
  transform: scale(1.3);
  text-align: center;
  border-radius: 1em;
}

.static-pos #grid .cell.selected{
  background: url('../img/dirt.png') no-repeat;
  background-size: cover;
}
.static-pos #grid .cell.flag.selected{
  background: url('../img/dirt.png') no-repeat;
  background-size: cover;
}
.static-pos #grid .cell.flag{
  background: url('../img/grass.png') no-repeat;
  background-size: cover;
}
.static-pos #grid .cell.flag::after, .static-pos #grid .cell.flag.mine::after{
  content: '🚩';
  background: unset;
  width: auto;
  height: auto;
}
.static-pos #grid .cell.mine{
  background: url('../img/dirt.png') no-repeat;
  background-size: cover;
}
.static-pos #grid .cell.flag.mine {
  background: url('../img/grass.png') no-repeat;
  background-size: cover;
}
.static-pos #grid .cell.mine::after{
  content: '';
  background: url('../img/LandMine.png') no-repeat;
  background-size: contain;
  width: 50%;
  height: 50%;
}
.static-pos #grid .cell.mine.exploded::after {
  background: url('../img/explosion.png') no-repeat;
  background-size: contain;
  width: 70%;
  height: 70%;
}
.static-pos #grid .cell.selected.m1::after{
  content: '1';
  color: lime;
}
.static-pos #grid .cell.selected.m2::after {
  content: '2';
  color: lime;
}
.static-pos #grid .cell.selected.m3::after {
  content: '3';
  color: orange;
}
.static-pos #grid .cell.selected.m4::after {
  content: '4';
  color: orange;
}
.static-pos #grid .cell.selected.m5::after {
  content: '5';
  color: orange;
}
.static-pos #grid .cell.selected.m6::after {
  content: '6';
  color: red;
}
.static-pos #grid .cell.selected.m7::after {
  content: '7';
  color: red;
}
.static-pos #grid .cell.selected.m8::after {
  content: '8';
  color: red;
}

figure>img{
  max-width: 100%;
  max-height: 100%;
}
figure>.title{
  text-align: center;
}


.mouse {display: unset;}
.touch {display: none;}
/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
  .mouse {display: none;}
  .touch {display: unset;}
}