.lights-board{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;max-width:560px;border:4px solid #283b3d;background:radial-gradient(circle at 70% 12%,#3d5e61,#203538 70%)}.light-cell{position:relative;display:grid;place-items:end center;aspect-ratio:1;min-height:0;padding:8px 3px;border:2px solid #61766f;border-radius:18px 18px 24px 14px;background:#2d4646;color:#aebbb3;font-size:.7rem;font-weight:900;box-shadow:inset 0 0 18px #0e1724}.light-cell:before{content:"";position:absolute;left:24%;right:24%;top:20%;bottom:24%;border:4px solid #826b45;border-radius:45% 45% 20% 20%;background:#394d49}.light-cell:after{content:"";position:absolute;top:8%;width:35%;height:20%;border:4px solid #826b45;border-bottom:0;border-radius:50% 50% 0 0}.light-cell.on{border-color:#ffe37a;background:radial-gradient(circle,#fff8b8aa,#486451 68%);color:#604b12;box-shadow:0 0 20px #ffd85880}.light-cell.on:before{background:radial-gradient(circle,#fffbd0,#ffd858 55%,#d49b2d);box-shadow:0 0 18px #ffd858}.light-cell.hint{outline:4px solid #7ef0c5}@media(max-width:600px){.lights-board{gap:5px;padding:6px}.light-cell{border-radius:10px;font-size:.55rem}.light-cell:before{border-width:2px}.light-cell:after{border-width:2px}}