:root {
  --screen-width: 1920px;
  --screen-height: 1080px;

  --grid-width: 17;
  --grid-height: 9;
  --cell-size: 100px;

  --player-size: 15px;
  --enemy-size: 80px;

  --title-height: 180px;
  --controls-width: 500px;
  --review-width: 500px;
  --score-height: 180px;

  --secret-scale: 1;
  --secret-rotation: 0deg;
  --secret-y-rotation: 0deg;
}

@font-face {
  font-family: font;
  src: url(../../resources/fonts/darkforest.woff2);
}

@font-face {
  font-family: secret-font;
  src: url(../../resources/fonts/04b_25__.woff2);
}

body {
  color: darkgreen;
  background-color: black;
  margin: 0px;
  overflow: hidden;
  user-select: none;
  cursor: none;
  font-family: font;
}

#view {
  --scale: 0.88;
  /* --scale: 0.44; */
  --x-position: 850;
  --y-position: 450;

  transform-origin: calc(var(--screen-width) / 2) calc(var(--screen-height) / 2);
  transform: scale(var(--scale)) scale(var(--secret-scale))
    rotate(var(--secret-rotation)) rotateY(var(--secret-y-rotation))
    translate(
      calc(
        -1 * (var(--controls-width) + var(--x-position) * 1px) + var(
            --screen-width
          ) / 2
      ),
      calc(
        -1 * (var(--title-height) + var(--y-position) * 1px) + var(
            --screen-height
          ) / 2
      )
    );
}

#world {
  display: grid;
  grid-template-columns: var(--controls-width) repeat(
      2,
      calc(var(--grid-width) * var(--cell-size) / 2)
    ) var(--review-width);
  grid-template-rows: var(--title-height) calc(
      var(--grid-height) * var(--cell-size)
    ) var(--score-height);
}

#grid {
  grid-column: span 2;

  display: grid;
  grid-template-columns: repeat(var(--grid-width), var(--cell-size));
  grid-template-rows: repeat(var(--grid-height), var(--cell-size));
  /* outline: 3px solid darkgreen; */
  border: 1px solid darkgreen;
  position: relative;
}

#grid > .tile {
  /* outline: 2px solid darkgreen; */
  border: 1px solid darkgreen;
  transition: all 1s ease-in;
}

#grid > .tile[enabled] {
  /* background-color: rgb(100, 100, 0); */
  background-color: rgb(122, 89, 7);
  transition: all 1s ease-in;
}

#title {
  grid-column: span 4;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: calc(var(--title-height) / 1.8);
}

#controls,
#review,
#secret-review {
  margin: 15px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: justify;
}

#controls {
  font-size: calc(var(--title-height) / 1.8);
}

#controls > table {
  /* text-align: center; */
  font-size: calc(var(--title-height) / 4.6);
  border-spacing: 15px 0px;
}

#review {
  grid-row: 2;
  grid-column: 4;
  font-size: calc(var(--title-height) / 8.57);
}

#review > p,
#secret-review > p {
  margin: 10px;
}

#secret-review {
  display: none;
  grid-row: 2;
  grid-column: 4;
  font-size: calc(var(--title-height) / 5.45);
}

#secret-review > p {
  padding-left: calc(var(--title-height) / 2);
  width: 100%;
}

#score {
  grid-column: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  padding-top: 50px;
  font-size: calc(var(--title-height) / 2);
}

#score > span {
  margin: 0px 1vw;
}

#score > #new-record {
  display: none; /* flex */
  color: darkred;
}

#highscores {
  grid-column: 3;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  padding-top: 50px;
  font-size: calc(var(--title-height) / 2);
}

#highscores > table {
  font-size: calc(var(--title-height) / 3);
  color: darkred;
}

#highscores td {
  padding-left: 25px;
  padding-right: 25px;
}

#player {
  --x-position: 850;
  --y-position: 450;

  position: absolute;
  left: calc(var(--x-position) * 1px - var(--player-size) / 2);
  top: calc(var(--y-position) * 1px - var(--player-size) / 2);

  width: var(--player-size);
  height: var(--player-size);
  background: green;
  box-shadow: 0px 0px 25px 5px black;
  border-radius: 50%;
}

#enemies > div {
  --x-position: 0;
  --y-position: 0;
  --x-velocity: 0;
  --y-velocity: 0;

  position: absolute;
  left: calc(var(--x-position) * 1px - var(--enemy-size) / 2);
  top: calc(var(--y-position) * 1px - var(--enemy-size) / 2);

  width: var(--enemy-size);
  height: var(--enemy-size);
  background: red;
  /* box-shadow: 0px 0px 20px 5px black; */
  border-radius: 50%;
}

.modal {
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 1;

  display: none; /* flex */
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#title-modal {
  background: black;
  display: flex; /* none */
  cursor: auto;
  font-family: font;
}

#name-entry-modal {
  background: black;
  display: none; /* flex */
  cursor: auto;
}

#name-entry-modal * {
  font-family: inherit;
}

#drink-modal {
  background: rgba(0, 0, 0, 0);
}

.modal > text {
  color: red;
  text-align: center;
  font-size: 15vw;
}

#dead-modal > text {
  font-size: 30vw;
}

#drink-modal > text {
  font-size: 30vw;
}

.modal > subtext {
  color: red;
  text-align: center;
  font-size: 5vw;
}

.modal input {
  color: red;
  background-color: black;
  border: 3px solid darkred;
  border-radius: 30px;
  text-align: center;
  font-size: 5vw;
}

.modal input:focus {
  border: 3px solid red;
  outline: none;
}

#secret-modal {
  background: black;
  display: none; /* grid */
  cursor: auto;
  font-family: font;

  grid-auto-flow: column;
  grid-template-rows: repeat(7, 1fr);
}

#secret-modal > subtext:hover,
#secret-modal > subtext.highlighted,
#secret-modal > #no-thanks:hover {
  color: darkred;
}

#secret-modal > subtext {
  font-size: 4vw;
}

#secret-modal > subtext:first-child {
  grid-column: span 2;
  font-size: 10vw;
  color: red;
}

#secret-modal > #no-thanks {
  color: red;
  font-size: 2vw;

  position: absolute;
  right: 20;
  bottom: 20;
}