* { 
    box-sizing: border-box; 
}

:root {
    --gap: 8px; 
}

body { 
    margin: 0; 
    min-height: 100dvh; 
    display: grid; 
    place-items: center;
    font-family: system-ui, sans-serif; 
    background-color:#ccc;
}

h1 {
    text-align: center;
    color: rgb(27, 172, 7);
}

.container { 
    width: min(90vw, 840px); 
    padding: 16px; 
}

.hud { 
    display: flex; 
    flex-direction: column;
    align-items: center; 
    justify-content: space-between; 
    gap: 12px; 
    flex-wrap: wrap; 
}

.stats {
    margin-bottom: 12px;
}

.board {
    display: flex; 
    flex-wrap: wrap; 
    gap: var(--gap);
    width: min(90vmin, 480px); 
    aspect-ratio: 1 / 1;
    border: 2px solid #222; 
    border-radius: 12px; 
    padding: var(--gap);
    margin: 0 auto;
}

.cell {
    flex: 1 0 calc(33.333% - var(--gap));
    aspect-ratio: 1 / 1;
    display: grid; 
    place-items: center;
    background: #f2f2f2; 
    border: 2px solid #bbb; 
    border-radius: 10px;
    cursor: pointer;
}

.cell:focus { 
    outline: 3px solid #0a7; 
    outline-offset: 2px; 
}

/* Temporär visuell mullvad , byt gärna mot egen grafik. */

.cell .mole {
    width: 80%;
    height: 80%;
    background-image: url("./img/mole-idle.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.mole.hit {
    background-image: url("./img/mole-bonk.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    opacity: 0.9;
    transform: scale(1);
    transition: opacity 0.15s ease-out, transform 0.5s ease-out;
}