body {
            font-family: system-ui, sans-serif;
        }
        .grid { display: flex; grid-template-columns: 20; flex-wrap: wrap; width: 713px; margin: 0; justify-content: start;}

        .grid-numbers {
            display: flex;
            justify-content: center;
        }


        .cell {
            width: 30px; height: 30px; text-align: center; line-height:30px;
            margin: 2px; border-radius: 0px; font-weight: 300; color: white;
            cursor: pointer;
            font-size: 14px;
            border : 1px dashed transparent;
            border-radius : 3px;
        }

        .cell.hovered {
            background-color: yellow !important;
            color: black !important;
            border : 1px dashed #2c3e50
        }


        .red { background-color: #e74c3c; }
        .black { background-color: #2c3e50; }
        .green { background-color: #2ecc71; }
        .text-center {text-align: center;}

        .highlight {
            animation: popIn 0.5s ease-out;
        }

        @keyframes popIn {
            0% {
                transform: scale(1.5);
                opacity: 0.8;
                box-shadow: 0 0 10px yellow;
            }
            100% {
                transform: scale(1);
                opacity: 1;
                box-shadow: none;
            }
        }