: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);
    /* src: url(../../resources/fonts/04b_25__.woff2); */
}

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

#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);
    font-family: font;
}

#controls, #review {
    margin: 15px;

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

    font-family: font;
}

#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 {
    font-size: calc(var(--title-height) / 8.57);
}

#review > p {
    margin: 10px;
}

#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);
    font-family: font;
}

#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);
    font-family: font;
}

#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;
}

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

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

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

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

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

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

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

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


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

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

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

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

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

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