html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    font-size: 20px;
    line-height: 1.5;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column;
}

.result {
    min-height: 1rem;
}

.content {
    width: 640px;
    height: 480px;
    gap: 2px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

.cell {
    cursor: pointer;
    user-select: none;
    font-size: 4rem;
    background: gray;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    color: white;
}

.cell__symbol {
    display: none;
}

.cell.opened .cell__symbol {
    display: block;
}

.cell.closed {
    visibility: hidden;
}

@keyframes tracking-in-expand {
    0% {
        filter: blur(12px);
        opacity: 0;
    }
    100% {
        filter: blur(0px);
        opacity: 1;
    }
}

.flip {
    animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}