* {
  box-sizing: border-box;
}

body {
  background-color: hsl(221, 31%, 62%);
  font-family: Arial, Helvetica, serif;
}

dialog {
  background-color: hsl(221, 31%, 62%);
  border-radius: 4px;
  box-shadow: 4px 4px 3px hsla(0, 0%, 0%, 45%);
}

dialog::backdrop {
  backdrop-filter: blur(2px);
}

.area {
  background-color: white;
  border: 4px solid black;
  border-radius: 4px;
  box-shadow: 4px 4px 3px hsla(0, 0%, 0%, 45%);
  width: fit-content;
}

#gameContainer {
  display: grid;
  grid-template-columns: 817px 1fr;
  grid-column-gap: 5px;
}

#sidebarContainer {
  display: grid;
  grid-template-rows: repeat(8, auto) 1fr;
  background-color: white;
  padding: 5px;
  width: 425px;
}

.logoRow {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  font-size: 32px;
  grid-column-gap: 10px;
  padding-bottom: 5px;
}

#logo {
  width: 64px;
  height: 64px;
  filter: drop-shadow(4px 4px 3px hsla(0, 0%, 0%, 45%));
}

.nanometersDisplay {
  display: inline-block;
  background-color: hsl(0, 0%, 79%);
  width: 16px;
  text-align: center;
  filter: blur(3px) grayscale(1);
  outline: 1px solid black;
}

#spanMagicKey {
  display: none;
}

#divCurrency {
  font-size: 20px;
}

#divStatsContainer {
  display: grid;
  grid-template-columns: 95px 1fr 1fr 1fr auto;
  padding-bottom: 5px;
}

#areaInfoContainer {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 10px;
  align-items: end;
  box-shadow: inset 1px 1px 5px 0px black;
  width 100%;
  padding: 6px;
}

.areaInfoLabel {
  text-align: right;
}

#areaInfoTable {
  width: 100%;
}

#areaInfoID {
  width: fit-content;
}

#areaArrowContainer {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  grid-template-columns: 30px 30px 30px;
  grid-template-rows: 30px 30px 30px;
  margin: 10px;
}

.areaArrow {
  padding: 0px;
  font-size: 20px;
}

#areaArrowKey {
  display: none;
}

#areaArrowUp {
  grid-column-start: 2;
}

#areaArrowLeft {
  grid-row-start: 2;
}

#areaArrowNone {
  grid-row-start: 2;
  grid-column-start: 2;
}

#areaArrowRight {
  grid-column-start: 3;
  grid-row-start: 2;
}

#areaArrowDown {
  grid-column-start: 2;
  grid-row-start: 3;
}

#gridContainer {
  display: grid;
  width: 808px;
  height: 808px;
  grid-template-columns: repeat(20, 40px);
  grid-template-rows: repeat(20, 40px);
  background-color: hsl(221, 24%, 69%);
  /*grid-gap: 1px;*/
}

.areaContainer {
  display: grid;
  border: 1px solid black;
  outline: none; /* prevent focus highlight */
  user-select: none;
  grid-template: 8px 1fr 8px / 8px 1fr 8px;
}

.particle {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 20pt;
  user-select: none;
  color: white;
  -webkit-text-stroke: 0.5px black;
  filter: drop-shadow(3px 3px 3px hsla(0, 0%, 0%, 0.4));
}

.particleLetters {
  width: 16px;
  height: auto;
  font-size: 16px;
  text-align: center;
  color: black;
  -webkit-text-stroke: 0px currentColor;
  outline: 1px solid black;
}

.gridCellContainer {
  display: grid;
  grid-template: 8px 1fr 8px / 8px 1fr 8px;
  outline: none; /* prevent focus highlight */
  user-select: none;
}

.leftArrow {
  display: none;
  grid-column: 1;
  grid-row: 1 / 4;
}

.rightArrow {
  display: none;
  grid-column: 3;
  grid-row: 1 / 4;
}

.upArrow {
  display: none;
  grid-column: 1 / 4;
  grid-row: 1;
}

.downArrow {
  display: none;
  grid-column: 1 / 4;
  grid-row: 3;
}

.areaSelected {
  box-shadow: inset 0px 0px 5px 0px black;
}

.gridBackground {
  grid-area: 2 / 2 / 3 / 3;
  outline: 1px solid black;
  box-shadow: 2px 2px 4px black;
}

.areaProgress {
  background-color: hsl(0, 0%, 65%);
  grid-area: 1/1/4/4;
}

.cellForeground {
  grid-area: 2/2/3/3;
  background-color: transparent;
  font-size: 10px;
  text-align: center;
  font-family: "Ubuntu Mono", monospace;
  background-repeat: no-repeat;
  background-position: left;
}

.keyPlus {
  font-size: 16px;
  vertical-align: top;
}

.keyCost {

}

#helpClose {
  width: 100%;
  margin-top: 1em;
}

#winTitle {
  font-size: 32px;
}

#winClose {
  width: 100%;
  margin-top: 1em;
}

#divNote {
  filter: opacity(0.4);
  align-self: end;
}