:root {
  --crt-green: #00ff41;
  --crt-green-dim: #007a1f;
  --crt-amber: #ffb300;
  --crt-amber-dim: #7a5500;
  --crt-bg: #060a06;
  --crt-surface: #080e08;
  --crt-border: #003a10;
  --mono: "VT323", monospace;
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100svh;
  font-family: var(--mono);
  color: white;
  background-color: var(--crt-bg);
}

.mnk__menu {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.button {
  padding: 1rem 2rem;
  font-size: 2.5rem;
  color: inherit;
  text-transform: uppercase;
  background-color: var(--crt-surface);
  border: 1px solid var(--crt-border);
}

.button::before,
.button::before {
  color: transparent;
  content: "[";
}

.button::after,
.button::after {
  color: transparent;
  content: "]";
}

.button:hover::before,
.button:hover::before,
.button:hover::after,
.button:hover::after {
  color: inherit;
}

.button--return {
  position: absolute;
  top: 0;
  left: 0;
}

.mnk__game {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 10rem);
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.mnk__board {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
}

.mnk__col {
  --_board-size: min(80vw, 70vh, 500px);
  --_max-cells: max(var(--rows), var(--cols));

  width: calc(var(--_board-size) / var(--_max-cells));
  aspect-ratio: 1 / 1;
  font-size: calc(20rem / var(--_max-cells));
  color: white;
  cursor: pointer;
  background-color: var(--crt-surface);
  border: 1px solid var(--crt-border);
  border-radius: 0;
}

.settings {
  flex-direction: column;
  gap: 2rem;
  width: min(500px, 90vw);
}

.settings__title {
  padding-bottom: 0.5rem;
  font-size: 2.5rem;
  color: var(--crt-amber);
  text-transform: uppercase;
  letter-spacing: 4px;
  border-bottom: 1px solid var(--crt-border);
}

.settings__rules {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1.5rem;
  align-items: center;
}

.settings__label {
  font-size: 1.8rem;
  color: var(--crt-green-dim);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.settings__input {
  width: 80px;
  padding: 0.25rem 0.75rem;
  font-size: 1.7rem;
  color: var(--crt-green);
  text-align: center;
  background-color: var(--crt-surface);
  border: 1px solid var(--crt-border);
}

.settings__input::-webkit-outer-spin-button,
.settings__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.settings__input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
}

.settings__input:focus {
  color: white;
  outline: none;
  border-color: var(--crt-green);
}

.settings__players {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.player {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 0.5rem 1rem;
  align-items: center;
}

.player__input {
  width: 100%;
  text-align: left;
}

.player__input--token {
  width: 52px;
  color: var(--crt-amber);
  text-align: center;
  border-color: var(--crt-amber-dim);
}

.player__input--token:focus {
  border-color: var(--crt-amber);
}