@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #bdbdbd;
    font-family: 'Press Start 2P', cursive;
    overflow: hidden;
}

#mine-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100vw;
    height: 100vh;
}

.cell {
    width: 30px;
    height: 30px;
    background: #c0c0c0;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    border-right: 3px solid #808080;
    border-bottom: 3px solid #808080;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    cursor: crosshair;
}

.cell.revealed {
    border: 1px solid #7b7b7b;
    background: #bdbdbd;
}

/* Colors for numbers */
.c-1 { color: #0000ff; }
.c-2 { color: #008000; }
.c-3 { color: #ff0000; }
.c-4 { color: #000080; }
.c-5 { color: #800000; }
.c-6 { color: #008080; }
.c-7 { color: #000000; }
.c-8 { color: #808080; }

.hover-tip {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #000;
    color: #fff;
    padding: 10px;
    pointer-events: none;
    z-index: 100;
}