:root {
    --board-width: 40;
    --board-height: 30;
}

body {
    padding: 0;
    margin: 0;
    border: 0;

    background-color: #1F1F1F;

    font-family: glory;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

board {
    --width: 90vmin;
    --height: calc(var(--width) * (var(--board-height) / var(--board-width)));
    --font-size: 20cqmin; 

    position: absolute;

    width: var(--width);
    height: var(--height);

    left: calc((100vw - var(--width)) / 2);
    top: calc((100vh - var(--height)) / 2);

    background-color: #1F1F1F;

    border-radius: 0.5%;
    overflow: hidden;

    z-index: 0;
}

tile {
    --width: calc(100% / var(--board-width));
    --height: calc(100% / var(--board-height));

    position: absolute;

    cursor: pointer;
    display: grid;

    width: var(--width);
    height: var(--height);

    container-type: size;
}

tile>span {
    font-size: var(--font-size);
    font-weight: 1000;
    margin: auto;
}

center, img {
    position: relative;
    margin: auto;
}

button {
    cursor: pointer;
    font-family: glory;
}

@font-face {
    font-family: glory;
    src: url(Glory.ttf);
}

#time-display-div {
    width: min-content;
    height: 3vh;

    left: calc((100vw - 90vmin) / 2);
    top: calc((100vh - calc(90vmin * (var(--board-height) / var(--board-width)))) / 2 - 3.5vh);

    display: flex;
    position: absolute;
}

#time-display {
    margin: auto;
    color: white;
    
    font-size: 3vh;
    font-family: monospace;
}

#game-over-alert, #settings-alert {
    --width: 50vmin;
    --height: 70vmin;
    
    position: absolute;
    
    width: var(--width);
    height: var(--height);
    
    left: calc((100vw - var(--width)) / 2);
    top: calc((100vh - var(--height)) / 2);
    
    border-radius: 1vmin;
    
    background-color: white;
    
    display: none;
    
    z-index: 5;
}

.leaderboard-row {
    --height: 100%;
    --index: 0;
    
    display: grid;
    align-items: center;

/*    border-bottom: 1px solid whitesmoke;
    border-top: 1px solid whitesmoke;*/

    width: 100%;
    height: var(--height);
}


.leaderboard-index, .leaderboard-date, .leaderboard-name, .leaderboard-time {
    height: calc(100% - 2px);
    
    display: grid;
    align-content: center;
}

/*.leaderboard-index {
    border-left: 0px;
    border-right: 1px solid whitesmoke;
}

.leaderboard-time {
    border-left: 1px solid whitesmoke;
    border-right: 0px;
}

.leaderboard-date, .leaderboard-name {
    border-left: 1px solid whitesmoke;
    border-right: 1px solid whitesmoke;
}*/

#game-over-leaderboard {
    --width: calc(100%);
    /* Full height - button height - button margin - top - border */
    --height: calc(100% - 15% - 4% - 10% - 0px);

    position: absolute;
    
    line-break: normal;
    text-align: center;

    display: grid;
    grid-template-rows: auto;

/*    border-top: 1px solid whitesmoke;
    border-bottom: 1px solid whitesmoke;*/

    top: 10%;

    width: var(--width);
    height: var(--height);
    
    font-size: 1.5vmin;
}

#game-over-leaderboard>h2 {
    grid-row: 2/11;
}

#flag-counter {
    color: white;

    font-size: 3vh;
    font-family: monospace;

    display: grid;
    position: absolute;

    grid-template-columns: repeat(2, 1fr);

    width: min-content;
    height: 3vh;

    right: calc((100vw - 90vmin) / 2);
    top: calc((100vh - calc(90vmin * (var(--board-height) / var(--board-width)))) / 2 - 3.5vh);
}

#game-over-header {
    margin: auto;
    font-size: 5vmin;
}

#game-over-retry-button {
    --width: 95%;
    --height: 15%;
    
    position: absolute;
    
    width: var(--width);
    height: var(--height);

    left: calc((100% - var(--width)) / 2);
    bottom: 2%;

    border-radius: 1vmin;
    display: flex;

    background-color: forestgreen;
    color: white;

    cursor: pointer;

    /* This below isn't really needed, though it may have an effect if the image were to be unavailable */
    font-size: 2.5em;
    font-weight: bold;
}

#retry-icon, #settings-icon, #change-leaderboard-icon, #opacity-icon {
    --size: 75%;

    max-height: var(--size);
    max-width: var(--size);

    aspect-ratio: 1/1;

    cursor: pointer;
    margin: auto;
}

#background-dim {
    width: 100vw;
    height: 100vh;

    background-color: black;
    opacity: 0.8;
    display: none;

    z-index: 2;
}

#settings {
    --padding: 3%;

    display: grid;
    
    max-height: calc(100% - var(--padding) * 2 - 5vh);
    width: calc(100% - var(--padding) * 2);
    
    overflow-y: scroll;

    grid-template-columns: 1fr;
    grid-auto-rows: 3vmin;

    padding: var(--padding);
}

#settings-alert {
    justify-content: space-between;
    flex-wrap: wrap;
}

#settings-alert>button {
    width: 45%;
    height: 5vh;
    
    bottom: 0px;
    margin: 3%;

    position: absolute;

    color: white;
    border: none;

    font-size: 2.5vh;

    border-radius: 1vmin;
}

#apply-settings {
    left: 0px;

    background-color: forestgreen;
}

#cancel-settings {
    right: 0px;

    background-color: red;
}

tile>.center-circle, tile>.left-circle, tile>.right-circle {
    width: 0px;
    height: 0px;

    background-color: blue;

    border-radius: 100vmax;

    position: absolute;
    transition: width 300ms, height 300ms, left 300ms, top 300ms;
}

tile>.center-circle {
    left: calc((100% - 50%) / 2 + 50% / 2);
    top: calc((100% - 50%) / 2 + 50% / 2);
}

tile>.left-circle {
    left: calc(2% + 35% / 2);
    top: calc(50% + 35% / 2);

/*    left: 50%/*calc((100% - 0px) / 2)*/;
/*    top: 2%/*calc((100% - 0px) / 2)*/;
}

tile>.right-circle {
    left: calc(60% + 25% / 2);
    top: calc(10% + 25% / 2);

/*    left: 60%/*calc((100% - 0px) / 2)*/;
/*    top: 10%/*calc((100% - 0px) / 2)*/;
}