:root {
            --net-color: #f6f6f6;
            --fill-color: #1c2a48;
            --bg-color: #f8fafc;
            --size: 300px;
        }

.net-container {
            width: 90%;
            max-width: var(--size);
            height: auto;
            max-height: var(--size);
            aspect-ratio: 1 / 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Griglia 5x5 ruotata per effetto rombo (rete) */
        .net-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(5, 1fr);
            gap: 12px;
            width: 85%;
            height: 85%;
            transform: rotate(45deg);
        }

        /* Il tassello base */
        .tile {
            position: relative;
            border: 1px solid var(--net-color);
            background: transparent;
            overflow: hidden;
            border-radius: 3px;
            transition: border-color 0.3s;
        }

        /* L'elemento di riempimento automatico */
        .tile::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--fill-color);
            transform: scale(0);
            opacity: 0;
            animation: fillSequence 4s infinite ease-in-out;
            transform-origin: center;
        }

        /* Animazione: si chiude, resta pieno, si svuota */
        @keyframes fillSequence {
            0%, 15% { transform: scale(0); opacity: 0; }
            45%, 75% { transform: scale(1.05); opacity: 1; }
            95%, 100% { transform: scale(0); opacity: 0; }
        }

        /* Effetto di rifinitura per i bordi quando il tassello è pieno */
        @keyframes borderHighlight {
            0%, 15% { border-color: var(--net-color); }
            45%, 75% { border-color: var(--fill-color); }
            95%, 100% { border-color: var(--net-color); }
        }

        .tile {
            animation: borderHighlight 4s infinite ease-in-out;
        }