.center {
  position: absolute;
  height: 90%;
  width: 90%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.timer {
  text-align: start;
  position: absolute;
  height: 5%;
  width: 50%;
  top: -4%;
}
.timerH {
  text-align: end;
  position: absolute;
  height: 5%;
  width: 50%;
  top: -4%;
right: 0px
}

.gamePanel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.messagePanel {
  --finImg: url("./data/party_animal.png");
  --waitImg: url("./data/cat_study.png");
  display: none;
  height: 100%;
  width: 100%;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: var(--finImg);
}

body {
  text-align: end;
  background-color: whitesmoke;
}

.fullsc {
  cursor: pointer;
}

.cell {
  --outlineC: transparent;
  width: var(--cellWidth);
  height: var(--cellHight);
  border: 2px inset black;
  box-sizing: border-box;
  outline: 4px dotted;
  outline-color: var(--outlineC);
  outline-offset: -6px;
  background-image: conic-gradient(white 0deg 90deg, gray 90deg 180deg, white 180deg 270deg, gray 270deg 360deg);
  background-size: 100% 100%;
}

.cell:hover {
  border-color: white;
}

.menu {
  position: relative;
  width: 100%;
  display: flex;
  margin-bottom: 6px;
  /* flex: 0 0 auto; */
}

.reset {
  /* flex: min-content; */
  align-self: end;
}

.select {
  /* flex: auto; */
  flex: auto;
}

.viewer {
  position: absolute;
  height: 80%;
  width: 4%;
  left: -5%;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 2px inset black;
  box-sizing: border-box;
  --outlineC: transparent;
  outline: 4px dotted;
  outline-color: var(--outlineC);
  outline-offset: -6px;
  --bg: conic-gradient(white 0deg 90deg, gray 90deg 180deg, white 180deg 270deg, gray 270deg 360deg);
  background-image: var(--bg);
  background-size: 100% 25%;
}

.viewerR {
  left: auto !important;
  right: -5% !important;
}

.outer {
  --cellWidth: 50%;
  --cellHight: 50%;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex: auto;
  width: 100%;
  background-image: conic-gradient(white 0deg 90deg, gray 90deg 180deg, white 180deg 270deg, gray 270deg 360deg);
  background-size: var(--cellWidth) calc(var(--cellHight) / 4);
  background-position-y: 2px;
}