:root {
    --top-bar-height: 6vh;
    --fade-height: 12vh;
}

@media (orientation: landscape) {
    #minefield {
        width: 35% !important;
    }
    
    #minefield > div {
        font-size: 3vh !important;
    }
}

body {
    margin: 0;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("res/gfx/background.png");
    background-size: cover;
    
    font-family: serif;
}

/* Main menu state visibility. */
body.main-menu {
    #main-menu { display: flex; }
    #game-view { display: none; }
}

/* Game view state visibility. */
body.game-view {
    #main-menu { display: none; }
    #game-view { display: flex; }
}

/* Victory & failure popups. */
body.popup-victory, body.popup-failure {
    #finished-popup { display: flex; }
    #restart, #newgame { display: none; }
    
/*     #minefield {
        padding-top: calc(var(--top-bar-height) * 2  + 4em);
    } */
    
    #top-bar {
        background: black;
    }
}

body.popup-failure { #nextlevel { display: none; } }
body.popup-victory { #nextlevel { display: block; } }

#particle-canvas {
    position: absolute;
    pointer-events: none;
}

#main-menu {
    display: flex;
    flex-flow: column;
    align-items: center;
    color: white;
}

span#game-title {
    font-size: 3em;
    margin: 16px;
}

#button-list {
    display: flex;
    flex-flow: column;
}

#button-list button {
    padding: 1em;
    margin: 8px;
}

#game-view {
    display: flex; 
    justify-content: center;
}

#top-bar {
    position: fixed;
    width: 100vw;
    height: var(--top-bar-height);
    background-image: linear-gradient(black, black, transparent);
    display: flex;
}

#top-bar > span {
    padding: 1em;
    color: white;
    align-content: center;
}

#top-bar .data { flex: 1; }

#bottom-fade {
    bottom: 0;
    position: fixed;
    width: 100vw;
    height: var(--fade-height);
    background-image: linear-gradient(transparent, black);
    pointer-events: none;
}

#finished-popup {
    position: fixed;
    width: 100vw;
    margin-top: var(--top-bar-height);
    background-image: linear-gradient(black, black, transparent);
    display: none;
    flex-flow: column;
    align-items: center;
    color: white;
}

#finished-popup span {
    font-size: 1.5em;
    text-align: center;
    margin: 12px;
}

#finished-popup button {
    padding: 1em;
    flex: 1;
    margin-bottom: 12px;
}

#minefield {
    width: 100%;
    display: grid;
    user-select: none;
    grid-template-columns: repeat(8, 12.5%);
    padding: 2em;
    /*     Padding for the top info bar. */
    padding-top: calc(var(--top-bar-height) + 2em);
    /*     Padding for the bottom fade. */
    padding-bottom: calc(var(--fade-height) + 2em);
}

/* Cells. */
#minefield > div {
    aspect-ratio: 1/1;
    font-weight: bold;
    text-shadow: 0 -2px white;
    -webkit-text-stroke: 1px white;
    text-align: center;
    font-size: 5vw;
    margin: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.unknown, .known { background-size: cover; }
.unknown { background-image: url("./res/gfx/unknown-1.png"); }
.known { background-image: url("./res/gfx/known.png"); }
.flagged { background-image: url("./res/gfx/flagged.png"); }
.exploded { background-image: url("./res/gfx/explosion.png"); }
.known.mine { background-image: url("./res/gfx/bomb.png"); }

.n1 { color: blue; }
.n2 { color: green; }
.n3 { color: red; }
.n4 { color: purple; }
.n5 { color: orange; }
.n6 { color: cyan; }
.n7 { color: pink; }
.n8 { color: teal; }