* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: Arial, Tahoma, Verdana, sans-serif;
  font-size: 12px;
  color: #ffffff;
  background-color: #000000;
  background-image: linear-gradient(
    to bottom,
    #000007 0%,
    #0f0f11 5%,
    #494949 10%,
    #737373 14%,
    #aeaeae 19%,
    #cfcfcf 23%,
    #fdfdfd 27%,
    #8e8e8e 29%,
    #000000 31%,
    #000000 39%,
    #0b0b0b 44%,
    #292929 49%,
    #383838 54%,
    #515151 59%,
    #656565 64%,
    #808080 69%,
    #919191 74%,
    #ababab 79%,
    #c0c0c0 83%,
    #d0d0d0 87%,
    #e3e3e3 91%,
    #fafafa 95%,
    #ffffff 100%
  );
  background-attachment: fixed;
  user-select: none;
}

#wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#selector-panel {
  width: 100%;
  max-width: 780px;
  padding: 36px;
  background: linear-gradient(
    to bottom,
    #000007 0%,
    #302e31 8%,
    #747474 16%,
    #dadada 24%,
    #fdfdfd 28%,
    #000000 30%,
    #000000 38%,
    #292929 48%,
    #515151 58%,
    #808080 68%,
    #ababab 78%,
    #d0d0d0 88%,
    #fafafa 95%,
    #ffffff 100%
  );
  border: 1px solid #000000;
  outline: 1px solid #ffffff;
  box-shadow: 0 0 0 2px #000000;
}

.grid-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  justify-items: center;
}

.square-box {
  width: 100%;
  max-width: 210px;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  background: linear-gradient(
    to bottom,
    #fdfdfd 0%,
    #cfcfcf 14%,
    #737373 28%,
    #181816 42%,
    #000000 50%,
    #292929 62%,
    #656565 74%,
    #ababab 86%,
    #ffffff 100%
  );
  border: 1px solid #000000;
  box-shadow:
    inset 0 0 0 1px #ffffff,
    0 0 0 1px #000000;
}

.square-box:hover {
  background: linear-gradient(
    to bottom,
    #000000 0%,
    #1a1a1a 18%,
    #747474 36%,
    #fdfdfd 50%,
    #000000 54%,
    #383838 72%,
    #aeaeae 88%,
    #ffffff 100%
  );
  border-color: #ffffff;
  box-shadow:
    inset 0 0 0 1px #000000,
    0 0 0 1px #ffffff;
}

.square-box:active {
  transform: translateY(1px);
}

#game-panel {
  width: 100%;
  max-width: 780px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(
    to bottom,
    #000000 0%,
    #292929 20%,
    #737373 45%,
    #cfcfcf 75%,
    #ffffff 100%
  );
  border: 1px solid #000000;
  outline: 1px solid #ffffff;
  box-shadow: 0 0 0 2px #000000;
}

#game-header {
  padding: 6px 10px;
  background: linear-gradient(
    to bottom,
    #fdfdfd 0%,
    #aeaeae 30%,
    #494949 70%,
    #000000 100%
  );
  border-bottom: 1px solid #000000;
  display: flex;
  align-items: center;
}

#back-btn {
  font-family: Arial, Tahoma, Verdana, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #ffffff;
  text-shadow:
    -1px -1px 0 #000000,
     1px -1px 0 #000000,
    -1px  1px 0 #000000,
     1px  1px 0 #000000;
  padding: 3px 10px;
  background: linear-gradient(
    to bottom,
    #000000 0%,
    #494949 45%,
    #cfcfcf 85%,
    #ffffff 100%
  );
  border: 1px solid #000000;
  box-shadow: inset 0 0 0 1px #ffffff;
  cursor: pointer;
}

#back-btn:hover {
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #8e8e8e 45%,
    #181816 85%,
    #000000 100%
  );
}

#game-viewport {
  min-height: 480px;
  margin: 10px;
  background: linear-gradient(
    to bottom,
    #000007 0%,
    #302e31 12%,
    #747474 22%,
    #fdfdfd 29%,
    #000000 31%,
    #0b0b0b 45%,
    #383838 60%,
    #808080 76%,
    #d0d0d0 90%,
    #ffffff 100%
  );
  border: 1px solid #000000;
  outline: 1px solid #ffffff;
}

.hidden {
  display: none !important;
}

@media (max-width: 680px) {
  .grid-6 {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}