* {
  box-sizing: border-box;
  image-rendering: pixelated;
}

html,
body {
  margin: 0;
  padding: 0;
}

.preload {
  width: 0;
  visibility: hidden;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  font-family: "Segoe UI", sans-serif;
  font-size: 11px;
  background-color: rgb(0, 134, 137);
}

.minesweeper {
  border-width: 1px;
  border-style: solid;
  border-image: initial;
  border-color: rgb(212, 208, 200) rgb(64, 64, 64) rgb(64, 64, 64)
    rgb(212, 208, 200);
}

.minesweeper-inner {
  border-width: 1px;
  border-style: solid;
  border-image: initial;
  border-color: rgb(255, 255, 255) rgb(128, 128, 128) rgb(128, 128, 128)
    rgb(255, 255, 255);
  background-color: rgb(212, 208, 200);
  padding: 1px;
}

header {
  background: linear-gradient(to right, rgb(0, 1, 129), rgb(16, 132, 208));
  color: rgb(255, 255, 255);
  display: flex;
  font-weight: 700;
  height: 18px;
  padding: 1px 2px;
  align-items: center;
}

header img {
  width: auto;
  height: 15px;
  margin-right: 4px;
}

.game {
  padding: 6px;
  background-color: rgb(192, 192, 192);
  border-width: 3px 0px 0px 3px;
  border-style: solid;
  border-color: rgb(255, 255, 255);
}

section {
  border-width: 2px;
  border-style: solid;
  border-image: initial;
  border-color: rgb(128, 128, 128) rgb(255, 255, 255) rgb(255, 255, 255)
    rgb(128, 128, 128);
}

.scoring {
  margin-bottom: 6px;
}

.scoreboard {
  display: flex;
  align-items: flex-end;
  -webkit-box-pack: justify;
  justify-content: space-between;
  padding: 4px 5px;
}

.panel {
  border-width: 1px;
  border-style: solid;
  border-image: initial;
  border-color: rgb(128, 128, 128) rgb(255, 255, 255) rgb(255, 255, 255)
    rgb(128, 128, 128);
  background-color: rgb(0, 0, 0);
  gap: 2px;
  padding: 2px;
  display: flex;
}

.face-button {
  border: none;
  padding: 0px;
  width: 26px;
  height: 28px;
  background: none;
  margin: 0 2px;
  background-image: url("./img/face.png");
  background-position: center;
  background-repeat: no-repeat;
}

.board-items {
  background-color: rgb(123 123 123 / 4%);
  user-select: none;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.one-square {
  width: 16px;
  height: 16px;
  background-image: url("./img/cell-covered.png");
}

.one-square:active {
  background-image: url("./img/cell-0.png");
}

.exploded {
  pointer-events: none;
  background-image: url("./img/mine-exploded.png");
}

.flagged {
  pointer-events: none;
  background-image: url("./img/cell-flagged.png");
}

.face-button:active {
  background-image: url("./img/face-active.png");
}

.face-button-clicking {
  background-image: url("./img/face-clicking.png");
}

.face-button-won {
  background-image: url("./img/face-won.png");
}

.face-button-dead {
  background-image: url("./img/face-lost.png");
}

.sitter {
  position: fixed;
  bottom: 15px;
  font-family: monospace;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}

.watch {
  background: rgba(255, 255, 255, 0.6);
  padding: 10px 15px;
  border-radius: 22px;
  display: inline-block;
  margin-right: 5px;
}

.twitter {
  background: url("data:image/png;base64,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");
  width: 33px;
  height: 33px;
  display: inline-block;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background-size: 20px 20px;
  background-position: center;
  vertical-align: top;
}

.left {
  left: 15px;
}

.right {
  right: 15px;
}