:root {
    /* Colors */
    --light-gray: #c0c0c0;
    --gray: #808080;
    --blue: #0000FD;
    --green: #017E00;
    --red: #fe0000;
    --dark-blue: #010180;
    --dark-red: #810101;
    --teal: #008080;
    --black: #000;

    /* Cursors */
    --default-cur: url('cursor/arrow_s.cur'), auto;
    --move-cur: url('cursor/move_s.cur'), auto;
}

*, *::before, *::after {
    box-sizing: border-box;
    image-rendering: pixelated;
}

html, body {
    margin: 0;
    font-size: 16px;
    overflow: hidden;
    font-family: 'W95font', sans-serif;
    cursor: var(--default-cur);
    position: relative;

    /* Mobile */
    touch-action: manipulation;
}

#game {
    position: relative;
    width: 100vw;
    height: 100vh;
    cursor: var(--default-cur);

    &.inactive {
        pointer-events: none;

        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 998;
        }
    }
}

.touch-widget {
    position: absolute;
    display: none;
    z-index: 999;
    user-select: none;

    button {
        position: absolute;
        background: rgba(0, 0, 0, 0.5);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 75%;
        border-radius: 50%;

        min-width: unset;
        min-height: unset;
        box-shadow: none;

        &#flag {
            background-image: url('ico/flag-button.webp');
            top: 50%;
            transform: translateY(-50%);
        }

        &#reveal {
            background-image: url('ico/reveal-button.webp');
            left: 50%;
            transform: translateX(-50%);
        }
    }
}

.someclass {
    color: #000080;
    color: #0000FF;
}

button.volume {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    padding: 1rem 0 0 1rem;
    cursor: var(--default-cur);
    user-select: none;

    min-width: unset;
    min-height: unset;
    font-size: inherit;
    background: none;
    box-shadow: none;
    text-shadow: none;

    &:focus {
        outline: none;
    }

    &:active {
        box-shadow: none;
        text-shadow: none;
    }
}

.cell {
    position: absolute;
    background: var(--light-gray);
    font-weight: bold;
    text-align: center;
    user-select: none;
    background-image: url('svg/cell.svg');
    background-repeat: no-repeat !important;
    background-size: cover !important;

    &.revealed {
        border: 1px solid var(--gray);
        background-image: none;
    }

    &.mine {
        background: var(--red);
        background-image: url('svg/mine.svg');
    }

    &.flagged {
        background-image: url('svg/flag.svg');
    }
}

.num-1 { color: var(--blue); }
.num-2 { color: var(--green); }
.num-3 { color: var(--red); }
.num-4 { color: var(--dark-blue); }
.num-5 { color: var(--dark-red); }
.num-6 { color: var(--teal); }
.num-7 { color: var(--black); }
.num-8 { color: var(--gray); }

@font-face {
    font-family: 'W95font';
    src: url('font/w95font.woff') format('woff');
    src: url('font/w95font.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'W95font';
    src: url('font/w95font-bold.woff') format('woff');
    src: url('font/w95font-bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}


.window {
    display: none;
    user-select: none;
    min-width: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'W95font', sans-serif;
    cursor: var(--default-cur);
    z-index: 999;

    .title-bar {
        font-family: inherit;
        font-size: inherit;

        .title-bar-controls button[aria-label="Close"] {
            font-size: inherit;
            background-image: url('svg/close.svg');
            cursor: var(--default-cur);
        }
    }

    .window-body {
        display: flex;
        flex-direction: column;
        user-select: text;
    }

    button.focus {
        font-family: inherit;
        font-size: inherit;
        margin-top: 1rem;
        align-self: end;
        cursor: var(--default-cur);
        user-select: none;
    }

    img {
        margin-left: -16px;
        margin-top: -16px;
        pointer-events: none;
        user-select: none;
    }

    ul {
        list-style: square;
        list-style-position: outside;
        padding: 0;
        margin: 0;
    }
    
    li {
        margin-block: 0.2rem;
        margin-left: 0.8rem;
    }
    
    p {
        margin-block: 0.4rem;
    }
}

@media screen and (min-width: 768px) {
    @supports (zoom: 1) {
        .window {
            zoom: 150%;
        }
    }
}

@media screen and (min-width: 1920px) {
    @supports (zoom: 1) {
        .window {
            zoom: 200%;
        }
    }
}