.lights-grid {
    padding: 10px;
    border: 1px solid rgba(115, 143, 219, .28);
    border-radius: 22px;
    background: rgba(4, 8, 25, .82);
}

.lights-cell {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(103, 119, 175, .5);
    background: linear-gradient(145deg, #171b35, #090c1e);
    color: #596280;
    transition: transform .12s ease, border-color .18s ease, background .18s ease, color .18s ease;
    touch-action: manipulation;
}

.lights-cell::before {
    content: "✦";
    font-size: clamp(1.25rem, 5vw, 2.2rem);
    line-height: 1;
    transform: scale(.72);
    transition: transform .18s ease, color .18s ease, filter .18s ease;
}

.lights-cell.is-on {
    border-color: #ffe28a;
    background: radial-gradient(circle at 38% 32%, #fffdf0 0 8%, #ffe58c 24%, #e49b2f 58%, #77420f 100%);
    color: #fffbe6;
}

.lights-cell.is-on::before {
    transform: scale(1.08);
    color: #fff;
    filter: drop-shadow(0 0 7px rgba(255, 231, 137, .95));
}

.lights-cell:active {
    transform: scale(.9);
}

@media (max-width: 620px) {
    .lights-grid {
        padding: 7px;
        border-radius: 16px;
    }
}