.lo-board {
  display: grid;
  gap: 6px;
  background: rgba(20, 20, 58, 0.6);
  border: 1px solid rgba(19, 103, 229, 0.25);
  border-radius: 12px;
  padding: 10px;
  user-select: none;
}
.lo-cell {
  width: 60px; height: 60px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 1px solid rgba(19, 103, 229, 0.15);
  cursor: pointer;
  transition: transform 0.1s, background 0.18s, box-shadow 0.18s;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}
.lo-cell:hover { transform: scale(1.04); }
.lo-cell.on {
  background: linear-gradient(135deg, #fde047, #f59e0b);
  border-color: #fcd34d;
  box-shadow: 0 0 22px rgba(253, 224, 71, 0.55), inset 0 -2px 4px rgba(180, 83, 9, 0.45);
}
@media (max-width: 540px) {
  .lo-cell { width: 46px; height: 46px; }
}