/* Minesweeper */
  .minesweeper_box{position:relative;}
  
  .tile {float: left; width:100%; max-width: 32px; height: 32px; position: relative; box-sizing: border-box; background: #bdbdbd; border-top: 2px solid #fff; border-left: 2px solid #fff; border-right: 2px solid #747474; border-bottom: 2px solid #747474; text-align: center; line-height: 28px;}
  .tile:active, .tile.active {border-top: 2px solid #747474; border-left: 2px solid #747474; border-right: 2px solid #fff; border-bottom: 2px solid #fff;}
  .bomb::before {content: ''; display: block; width: 10px; height: 10px; background: #000; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; display: none;}
  .bomb.activated::before {display: block;}
  .bomb.blasted::before {background: red;}
  .flagged::before {content: ''; display: block; width: 10px; height: 13px; position: absolute; top: 7px; left: 6px; border-right: 2px solid #000; background: transparent; border-radius: 0; transform: none;}
  .flagged::after {content: ''; width: 0; height: 0; border-style: solid; border-width: 4px 8px 4px 0; border-color: transparent red transparent transparent; display: block; position: absolute; top: 7px; left: 6px;}